Как передать несколько значений обратно в обработчик jQuery AJAX?

#jquery #ajax

#jquery #ajax

Вопрос:

Я хочу задать значение паре элементов формы в зависимости от значения, выбранного из одного поля выбора с помощью jQuery PHP / MySQL.

Поле выбора вызовет функцию jQuery:

 <select name="attr[8]" id="attr[8]"" onchange="set_watch_attr();">
  <option value="">auswählen</option>
  <option value="132185">116244</option>
</select>
  

Затем он должен установить значения других полей выбора на основе результата запроса PHP / MySQL:

 function set_watch_attr() {
  $.ajax({
    type: 'POST',
    url: 'set_watch_attr.php',
    data: 'ref='   $("#attr[8]").val(),
    success: function(data) {
      data
    }      
  });       
}
  

Поле PHP получает значения для этого конкретного параметра:

 // set_watch_attr.php
<?php
  // process data and get default values

  // output to form
  $output = '
    $('#attr\[5\]').val(157).change();
    $('#attr\[6\]').val(12).change();
  ';
  echo $output;
?>
  

Почему-то это неправильно, поскольку вывод не имеет никакого эффекта. Я также пытался сделать это наоборот и поместить команды изменения jquery в JS, но я не смог получить массив, который необходим для передачи нескольких значений обратно из вызова ajax.

Как я могу изменить несколько полей выбора при одном вызове?

Ответ №1:

data Возвращаемый из запроса AJAX является строкой. Вы не можете просто заполнить его JS-логикой в своем PHP-коде и выполнить его на стороне клиента, когда запрос AJAX завершится, как вы, кажется, ожидаете.

Чтобы это сработало, я бы предложил вместо этого возвращать объект из вашего PHP-кода в кодировке JSON. Пары ключ / значение в этом объекте являются идентификатором и значением выбранных элементов, которые вы хотите обновить.

Наконец, обратите внимание, что вы не должны использовать on* атрибуты события. Они очень устарели, и их следует избегать, где это возможно. Вместо этого используйте ненавязчивые обработчики событий. Поскольку вы уже используете jQuery, вы можете достичь всего этого с помощью следующей логики:

 <select name="attr[8]" id="attr[8]" class="set-watch">
  <option value="">auswählen</option>
  <option value="132185">116244</option>
</select>
  
 <?php
  $arr = array('#attr\[5\]'=>157,'#attr\[6]'=>12);    
  echo json_encode($arr);
?>
  
 $('.set-watch').change(function() {
  $.ajax({
    type: 'POST',
    url: 'set_watch_attr.php',
    data: { 
      ref: $(this).val() 
    },
    success: function(obj) {
      Object.keys(obj || {}).forEach(function(k) {
        $(k).val(obj[k]).change();
      }
    }      
  });         
}
  

Также обратите внимание на общий класс, размещенный на select , чтобы упростить селектор и упростить его повторное использование.

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

1. Интересный подход. Я пытался реализовать, в коде jQuery отсутствуют 2 блокировки, я добавил их, но он не будет циклически перебирать массив. Вместо этого он циклически перебирает строку. alert(obj[k]); выведет 37 изменений, начинающихся с «#», за которыми следует «a» и так далее. оповещение (k); выдаст 37 предупреждений с 1-37. оповещение (obj); выведет: «{«#attr[5]»:157,»# attr[6]»:12}»

2. @merlin Попробуйте использовать JSON.parse для objs перед циклом 🙂

3. Я думал, что где-то должен быть какой-то json_decode 🙂 Спасибо, работает!