V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
proxytoworld
V2EX  ›  问与答

Ajax 异步删除资源,多次请求问题

  •  
  •   proxytoworld · 2021-01-26 14:50:32 +08:00 · 762 次点击
    这是一个创建于 1389 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我在用 Laravel 框架构建 web 应用,在使用 Ajax 异步删除资源的时候,前端发送的 delete 请求一次比一次多一个

    这是我的 Ajax 代码

    function del(){
            $('#del').click(function (){
                $.ajax({
                    type: "DELETE",
                    url: '/api/apiposts/{{$id}}',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success:function (result){
                        console.log("success:" + result);
                        
                        //location.reload();
                    },
                    error:function (result){
                        console.log("error:" + result);
                    }
                })
            });
        }
        
        <input type="button" value="删除" id="del" onclick="del()">
        
    

    第一次点 button 的时候没有请求,这是 burp 抓到的包

    7 条回复    2021-01-26 21:43:17 +08:00
    akaxiaok339
        1
    akaxiaok339  
       2021-01-26 14:57:17 +08:00
    第一次点击的时候是绑定事件 之后每次点击又再绑定一次事件 并且触发之前的事件 当然越来越多
    akaxiaok339
        2
    akaxiaok339  
       2021-01-26 14:58:40 +08:00
    $('#del').click / onclick 二选一就行
    gtchan13579
        3
    gtchan13579  
       2021-01-26 15:04:00 +08:00
    function del(){

    $.ajax({
    type: "DELETE",
    url: '/api/apiposts/{{$id}}',
    headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    success:function (result){
    console.log("success:" + result);

    //location.reload();
    },
    error:function (result){
    console.log("error:" + result);
    }
    })

    }

    <input type="button" value="删除" id="del" onclick="del()">
    qiayue
        4
    qiayue  
       2021-01-26 15:16:03 +08:00
    $('#del').click 这一行的意思就是每次点击 #del 时执行内部匿名函数
    就不要再在元素上写 onclick 了。
    kop1989
        5
    kop1989  
       2021-01-26 15:25:03 +08:00
    现在你的程序的语义是:
    触发点击事件 && 每次点击都往 id 为 del 的 dom 元素上添加一个 click 事件。

    所以第一次点击没反应,然后越点越多。
    wenzichel
        6
    wenzichel  
       2021-01-26 15:50:17 +08:00
    onclick 和 del 中的 click 冲突了,每执行一次 del,就多绑定一次 click 事件,然后就多执行一次 ajax 请求
    proxytoworld
        7
    proxytoworld  
    OP
       2021-01-26 21:43:17 +08:00
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2692 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 12:26 · PVG 20:26 · LAX 04:26 · JFK 07:26
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.