巴中市万纵网络科技有限公司
首页 | 联系方式 | 加入收藏 | 设为首页 | 手机站

产品目录

联系方式

联系人:业务部
电话: 00126-83979
邮箱:service@q235cwfgg.com

当前位置:首页 >> 产品展示 >> 默认分类 >> 正文

JS中如何防止AJAX命令重复加载(执行一次,自动向后台发送两次以上的请求)

详细信息:

将代码部署在服务器上后,在提交数据并将数据插入数据库时,总是在提交后不多时,数据便变成了乱码。后来发现原来是AJAX在捣鬼。

1、将如下代码放在将要发送AJAX请求的方法前

<!--防止ajax重复加载-->
<script>
 function prevent_reloading(){
 var pendingRequests = {};
 jQuery.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
 var key = options.url;
 console.log(key);
 if (!pendingRequests[key]) {
 pendingRequests[key] = jqXHR;
 }else{
 //jqXHR.abort(); //放弃后触发的提交
 pendingRequests[key].abort(); // 放弃先触发的提交
 }
 var complete = options.complete;
 options.complete = function(jqXHR, textStatus) {
 pendingRequests[key] = null;
 if (jQuery.isFunction(complete)) {
 complete.apply(this, arguments);
 }
 };
 });
 }
</script>

例如:我要执行一个创建标签的方法,可按照如下方法进行

<!--创建标签-->
<script type="text/javascript">
 function create_tag_fun(){
 <!--将防止ajax重复加载的方法放在此处-->
 prevent_reloading()
 <!--就是上面的方法-->
 var new_tag = $('#new_tag').val();
 if(new_tag.length==0){
 alert("请输入标签名!")
 }
 else{
 $.ajax({
 <!--向后台提交数据的时候最好使用post请求(重要!)-->
 type: 'post',
 url: '/create_new_tag/',
 dataType: 'json',
 async: false,
 data: {'new_tag': new_tag},
 success: function (data){
 var data = data.data
 if(data == 1){
 alert("标签添加成功!请刷新显示!")
 }
 else{
 alert("此标签数据库中已存在!")
 }
 },
 error: function (jqXHR, textStatus, errorThrown) {
 if(errorThrown != 'abort'){
 alert('应用加载失败!');
 }
 },
 });
 }
 }
</script>

完毕!