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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_26870933/article/details/84991630

将代码部署在服务器上后，在提交数据并将数据插入数据库时，总是在提交后不多时，数据便变成了乱码。后来发现原来是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>

完毕！