我在用 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 抓到的包
1
akaxiaok339 2021-01-26 14:57:17 +08:00
第一次点击的时候是绑定事件 之后每次点击又再绑定一次事件 并且触发之前的事件 当然越来越多
|
2
akaxiaok339 2021-01-26 14:58:40 +08:00
$('#del').click / onclick 二选一就行
|
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()"> |
4
qiayue 2021-01-26 15:16:03 +08:00
$('#del').click 这一行的意思就是每次点击 #del 时执行内部匿名函数
就不要再在元素上写 onclick 了。 |
5
kop1989 2021-01-26 15:25:03 +08:00
现在你的程序的语义是:
触发点击事件 && 每次点击都往 id 为 del 的 dom 元素上添加一个 click 事件。 所以第一次点击没反应,然后越点越多。 |
6
wenzichel 2021-01-26 15:50:17 +08:00
onclick 和 del 中的 click 冲突了,每执行一次 del,就多绑定一次 click 事件,然后就多执行一次 ajax 请求
|
7
proxytoworld OP |