Блог

Главная - Вопросы по программированию - выпадающий список, зависящий от php, не заполняется

выпадающий список, зависящий от php, не заполняется

#php #json #ajax #dropdown

#php #json #ajax #выпадающий список

Вопрос:

Я пытаюсь заполнить выпадающий список, в зависимости от того, какой округ был выбран, второй выпадающий список должен быть заполнен провинциями выбранного округа.

Я не понимаю, почему второй выпадающий список не заполняется. Я получаю ответ JSON в консоли, поэтому PHP указан правильно. Я уверен, что это что-то глупое, но я просто не могу этого увидеть. Заранее спасибо.

index.php страница

 <?php
    include "config.php";
?>
<!doctype html>
<html>
    <head>
        <title>dropdown</title>
        <link href="style.css" rel="stylesheet" type="text/css">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="jquery-1.12.0.min.js" type="text/javascript"></script>

        <script type="text/javascript">
            $( document ).ready( function () {

                $( "#country" ).change( function () {
                var countryid = $( this ).val();

                    $.ajax( {
                        url: 'getUsers.php',
                        type: 'POST',
                        data: {
                            countryid: countryid
                        },
                        dataType: 'json',
                        success: function ( response ) {

                            var len = response.length;

                            $( "#province" ).empty();
                            for ( var i = 0; i < len; i   ) {
                                var id = response[ i ][ 'provinceid' ];
                                var name = response[ i ][ 'provincename' ];

                                $( "#province" ).append( "<option value='"   id   "'>"   name   "</option>" );

                            }
                        }
                    } );
                } );

            } );
        </script>
    </head>
    <body>


        <div>Country</div>
        <select id="country">
            <option value="0">- Select -</option>
            <?php 
                // Fetch Country
                $stmt = $conn->prepare('SELECT * FROM countries');
                $stmt->execute();

                while($countries = $stmt->fetch()) {

                $countryid = $countries['id'];
                $countryname_en = $countries['countryname_en'];

                // Option
                echo "<option value='".$countryid."' >".$countryname_en."</option>";
                }


            ?>
        </select>
        <div class="clear"></div>

        <div>Province</div>
        <select id="province">
            <option value="0">- Select -</option>
        </select>
    </body>
</html>

PHP

 <?php

    include "config.php";

    var_dump($_POST);
    $countryid = $_POST['countryid'];

    $countryid = "CA";

    $stmt = $conn->prepare('SELECT * FROM provincestates WHERE countryid = :countryid');
    $stmt->execute(array(
        ':countryid' => $countryid
    ));

    /*
    echo "<pre>";
    echo "prov is:" . $province_array = array();
    echo "</pre>";
    */


    while ($province = $stmt->fetch(PDO::FETCH_ASSOC)) {
        $provinceid   = $province['provincestatecode'];
        $provincename = $province['provincestatename_en'];

        $province_array[] = array(
            "provinceid"    => $provinceid,
            "provincename"  => $provincename
        );
    }

    echo json_encode($province_array);

Комментарии:

1. Что console.log(response) возвращает ваша функция успеха?

2. Как только вы сможете получить ответ с надлежащей структурой данных, вот рабочий пример. jsfiddle.net/hadxLser

3. консоль сообщает, что полезная нагрузка равна: XHRPOSThttps://dev-roe-vti.org/idashboard/ajax/getUsers.php [HTTP / 1.1 200 OK 32 мс] Полезная нагрузка предварительного просмотра ответа 1 массив (1) { 2 [«countryid»] => 3 строка (2) «CA» 4 } 5 [{«provinceid»: «AB», «provincename»: «Alberta»},{«provinceid»: «BC», «provincename»: «Британская Колумбия»}, {«provinceid»: «MB», «provincename»: «Manitoba»},{«provinceid»: «NB» ,»provincename»: «Нью-Брансуик»},{«provinceid»: «NL», «provincename»: «Ньюфаундленд и Лабрадор»},{«provinceid»: «NS», «provincename»: «Новая Шотландия»},]

Ответ №1:

Я не слишком хорошо знаком с jQuery, но, похоже, вам нужно проанализировать ответ, используя JSON.parse (или собственный метод jQuery? ) и тогда вы должны иметь возможность нормально обращаться к данным. Следующее может указать вам правильное направление, а может и нет, поскольку оно не протестировано…

 <script>
    $( document ).ready( function () {

        $( "#country" ).change( function () {
            var countryid = $( this ).val();

            $.ajax( {
                url: 'getUsers.php',
                type: 'POST',
                data: {
                    countryid: countryid
                },
                dataType: 'json',
                success: function ( response ) {
                    var json=JSON.parse( response ); /* PARSE the data */
                    $( "#province" ).empty();

                    for( var i in json ){/* access using object notation */
                        var obj=json[ i ];
                        var id=obj.provinceid;
                        var name=obj.provincename;

                        $( "#province" ).append( new Option(id,name) );
                    }
                }
            });
        });
    });
</script>

Комментарии:

1. Привет, RamRaider, спасибо за быстрый ответ, но выпадающий список по-прежнему не заполняется, и он выглядит как точно такая же полезная нагрузка, которую я получал раньше, но я узнал кое-что новое, так что спасибо.

2. Ему это не нужно, JSON.parse он разбирает это автоматически. dataType: 'json'

3. @EternalHour — спасибо за разъяснение. Как я уже упоминал, я не знаю jQuery, но, возможно, должен был знать (имел подозрения), что jQuery был умнее вашего среднего медведя, и это было бы учтено. Я кое-что там узнал, так что спасибо.

4. Как и вы, я просто здесь, чтобы помочь.

Ответ №2:

Я, наконец, понял это:

По-видимому, JSON.parse устарел, и мне пришлось изменить его с var json=JSON.parse(response); на просто var response = ответ

Спасибо за всю вашу помощь!