点击提交按钮触发ajax请求时，做到处理完前一个请求后再处理第二个请求

最新推荐文章于 2022-05-13 19:12:31 发布

Everything1209

最新推荐文章于 2022-05-13 19:12:31 发布

阅读量3.2w

点赞数 2

分类专栏： Jquery/javascript

本文链接：https://blog.csdn.net/everything1209/article/details/39250485

版权

Jquery/javascript 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

目的：点击提交按钮触发ajax请求时，做到处理完前一个请求后再处理第二个请求；提高用户体验。因为如果不这样限制的话，用户点击频率太高，会导致服务器返回的第二条请求快过第一条的响应速度。

代码如下：不是很好，先这样做吧，有更好的处理方法的话，再总结

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>充值</title>
<script src='./jquery-1.7.2.min.js'></script>
</head>
<body>
<ul>
<li><input name='sub' class="submit" id='1' οnclick='test(this)' type="button" value="确认提交"/></li>
<li><input class="return" type="submit" value="返回修改"/></li>

</ul>
<input type='hidden' value='OK' name='ff' id='ff'/>
<script>
function fuck_you(){
    var test = 13;
    
    $.ajax({
        url:'index.php',
        data:{'test':test},
        dataType:'JSON',
        type:'post',
        success:function(data){
            if(data.msg == 'OK'){
                $('input[name=sub]').attr('id','1');
                $('input[name=sub]').attr('value','确认提交')
                alert('成功');
            }else{
                $('input[name=sub]').attr('id','1');
                $('input[name=sub]').attr('value','确认提交')
                alert('失败');
            }
        }
    }).done().fail().always();
    
}   
function test(obj){
    var _status = obj.id;
    if(_status != '1' || _status == undefined){
         $('input[name=sub]').attr('id','0');
         $('input[name=sub]').attr('value','正在提交...');return false;
    }else{
         $('input[name=sub]').attr('id','0');
        fuck_you();
    }  
}
</script>   
</body>
</html>

<?php
$test = $_POST['test'];
$arr = array();
if($test == '123'){
    sleep(2);
    $arr = array('msg'=>'OK');
}else{
    sleep(2);
    $arr = array('msg' => 0);
}
echo json_encode($arr);exit;