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

时间:2019-03-14 11:12:21

标签: jquery ajax

我想根据使用jQuery + PHP / MySQL从一个选择字段中选择的值来设置几个表单元素的值。

select字段将调用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调用传回多个值所需的数组。

如何在一次通话中更改多个选择字段?

1 个答案:

答案 0 :(得分: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上的公共类,以使选择器更简单,更易于重用。