You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何用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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.27 07:17:52