jQuery-用jQuery提交ajax请求,点击一次,会出现数次提交为什么?

小组聊天灌水 小组聊天灌水 主题:993 回复:2175

jQuery-用jQuery提交ajax请求,点击一次,会出现数次提交为什么?

夜无邪 发布于 2017-05-02 字数 1362 浏览 1203 回复 7

用jQuery提交ajax请求,点击一次,会出现数次提交,而且每次提交次数还是随机的,大多在3-5次,为什么?
详细:比如我的html表单用jQuery写一个ajax请求,提交到一个PHP程序的接口,比如ajax.test.php,改接口接收到表单数据后有一个数据库写入操作。按常理说,我点击一次提交按钮只促发一次ajax请求,数据库中只会写入一条记录,但是我在测试的时候出现提交一次。数据库写入了3-5条相同的数据,当初为了弄清这个问题还特地对每条记录写入的时间戳进行捕捉,发现写入数据的时间戳完全一样。哪位大师为我解答此疑问?并告诉我解决办法。谢谢

下面是ajax接口的代码:

case 'add_category':
$insertsqlarr['catename'] = $_POST['category_name'];
$insertsqlarr['order'] = $_POST['category_order'];
$insertsqlarr['catedesc'] = $_POST['category_desc'];
$insertsqlarr['addtime'] = TIMESTAMP;//获取全局时间戳
if($insertsqlarr['id'] = inserttable('category', $insertsqlarr, TRUE)){
$insertsqlarr['addtime'] = date('Y-m-d H:i', $insertsqlarr['addtime']);
$ret = array(
'msg' => 'ok',
'data' => $insertsqlarr,
);
write_log($_DCOOKIE['adminname'], '管理员', '添加分类-'.$insertsqlarr['catename']);//写入日志
} else {
$ret = array(
'msg' => 'fail',
'data' => null,
);
}
exit(json_encode($ret));

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(7

泛泛之交 2017-10-24 7 楼

加一个状态验证吧, 如is_post = false; 在触发点击事件后,验证is_post状态。
在ajax的beforSend(){}中将is_post=true,这样可以避免多次触发情况

浮生未歇 2017-09-28 6 楼

是否有可能网络原因导致。曾经做过一个系统,由于客户的网络环境比较复杂,多层路由,客户端一次请求,服务端多次收到。后来在代码中增加了唯一码进行控制才解决。

灵芸 2017-09-28 5 楼
想挽留 2017-08-01 4 楼

我这两天也遇到了这个问题,而且奇怪的是,点击提交按钮之后禁用提交按钮,还是会多次提交。
可能是在按钮被禁用之前已经提交了多次。我的做法是设置一个状态隐藏input域,提交后将input值改掉,提交函数里检查该flag值。这样可以避免重复提交。但是服务器端校验才是王道

浮生未歇 2017-06-28 3 楼

我觉得应该是时间绑定的问题。可能是时间冒泡了。你还需要把触发提交的代码贴出来看看

归属感 2017-05-30 2 楼

检查 这个元素是不是被多次重复绑定 jq的事件绑定是 一个事件链 每执行一次都是向这个链中 加入一个事件项 可以在前端事件绑定之前先对这个事件解绑 比如 unbind('click').click(function(evt){})

瑾兮 2017-05-28 1 楼

解决的方法是指让JS代码执行一次。

function RunOnce(){

    var obj = new Object(); 

obj.triggerOnce = function(fn) { //控制让函数只触发一次
return function() {
try {
fn.apply(this, arguments);
}
catch (e) {
var txt = "There was an error on this page.nn";
txt += "Error message: " + e.message + "nn";
txt += "Error name: " + e.name + "nn";
//alert(txt);//正式平台上可能需要注释掉该行
}
finally {
fn = null;
}
}
}

obj.triggerOnce(你要调用方法);
fn(1);

}