JQUERY & 选择框不更新数据库

Posted 2023-05-09

【中文标题】JQUERY & 选择框不更新数据库

【英文标题】：JQUERY & Select box not updating database

【发布时间】：2021-07-21 20:21:15

【问题描述】：

我有以下 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'>

【问题讨论】：

HTML 示例中没有 select.person-1 或 input[name$="changeCol1"] 元素。在 $.ajax 调用中也有语法错误，因为您已将 success 放在设置对象之外。检查 devtools 中的控制台以调试该错误。

嗨，罗里，谢谢你。您能否澄清 select.person-1 的意思 - 选择名称是 person-1 ？但是我很想学习如何将任意 3 个选择框发布到 JQUERY 而不仅仅是 person-1。

.person-1 是类选择器，而不是名称选择器。我在下面为您添加了答案。

嗨罗里 - 谢谢你。我不知道在哪里放置代码以及添加什么以物理推送到 php 文件，您能帮我添加这些行吗？

您好，Rory，感谢您的帮助。能否请您协助我完成发布 PHP 行 ID 的最后一步。我认为这可能必须在一个隐藏的领域。本质上，我正在遍历一个名为“位置”的表并放置所有正确发送的选择框，但选择框的输出需要在数据库的 [positionNo] 中更新。我尝试了一个隐藏字段，但这只会发布第 1 行的 ID，并且不会继续向下。

【参考方案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 开发人员。如果你搜索的话，我敢肯定有很多主题涵盖了这一点。

【讨论】：

Rory，非常感谢你，这是一种享受。我遇到的一个错误是这些下拉框正在作为 while 循环运行，因此我还需要发送行 ID。我可以为 positionNo 使用一个隐藏字段，并设法通过它发送它，但它总是只发送第一行的值。你能帮忙吗？