AJAX删除条目功能失效，URL自动添加#且页面上移问题排查

我帮你梳理下代码里的问题，这几个小错误直接导致了功能失效：

1. AJAX请求的data参数存在语法错误 #

你原代码里的这一行：

data:'id='+id+, '&user_id'+user_id,

有两处明显的语法问题：

• 多了一个多余的+符号（id+,这里的逗号前多了加号）
• &user_id后面缺少赋值符号=，无法正确传递参数值

修正后的data参数可以改成字符串拼接的正确形式：

data: 'id=' + id + '&user_id=' + user_id,

更推荐用对象形式传递参数，能彻底避免字符串拼接的语法错误：

data: {
    id: id,
    user_id: user_id
},

2. 语法错误导致return false未执行 #

因为data参数的语法错误，函数执行到这一行时会直接抛出异常，后续的return false;代码根本不会被执行。这就导致了链接的默认行为（跳转到页面锚点#，页面上移）被触发，而AJAX请求根本没发出去。

当你添加alert时，alert在语法错误代码之前，所以能正常显示值，但此时AJAX请求依然没有执行；只是alert的弹窗会暂停代码执行，可能让你误以为功能正常，但核心问题还是语法错误导致函数中断。

修正后的完整代码示例 #

方案一：修复原内联函数写法 #

<script>
function removeExistingBranch(id, user_id) {
    $.ajax({
        method: "POST",
        url: "<?php echo site_url($this->data['controller'].'/RemoveUserBranch/'); ?>",
        data: {
            id: id,
            user_id: user_id
        },
        beforeSend: function () {
            $('.loading').show();
        },
        success: function(data){
            // 如果你需要刷新分支容器，取消下面这行注释
            // $("#existing_branch_container").load("<?php echo site_url($this->data['controller']);?>/LoadUserBranches");
            $('.loading').fadeOut("slow");
        },
        // 新增错误处理，方便调试
        error: function(xhr, status, error) {
            console.log("AJAX请求错误：" + error);
            $('.loading').fadeOut("slow");
        }
    });
    return false;
}
</script>

<a href="#" onclick="return removeExistingBranch(<?php echo $data['user_branches_id'];?>,<?php echo $user['user_accounts_id'];?>)">Remove</a>

方案二：更优雅的jQuery事件绑定（推荐） #

避免内联onclick，用事件绑定的方式更易维护，也能更可靠地阻止默认行为：

<a href="#" class="remove-branch" 
   data-id="<?php echo $data['user_branches_id'];?>" 
   data-user-id="<?php echo $user['user_accounts_id'];?>">
    Remove
</a>

<script>
$(document).on('click', '.remove-branch', function(e) {
    // 直接阻止链接默认行为，不用依赖return false
    e.preventDefault();
    
    var id = $(this).data('id');
    var user_id = $(this).data('user-id');
    
    $.ajax({
        method: "POST",
        url: "<?php echo site_url($this->data['controller'].'/RemoveUserBranch/'); ?>",
        data: {
            id: id,
            user_id: user_id
        },
        beforeSend: function () {
            $('.loading').show();
        },
        success: function(data){
            $("#existing_branch_container").load("<?php echo site_url($this->data['controller']);?>/LoadUserBranches");
            $('.loading').fadeOut("slow");
        },
        error: function(xhr, status, error) {
            console.log("AJAX请求错误：" + error);
            $('.loading').fadeOut("slow");
        }
    });
});
</script>

额外提示 #

• 可以打开浏览器的开发者工具（F12），切换到「控制台」标签，查看是否有JS语法错误，这是排查这类问题的常用方法。
• 用对象形式传递data参数，不仅能避免字符串拼接的语法错误，还能自动处理参数的编码问题。

内容的提问来源于stack exchange，提问作者JianYA