JQUERY & 选择框不更新数据库

Question

我有以下 3 个从 php 数据库填充的复选框。我需要 JQUERY 的帮助，一旦任何选择框被更改，值就会被发布到一个 php 文件并能够通过 JQUERY 返回响应。

每个选择框应该是独立的，仅将复选框值和名称发送到 PHP 文件。

我有下面的 JQUERY 开始发送第一个复选框，但没有得到回复。

需要对JQUERY做哪些修改才能接收其他checkbox的输入然后正确发送数据？

php 文件将使用 if 语句简单地回显“响应是什么”。

感谢任何帮助。

$(document).ready(function() {
  $('select.person-1').change(function() {
    $.ajax({
        type: 'POST',
        url: 'lib/positionMarshalProcess.php',
        data: {
          selectFieldValue: $('select.person-1').val(),
          changeCol1: $('input[name$="changeCol1"]').val()
        },
        dataType: "html",
      },
      success: function(data) {
        var a = data.split('|***|');
        if (a[1] == "update") {
          $('#msg').html(a[0]);
        }
      }
    });
    return false;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name='person-1' class='marshal-select'>
<option value='1'>John Smith</option>
</select>
<input type='hidden' name='changeCol1' value='person-1'>

<select name='qty' class='marshal-select'>
<option value='1'>1</option>
</select>
<input type='hidden' name='changeCol2' value='qty'>

<select name='person-2' class='marshal-select'>
<option value='1'>John Smith</option>
</select>
<input type='hidden' name='changeCol3' value='person-2'>

Answer 1

您使用的选择器对于显示的 HTML 不正确。 .person-1 是一个 class 选择器，但 select 元素在其 name 中具有该值。

此外，您的 success 属性在 $.ajax 调用的选项对象之外 - 它必须在里面。

您可以通过删除隐藏字段、将change 事件处理程序挂钩到所有select 元素上的公共marshal-select 类以及使用select 元素的 name 属性填充您在 AJAX 请求中发送的数据的 changeCol 属性。试试这个：

$(document).ready(function() {
  $('select.marshal-select').change(function() {
    let $select = $(this);

    // in your AJAX request...
    let data = {
      selectFieldValue: $select.val(),
      changeCol: $select.prop('name')
    };

    console.log(data);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="person-1" class="marshal-select">
  <option value="1">John Smith</option>
  <option value="2">Jane Doe</option>
</select>

<select name="qty" class="marshal-select">
  <option value="1">1</option>
  <option value="2">2</option>
</select>

<select name="person-2" class="marshal-select">
  <option value="1">John Smith</option>
  <option value="2">Jane Doe</option>
</select>

顺便说一句，success 处理程序中的逻辑意味着您要返回纯文本，然后使用split() 破解字符串。不要这样做。返回一个序列化的数据结构，例如 JSON。这更具可扩展性，并使代码更加健壮。

---

更新：

使用您添加的代码，您可以添加一个编辑，理想情况下您将如何收到响应我想要一个积极的响应来显示 msg div 以及您将在哪里调用 php 文件？

没问题，给你：

$(document).ready(function() {
  $('select.marshal-select').change(function() {
    let $select = $(this);
    
    $.ajax({
      type: 'POST',
      url: 'lib/positionMarshalProcess.php',
      data: {
        selectFieldValue: $select.val(),
        changeCol: $select.prop('name')
      },
      dataType: "html",
      success: function(data) {
        // assuming a JSON response:
        if (data[1] === 'update') {
          $('#msg').html(data[0]).show();
        }
      }
    });
  });
});

请注意，我没有包含会生成 JSON 响应的 PHP，因为我不是 PHP 开发人员。如果你搜索的话，我敢肯定有很多主题涵盖了这一点。