ajax避免频繁提交,避免重复提交

时间 : 15-01-07 栏目 : js, WEB前端 作者 : 虫哥 评论 : 2 点击 : 2,031 次

在使用ajax提交表单时,我们经常需要在前端限制操作频率,目的有:减少服务器请求、避免频繁操作、避免表单重复提交等。以下列举几点我们在开发中经常遇到的情况:

情况一:ajax频繁提交

在什么时候,会出现ajax频繁提交呢?比如一个商城,在添加到购物车的时候,用户不断的点击“加入购物车”,或者用户在购物车页面里更新物品数量时,不断的点击+或-,如:1,这种情况下,如果点击一次就提交一下ajax,那就会导致页面有延迟及卡屯现象,多用户多操作的过多提交服务器,也有可能会失失请求。虫哥方案是,前端JS设置一个时间区域,在用户不断点击的时候,重置这个时间。然后检测到用户一旦停止点击了,再提交。代码:

<script type="text/javascript">
//加减商品数量(加或减时调用)
function cartSave( goodsId, nums, flag, donow){
if( donow==undefined) donow="";
if( donow){
cartSaving( goodsId, nums, flag);
}else{//重置延时动作
try{clearTimeout(doUpdateCartTrigger)}catch(e){}
doUpdateCartTrigger = setTimeout("cartSaving('"+goodsId+"',"+nums+",'"+flag+"')",500);
}
}

//更新购物数量
function cartSaving( id, type, nums, flag, view){
if( view==undefined) view = 0;
$.ajax({
url: U('Cart/cartAdd@shop'),
type: "POST",
data: "id=" + id + "&type=" + type + "&nums=" + nums + "&flag=" + flag,
dataType: "json",
async: false,
success: function( res){
if( res['status']>=1){
if( view!=0) alert( res['msg']);
upCart();
}
else{
alert( res['msg']);
}
}
});
}
</script>

情况2:避免ajax重复提交

避免ajax重复提交的方法有很多钟,不复杂,这里就不写代码例子了。

举个例子:用户在商城购物车里,勾选好要买的商品后,点击“提交购物车”按钮的时候,如果是JS或AJAX提交,在用户点击按钮的时候因为与服务器产生了交互,如果网速比较慢,那就会出现等待,用户很有可能就再次点击提交。这样在服务器有可能会造成生成多笔订单。这明显不是我们的目的。

解决办法:在点击后,使用JS把当前的按钮状态变灰且不可点击,在页面上提示“正在提交”,如果网络超时。那恢复原来状态,如果提交成功,则跳转到下一步。

 

本文标签 ,

除非注明,文章均为( 虫哥 )原创,转载请保留链接: http://www.recho.net/143

ajax避免频繁提交,避免重复提交:目前有2 条留言

  1. Post:2015-04-30 上午10:01

    呵呵

发表评论


-----===== 博主信息 =====-----

相关文章

为您推荐

2