如何将多个值传递回jQuery AJAX处理程序？

Question

我想设置一些表单元素的值，这取决于使用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 change命令放到JS中，但我无法检索到从ajax调用传回多个值所需的数组。

如何在一次调用中更改多个选择字段？

Answer 1

从AJAX请求返回的data是一个字符串。您不能像您所期望的那样，在PHP代码中使用JS逻辑填充它，并在AJAX请求完成时在客户端执行它。

要做到这一点，我建议从PHP代码中返回一个JSON编码的对象。此对象中的键/值对是您希望更新的选择的id和值。

最后，请注意，您不应该使用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上的公共类，以使选择器更简单，更易于重用。