jQuery中断ajax请求

最新推荐文章于 2023-09-24 14:55:56 发布

转载最新推荐文章于 2023-09-24 14:55:56 发布 · 6.5k 阅读

文章标签：

#中断ajax提交

转载的web前端技术专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种利用Ajax技术实现网页中请求启动与终止的方法。通过两个按钮分别触发请求的开始与结束，演示了如何使用$.ajax()方法发起请求，并在需要时通过调用abort()方法来中止正在进行的请求。

转载来自：http://blog.youkuaiyun.com/a600423444/article/details/6117889

    <html>  
    <head>  
    <mce:script type="text/<a href="http://lib.youkuaiyun.com/base/javascript" class='replace_word' title="JavaScript知识库" target='_blank' style='color:#df3434; font-weight:bold;'>JavaScript</a>"><!--  
    var currentAjax = null;  
    function startAjax(){  
        //方法就是将XHR对象指向currentAjax，再调用currentAjax的.abort()来中止请求  
        currentAjax = $.ajax({  
               type:'POST',  
               beforeSend:function(){},  
               url:'test.<a href="http://lib.youkuaiyun.com/base/php" class='replace_word' title="PHP知识库" target='_blank' style='color:#df3434; font-weight:bold;'>PHP</a>',  
               data:'username=xxx',  
               dataType:'JSON',  
               error:function(){alert('error')},  
               success:function(data){alert(data)}  
        });  
    }  
    function stopAjax(){  
        //如若上一次AJAX请求未完成，则中止请求  
        if(currentAjax) {currentAjax.abort();}  
    }  
    // --></mce:script>  
    </head>  
    <body>  
    <input type="button" value="触发请求" onclick="startAjax()" />  
    <input type="button" value="停止请求" onclick="stopAjax()" />  
    </body>  
    </html>