За последние 24 часа нас посетили 22832 программиста и 1210 роботов. Сейчас ищут 777 программистов ...

Вывод выпадающего списка <select> из JSON

Тема в разделе "JavaScript и AJAX", создана пользователем NikaP, 9 окт 2019.

  1. NikaP

    NikaP Новичок

    С нами с:
    9 окт 2019
    Сообщения:
    3
    Симпатии:
    0
    Здравствуйте!
    Прошу помочь с решением следующей задачки.
    Выгружаю из базы столбцы с данными. Столбцы надо упаковать в JSON так: value: цикл значений 1-го и text: цикл значений другого столбца. На странице вывести в выпадающем списке средствами js.
    Есть обработчик
    <?php
    if (isset($_POST['grz'])) {
    $autocl_id = isset($_POST['grz']) ? trim(strip_tags($_POST['grz'])) : null;
    $result = array();
    $sql = mysqli_query($link, "SELECT `client_auto`.`autocl_id`, `client_auto`.`grz`, `client_auto`.`cars_id`,
    `auto_markamodel`.`marka_avto`, `auto_markamodel`.`model_avto`, `client_auto`.`client_id`,
    `clients`.`client_name`
    FROM `client_auto` JOIN `clients` ON `client_auto`.`client_id`=`clients`.`client_id`
    JOIN `auto_markamodel` ON `auto_markamodel`.`cars_id`=`client_auto`.`cars_id`");

    /*while($row = mysqli_fetch_array($sql)) {
    $result = array(
    'grz' => ('<select class="form-control form-control-chosen" id="grz" name="grz"><option value="'.$row['autocl_id'].'">'.$row['grz'].'</option></select>'),
    'cars_id' => '<select class="form-control form-control-chosen" id="grz" name="grz"><option value="'.$row['cars_id'].'">'.$row['marka_avto'].' '.$row['model_avto'].'</option></select>',
    'client_id' => '<option value="'.$row['client_id'].'">'.$row['client_name'].'</option>'
    );*/

    while($row = mysqli_fetch_assoc($sql)) {
    $result[][$row['autocl_id']] = $row['grz'];
    //$result[]['value'] = $row['autocl_id'];
    }
    // Переводим массив в JSON
    echo json_encode($result);
    //echo ($result);
    }
    ?>

    код js:
    function sendAjaxForm(result_form, formauto, url) {
    $.ajax({
    url: url, //url страницы (action_ajax_form.php)
    type: "POST", //метод отправки
    dataType: "html", //формат данных
    data: $("#"+formauto).serialize(), // Сеарилизуем объект
    success: function(response) { //Данные отправлены успешно
    console.log(response);
    result = $.parseJSON(response);

    var data = [result];
    $.each(data, function (key, value) {
    alert(`${key}: ${value}`);
    $('#client_id').append('<option value="' + value + '">' + value + '</option>');

    },
    error: function(response) { // Данные не отправлены
    $('#client_id').html('Ошибка. Данные не отправлены.');
    }
    });
    }

    Не знаю, правильно ли упаковал в массив. выглядит так: [{"1":"\u043d649\u043c\u044040"},{"5":"\u043d556\u0441\u043e32"},{"4":"\u043f677\u0440\u043e32"},{"6":"\u043f787\u043d\u043532"},{"7":"\u0435354\u0442\u043532"},{"8":"\u0430999\u0432\u044132"},{"9":"\u043d505\u043e\u0443199"}]

    А в списке выдает <option value="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]">[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]</option>

    Думается, что массив должен выглядить так (к примеру). И это только для одного выпадающего списка. А если их много??
    [
    {
    "value": 0,
    "text": "Не выбран"
    },
    {
    "value": 1,
    "text": "A1"
    },
    {
    "value": 2,
    "text": "A2"
    }
    ]

    В общем, выводить списки из JSON не получается. просьба помочь.
     
  2. kazadai90

    kazadai90 Активный пользователь

    С нами с:
    6 фев 2013
    Сообщения:
    103
    Симпатии:
    19
    вот тут
    Код (Text):
    1. function sendAjaxForm(result_form, formauto, url) {
    2. $.ajax({
    3. url: url, //url страницы (action_ajax_form.php)
    4. type: "POST", //метод отправки
    5. //dataType: "html", //формат данных
    6. dataType: "json"
     
  3. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.266
    Симпатии:
    405
    PHP:
    1. <?php
    2. if ( isset($_POST['grz']) )
    3. {
    4. $autocl_id = isset($_POST['grz']) ? trim(strip_tags($_POST['grz'])) : null;
    5. $grz = '';
    6. $cars_id = '';
    7. $client_id = '';
    8. $sql = mysqli_query($link, "SELECT `client_auto`.`autocl_id`, `client_auto`.`grz`, `client_auto`.`cars_id`,
    9. `auto_markamodel`.`marka_avto`, `auto_markamodel`.`model_avto`, `client_auto`.`client_id`,
    10. `clients`.`client_name`
    11. FROM `client_auto` JOIN `clients` ON `client_auto`.`client_id`=`clients`.`client_id`
    12. JOIN `auto_markamodel` ON `auto_markamodel`.`cars_id`=`client_auto`.`cars_id`");
    13.  
    14. while($row = mysqli_fetch_array($sql)) {
    15.     $grz .= "<option value='{$row['autocl_id']}'>{$row['grz']}</option>";
    16.     $cars_id .= "<option value='{$row['cars_id']}'>{$row['marka_avto']}</option>";
    17.     $client_id .= "<option value='{$row['client_id']}'>{$row['client_name']}</option>";
    18. );
    19. $result [
    20.     'grz' => $grz,
    21.     'cars_id' => $cars_id,
    22.     'client_id' => $client_id
    23. ]
    24. echo json_encode($result);
    25. }
    26.  
    27. ?>
    Код (Javascript):
    1. <select class="form-control form-control-chosen" id="grz" name="grz"></select>
    2. <select class="form-control form-control-chosen" id="cars_id" name="cars_id"></select>
    3. <select class="form-control form-control-chosen" id="client_id" name="client_id"></select>
    4. <script>
    5. function sendAjaxForm(result_form, formauto, url)
    6. {
    7.     $.post( "action_ajax_form.php", $("#"+formauto).serialize(), function( data )
    8.     {
    9.         console.log( data );
    10.         $("#grz").html( data.grz );
    11.         $("#cars_id").html( data.cars_id );
    12.         $("#client_id").html( data.client_id );
    13.      
    14.     }, "json");
    15. }
    16. </script>
     
  4. kazadai90

    kazadai90 Активный пользователь

    С нами с:
    6 фев 2013
    Сообщения:
    103
    Симпатии:
    19
    не стоит гонять лишние данные по сети, строя html на стороне сервера. (это увеличивает размеры данных, тормозя скорость)
    json массива хватит. нужно просто распарсить его
     
  5. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.266
    Симпатии:
    405
    @kazadai90 всегда стараюсь генерировать html на сервере.

    Зачем генерировать HTML в PHP:
    • JavaScript должен определять поведение, а не контент.
    • Создание в JavaScript требует большей разметки (многострочные строки не так просты, как в PHP).
    • Сложнее поддерживать, если ваш HTML генерируется в нескольких местах (PHP и JS).
    • Вы можете использовать функции манипуляции jQuery DOM для создания своего HTML-кода, но в долгосрочной перспективе вы стреляете в ногу.
    • Быстрее создавать HTML на сервере, чем в браузере (в вычислительном смысле).
    • Ликвидация проще с PHP – легко создавать табличную разметку.
    • Вы сохраняете какую-то боевую готовность, если пользователь отключил JavaScript, если вы выставляете разметку при загрузке страницы.
    Зачем генерировать HTML-код в jQuery:
    • Вы сохранили бы некоторую пропускную способность.
    • События привязки могут быть проще.
     
  6. kazadai90

    kazadai90 Активный пользователь

    С нами с:
    6 фев 2013
    Сообщения:
    103
    Симпатии:
    19
    если у вас монолит и jquery на клиенте возможно. если не монолит, и есть клиенты помимо браузера (например мобилка), то лучше отдавать только данные. а клиенты будут строить интерфейс сами.
     
  7. NikaP

    NikaP Новичок

    С нами с:
    9 окт 2019
    Сообщения:
    3
    Симпатии:
    0
    При замене dataType скрипт не работает. В чем может быть ошибка?
     
  8. kazadai90

    kazadai90 Активный пользователь

    С нами с:
    6 фев 2013
    Сообщения:
    103
    Симпатии:
    19
    запятые проверьте, в консоли браузера обычно все написано
     
  9. NikaP

    NikaP Новичок

    С нами с:
    9 окт 2019
    Сообщения:
    3
    Симпатии:
    0
    Люди, кто разбирается в JS? Помогите с кодом. Не идет. Запятые на месте. Ошибки в коде. Не получается распарсить JSON. Может быть массив кривой?
    Код (Javascript):
    1. $(document).ready(function() {
    2.     $("#btnSearch").click(function(){ //надо проверить выбрано ли значение из списка
    3.       if( $("#grz option:selected").val() !== "no_action" ){
    4.         sendAjaxForm('result_form', 'formauto', 'action_ajax_form2.php');
    5.         //$('#modal-input-on-parking').modal('show');
    6.       }
    7.       return false;
    8.     });
    9. });
    10.  
    11.  
    12.  
    13.  
    14. function sendAjaxForm(result_form, formauto, url) {
    15.     $.ajax({
    16.         url:     url, //url страницы (action_ajax_form.php)
    17.         type:     "POST", //метод отправки
    18.         dataType: "JSON", //формат данных
    19.         data: $("#"+formauto).serialize(),  // Сеарилизуем объект
    20.         success: function(response) { //Данные отправлены успешно
    21.           result = $.getJSON(response);
    22.            //result = $.parceJSON(response);
    23.            console.log(result);
    24.           var data = [result];
    25.           $.each(data, function (key, value) {
    26.             $('#client_id').append('<option value="' + key.name + '">' + value.grz + '</option>');
    27.           });
    28.  
    29.         },
    30.         error: function(response) { // Данные не отправлены
    31.             $('#client_id').html('Ошибка. Данные не отправлены.');
    32.         }
    33.      });
    34. }
    PHP:
    1. if (isset($_POST['grz'])) {
    2.   $autocl_id = isset($_POST['grz']) ? trim(strip_tags($_POST['grz'])) : null;
    3.   $result = array();
    4.   $sql = mysqli_query($link, "SELECT `client_auto`.`autocl_id`, `client_auto`.`grz`, `client_auto`.`cars_id`,
    5.    `auto_markamodel`.`marka_avto`, `auto_markamodel`.`model_avto`, `client_auto`.`client_id`,
    6.    `clients`.`client_name`
    7.    FROM `client_auto` JOIN `clients` ON `client_auto`.`client_id`=`clients`.`client_id`
    8.    JOIN `auto_markamodel` ON `auto_markamodel`.`cars_id`=`client_auto`.`cars_id`");
    9.  
    10.     while($row = mysqli_fetch_assoc($sql)) {
    11.       $result['name'][] = $row['grz'];
    12.       //$result[]['value'] = $row['autocl_id'];
    13.     }
    14.     // Переводим массив в JSON
    15.     echo json_encode($result);
    16.     //echo ($result);
    17. }