未分類
5 2 月 2021

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

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

資深大佬 : proxytoworld 7

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

这是我的 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 抓到的包

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

大佬有話說 (7)

  • 資深大佬 : akaxiaok339

    第一次点击的时候是绑定事件 之后每次点击又再绑定一次事件 并且触发之前的事件 当然越来越多

  • 資深大佬 : akaxiaok339

    $(‘#del’).click / onclick 二选一就行

  • 資深大佬 : gtchan13579

    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

    $(‘#del’).click 这一行的意思就是每次点击 #del 时执行内部匿名函数
    就不要再在元素上写 onclick 了。

  • 資深大佬 : kop1989

    现在你的程序的语义是：
    触发点击事件 && 每次点击都往 id 为 del 的 dom 元素上添加一个 click 事件。

    所以第一次点击没反应，然后越点越多。

  • 資深大佬 : wenzichel

    onclick 和 del 中的 click 冲突了，每执行一次 del，就多绑定一次 click 事件，然后就多执行一次 ajax 请求

  • 主 資深大佬 : proxytoworld

    @wenzichel
    @kop1989
    @qiayue
    @gtchan13579
    @akaxiaok339
    @akaxiaok339 搞懂了！谢谢