AJAX ile Sayfa yenilemeden Select nasıl yapılır ?(PDO)

20-01-2021, 14:00:18

#1

eruseldarine

Merhaba,

gazeteci ve gazete olarak 2 ayrı tablom var. bir form yaptım bu formda önce gazete tablosundan gazeteler seçilecek ve sadece o gazetelerde yazan gazetecilerin listesi çıksın diye gazeteci_gazeteid adındaki tabloyu gormek istiyorum. bunu $_POST ile sayfa yenileyerek yapıyorum. Bu işleri hobi olarak yapıyorum ve çok iyi de değilim. AJAX ile bu sorgunun sayfa yenilenmeden yapıldığını video derslerden gördüm ama baktığım tüm video dersler mysqli query kullanıyor. güzel bir kaynak önerisi veya elinde benzer hazır kodu olan var mı ?

gazete tablosu

gazete_id
gazete_ad

gazeteci tablosu

gazeteci_id
gazeteci_ad
gazeteci_gazeteid

21-01-2021, 04:21:05

Görsel düzene pek takılmayın onu seyrim için yaptım.

<?php
$db = new PDO('mysql:host=localhost;dbname=gazete', 'root', '');
$db->query('SET NAMES utf8');


if (isset($_REQUEST['gazeteler'])) {
    header('Content-type: application/json');

    $rows = array();
    foreach($db->query('SELECT * FROM gazete ORDER BY gazete_ad ASC', PDO::FETCH_ASSOC) as $row) {
        array_push($rows, $row);
    }

    exit(json_encode($rows));
} elseif (isset($_REQUEST['gazete_id'])) {
    header('Content-type: application/json');

    $rows = array();
    foreach($db->query('SELECT * FROM gazeteci WHERE gazete_id = ' . (int) $_GET['gazete_id'] . ' ORDER BY gazeteci_ad ASC', PDO::FETCH_ASSOC) as $row) {
        array_push($rows, $row);
    }

    exit(json_encode($rows));
}

/* MySQLi
$db = new mysqli('localhost', 'root', '', 'gazete');
$db->query('SET NAMES utf8');

if (isset($_REQUEST['gazeteler'])) {
    header('Content-type: application/json');

    $query = $db->query('SELECT * FROM gazete ORDER BY gazete_ad ASC');

    $rows = array();
    while ($row = $query->fetch_object()) {
        array_push($rows, $row);
    }

    exit(json_encode($rows));
} elseif (isset($_REQUEST['gazete_id'])) {
    header('Content-type: application/json');

    $query = $db->query('SELECT * FROM gazeteci WHERE gazeteci_gazeteid = ' . (int) $_GET['gazete_id']);

    $rows = array();
    while ($row = $query->fetch_object()) {
        array_push($rows, $row);
    }

    exit(json_encode($rows));
}*/
?>
<!DOCTYPE html>
<html>
<head>
    <title>Gazeteci</title>
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Ubuntu:400,500&subset=latin-ext">
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/nprogress@0.2.0/nprogress.css">
    <meta charset="utf-8">
    <style>
        body{font-family:Ubuntu;font-size:13px;background-color:#f0f0f0}
        form{max-width:340px;padding:35px;box-sizing:border-box;margin:0 auto;margin-top:10%;background-color:#fff;border-radius:4px;box-shadow:0 2px 4px rgba(0,0,0,0.08),0 0 2px rgba(0,0,0,0.08)}
        form .input{position:relative;margin-bottom:1em}
        form .input.hidden:after{position:absolute;content:"";width:100%;height:100%;top:0;left:0;background:#fff;opacity:.5;cursor:not-allowed}
        form .input label{display:block;margin-bottom:5px;margin-left:4px;color:#747474;font-weight:400}
        form .input select{-webkit-appearance:none;cursor:pointer;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMi44NzEgMTIuNDUzIj48cGF0aCBkYXRhLW5hbWU9IlBhdGggMTQ4OSIgZD0iTTExLjk1NyAxMi4yMkwyMi42NTEgMS4zMDlhLjc3Ljc3IDAgMCAwLTEuMS0xLjA3N0wxMS40MDUgMTAuNTgzIDEuMzE5LjI5M2EuNzcuNzcgMCAwIDAtMS4xIDEuMDc3bDEwLjYzNiAxMC44NTFhLjc2Ny43NjcgMCAwIDAgLjU1LjIzMS43NzcuNzc3IDAgMCAwIC41NTItLjIzMnoiIGZpbGw9IiM0MzQzNDMiLz48L3N2Zz4=);background-repeat:no-repeat;background-position:right 10px center;background-size:10px;width:100%;border-radius:4px;padding:0 10px;height:35px;line-height:35px;font-size:inherit;font-family:inherit;color:#495057;background-color:#fff;box-sizing:border-box;border:1px solid #ddd}
        form .input select:focus{outline:none}
        form button{box-sizing:border-box;font-family:inherit;font-size:13px;border-radius:4px;padding:10px 15px;border:0;color:#fff;font-weight:500;cursor:pointer;width:100%;background-color:#000;opacity:.2;cursor:not-allowed}
        form button.active{opacity:1;cursor:pointer;background-color:#1ABC9C}
    </style>
</head>
<body>
    <form>
        <div class="input">
            <label>Gazete</label>
            <select name="gazete_id">
                <option>Seçiniz</option>
            </select>
        </div>
        <div class="input hidden">
            <label>Gazeteci</label>
            <select name="gazeteci_id">
                <option>Seçiniz</option>
            </select>
        </div>
        <button type="button">Uygula</button>
    </form>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
    <script>
        NProgress.configure({
            parent: 'form'
        });

        $(function() {
            NProgress.start();
            $.getJSON("?gazeteler", function(json) {
                $.each(json, function(index, row) {
                    $("select[name=gazete_id]").append($("<option>").val(row.gazete_id).text(row.gazete_ad));
                });

                NProgress.done();
            });

            $("select[name=gazete_id]").change(function() {
                NProgress.start();
                $.getJSON("", {gazete_id: $(this).val()}, function(json) {
                    $("select[name=gazeteci_id]").empty().append($("<option>").text("Seçiniz (" + json.length + ")"));
                    $.each(json, function(index, row) {
                        $("select[name=gazeteci_id]").append($("<option>").val(row.gazeteci_id).text(row.gazeteci_ad));
                    });

                    $(".input.hidden").removeClass("hidden");

                    NProgress.done();
                });
            });

            $("select[name=gazeteci_id]").change(function() {
                $("button").toggleClass("active");
            });

            $("form button").click(function(event) {
                event.preventDefault();

                if (!$(this).hasClass("active")) return;

                console.log($("form").serialize());
            });
        });
    </script>
</body>
</html>