防止AJAX通话每次触发两次

Question

我正在使用JQuery 3.3.1构建Web应用程序。似乎每次我进行ajax调用时，请求都会发送两次。我可以告诉您，因为我尝试在服务器端记录请求。我尝试了类似问题的解决方案，但它们似乎无济于事。我将ajax调用与点击事件分开了，因此不会发生，因为点击事件被注册了两次。$(function() {    console.log("hi");    var request = {};    request["user_id"] = 1;    request["date"] = new Date();    request["assignments"] = [{        "point_count" : 1,        "skill_mnemo" : "SKILL_FARM"    }];    $.ajax({            type: "POST",            dataType: "json",            mimeType: "application/json",            url: "./api/update_skill_point.php",            enctype: 'multipart/form-data',            data: request,            async: false,            cache: false,            success: function(result) {                console.log(result);            }    });});

Answer 1

您必须通过以下方式调试此代码：

1. 检查hii打印到控制台中的次数。

2. 在的开头添加断点$.ajax。然后检查调用堆栈。

3. 进入“网络”标签，并在启动程序列中分析调用堆栈以获取相应的ajax调用。（适用于Chrome浏览器）

希望对您有帮助。

Answer 2

不要使用

(function(){})

如果我们使用（function（）{}），它将在DOM准备就绪时自动调用，然后在需要时再次调用。

尝试

function ajaxCall()

{

 console.log("hi");

    var request = {};

    request["user_id"] = 1;

    request["date"] = new Date();

    request["assignments"] = [{

        "point_count" : 1,

        "skill_mnemo" : "SKILL_FARM"

    }];

    $.ajax({

            type: "POST",

            dataType: "json",

            mimeType: "application/json",

            url: "./api/update_skill_point.php",

            enctype: 'multipart/form-data',

            data: request,

            async: false,

            cache: false,

            success: function(result) {

                console.log(result);

            }

    });

}

$(document).ready(){

 ajaxCall();

}

通过这种方式，您可以控制ajax调用，现在您可能已经知道如何处理，如果没有让我知道，我将尝试解释更多。