如何用AJAX批量更新数据?仅ID=1生效,ID=2无响应求助
问题分析与解决方案
你的问题核心在于重复使用了相同的ID属性——在循环生成的表单里,id_user、id_status和likestatus这些ID被多次渲染到页面上,但HTML规定ID必须是唯一的。所以jQuery的$("#likestatus").click()只会绑定到页面中第一个匹配该ID的按钮上,点击后面的按钮自然不会触发AJAX请求。
下面是具体的修复步骤:
1. 修改HTML/PHP代码:替换ID为类
把重复的ID都改成类,这样可以通过类选择器批量选中元素,同时保留每个元素的data-*属性:
... while($row=mysqli_fetch_array($query)){ echo' <form class="btn-group status-form"> <input type="text" class="form-control id_user" data-user="'.$row['id'].'" value="'.$row['id'].'"> <input type="text" class="form-control id_status" data-status="'.$row['id'].'" value="'.$row['id'].'"> <button type="submit" class="btn btn-primary btn-outline btn-xs likestatus"> <i class="fas fa-thumbs-up"></i> </button> </form> '; }
改动点:
- 给form添加
status-form类,方便后续上下文查找 - 将
id="id_user"改为class="id_user" - 将
id="id_status"改为class="id_status" - 将
id="likestatus"改为class="likestatus"
2. 修改AJAX代码:使用事件委托+上下文查找
因为是动态生成的元素(循环输出的表单),最好用事件委托绑定点击事件,同时通过当前按钮所在的表单上下文,找到对应的输入框,避免全局查找的问题:
$(document).ready(function(){ // 事件委托:绑定到父级(这里用document,也可以用更接近的父容器) $(document).on('click', '.likestatus', function(e){ // 阻止表单默认提交行为,避免页面刷新 e.preventDefault(); // 获取当前按钮所在的表单元素 const $form = $(this).closest('.status-form'); // 从表单内的输入框获取data属性值 const id_user = $form.find('.id_user').data('user'); const id_status = $form.find('.id_status').data('status'); $.ajax({ url: 'status/like-status.php', method: 'POST', data: { id_user: id_user, id_status: id_status }, success: function(response){ alert(response); } }); }); });
关键说明:
- 使用
$(document).on('click', '.likestatus', function(){})代替直接绑定,确保动态生成的按钮也能触发事件 $(this).closest('.status-form')找到当前按钮所属的表单,以此为上下文查找输入框,保证获取的是当前行的对应数据e.preventDefault()阻止表单默认提交,避免AJAX请求还没完成页面就刷新了
这样修改后,每一行的按钮点击都会正确获取当前行的id_user和id_status值,发送对应的AJAX请求,实现批量更新的效果。
内容的提问来源于stack exchange,提问作者Lamberto Fredrick Nababan
相关产品推荐
相关产品推荐

