本文旨在解决在使用 Ajax 处理动态生成的隐藏输入框组时，获取到错误值的问题。通过分析 HTML 结构和 JavaScript 代码，提供两种解决方案：一是确保每个隐藏输入框的 ID 唯一，并使用 jQuery 选择器精确定位；二是将 ID 直接存储在链接的 href 属性中，简化 jQuery 代码，提高代码可读性和维护性。
在使用 Ajax 与 PHP 动态生成的 HTML 交互时，一个常见的问题是在处理一组隐藏输入框时，JavaScript 无法正确获取对应的值。这通常是由于 HTML 结构不合理或 JavaScript 选择器使用不当造成的。以下将介绍两种解决此问题的方法。
方法一：确保ID唯一并精确定位
1. PHP 代码修改：生成唯一的 ID
在 PHP 循环中生成 HTML 时，确保每个隐藏输入框的 id 属性都是唯一的。这可以通过在 id 中添加循环计数器来实现。同时，修改 name 属性，使其成为数组，方便表单提交时收集所有值。
Ban<input type="hidden" class="hidden" id="hidusr-" name="uid[]" value="" />
这段代码会生成如下类似的 HTML：
2. JavaScript 代码修改：使用 jQuery 选择器定位
修改 JavaScript 代码，使用 jQuery 选择器 $(this).next(“input”).val() 来精确定位与点击的 “Ban” 链接相邻的隐藏输入框，并获取其值。$(this) 指的是当前点击的 “Ban” 链接，next(“input”) 选择器找到紧随其后的 input 元素。
$(function() { $(".banusr").click(function(event){ event.preventDefault(); var uid = $(this).next("input").val(); $.ajax({ method: "POST", url: "./ajax/ban.php?post", data: { usr_uid: uid } }); });});
这段代码首先使用 $(“.banusr”).click() 绑定点击事件到所有 class 为 “banusr” 的元素上。当点击事件发生时，event.preventDefault() 阻止链接的默认行为。然后，使用 $(this).next(“input”).val() 获取与当前点击的链接相邻的隐藏输入框的值，并将其赋值给变量 uid。最后，使用 $.ajax() 发送 Ajax 请求，将 uid 作为 usr_uid 参数传递给服务器端的 ./ajax/ban.php 脚本。
方法二：将ID存储在链接的 href 属性中
1. PHP 代码修改：将 ID 放入链接
修改 PHP 代码，直接将用户 ID (auth id) 存储在 “Ban” 链接的 href 属性中。
<a href="" class="banusr btn btn-info btn-link pull-right"> Ban
2. JavaScript 代码修改：简化 jQuery 代码
修改 JavaScript 代码，使用 $(this).attr(“href”) 获取链接的 href 属性值。这样可以避免使用隐藏输入框，简化 HTML 结构和 JavaScript 代码。
$(function() { $(".banusr").click(function(event){ event.preventDefault(); $.ajax({ method: "POST", url: "./ajax/ban.php?post", data: { usr_uid: $(this).attr("href") } }); });});
这段代码与之前的 JavaScript 代码类似，但它直接从点击的链接的 href 属性中获取用户 ID，而不是从隐藏输入框中获取。这使得代码更加简洁易懂。
总结
以上两种方法都可以解决 Ajax 获取隐藏输入框组错误值的问题。第一种方法通过确保 ID 唯一并使用 jQuery 选择器精确定位来解决问题，适用于需要隐藏 ID 的情况。第二种方法将 ID 直接存储在链接的 href 属性中，简化了 HTML 结构和 JavaScript 代码，提高了代码的可读性和维护性。选择哪种方法取决于具体的应用场景和需求。
注意事项：
在使用 Ajax 时，始终要对用户输入进行验证和过滤，以防止安全漏洞，例如跨站脚本攻击 (XSS)。确保服务器端脚本能够正确处理接收到的数据，并返回适当的响应。使用开发者工具（例如 Chrome DevTools）可以帮助你调试 Ajax 请求和响应。始终保持代码的清晰和可维护性，添加适当的注释，并遵循良好的编码规范。
以上就是解决Ajax获取隐藏输入框组错误值的问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1291707.html
微信扫一扫 
支付宝扫一扫 
