解决Ajax获取隐藏输入框组错误值的问题-php教程-PHP中文网

解决ajax获取隐藏输入框组错误值的问题

本文旨在解决在使用 Ajax 处理动态生成的隐藏输入框组时，获取到错误值的问题。通过分析 HTML 结构和 JavaScript 代码，提供两种解决方案：一是确保每个隐藏输入框的 ID 唯一，并使用 jQuery 选择器精确定位；二是将 ID 直接存储在链接的 href 属性中，简化 jQuery 代码，提高代码可读性和维护性。

在使用 Ajax 与 PHP 动态生成的 HTML 交互时，一个常见的问题是在处理一组隐藏输入框时，JavaScript 无法正确获取对应的值。这通常是由于 HTML 结构不合理或 JavaScript 选择器使用不当造成的。以下将介绍两种解决此问题的方法。

方法一：确保ID唯一并精确定位

1. PHP 代码修改：生成唯一的 ID

在 PHP 循环中生成 HTML 时，确保每个隐藏输入框的 id 属性都是唯一的。这可以通过在 id 中添加循环计数器来实现。同时，修改 name 属性，使其成为数组，方便表单提交时收集所有值。

<?php $i = 1;
foreach ($comments as $comment) {
?><a href="javascript:void(0);" class="banusr btn btn-info btn-link pull-right">
  <i class="fa fa-ban"></i> Ban
</a>
<input type="hidden" class="hidden" id="hidusr-<?php echo $i; ?>" name="uid[]" value="<?php echo trim(htmlspecialchars($comment['idauth'])) ?>"><p><?php echo htmlspecialchars($comment['text']); ?></p>
<?php $i++;
}
?>

这段代码会生成如下类似的 HTML：

<a href="javascript:void(0);" class="banusr btn btn-info btn-link pull-right">
  <i class="fa fa-ban"></i> Ban
</a>
<input type="hidden" class="hidden" id="hidusr-1" name="uid[]" value="2"><a href="javascript:void(0);" class="banusr btn btn-info btn-link pull-right">
  <i class="fa fa-ban"></i> Ban
</a>
<input type="hidden" class="hidden" id="hidusr-2" name="uid[]" value="9">

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 脚本。

jQuery金融借款单提交表单

jQuery金融借款单提交表单，包含出借金额和日期的选择，且自动计算利息，非常的简单方便。

下载

方法二：将ID存储在链接的 href 属性中

1. PHP 代码修改：将 ID 放入链接

修改 PHP 代码，直接将用户 ID (auth id) 存储在 "Ban" 链接的 href 属性中。

<?php foreach ($comments as $comment) {
?><a href="<?php%20echo%20trim(htmlspecialchars(%24comment['idauth']))%20?>" class="banusr btn btn-info btn-link pull-right">
  <i class="fa fa-ban"></i> Ban
</a>
<p><?php echo htmlspecialchars($comment['text']); ?></p>
<?php }
?>

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 代码，提高了代码的可读性和维护性。选择哪种方法取决于具体的应用场景和需求。

注意事项：