ajax/jquery POST 请求的不必要重复

Posted

技术标签:

【中文标题】ajax/jquery POST 请求的不必要重复【英文标题】:Unwanted repeats of ajax/jquery POST request 【发布时间】:2021-12-28 15:43:53 【问题描述】:

我遇到了一个问题,由于我无法理解的原因,我的发帖请求被重复。我正在使用 jQuery POST 请求将表单提交到 php 脚本以将其插入 SQL 数据库。

它只在某些情况下发生,而且并非始终如一。 9/10 次按预期工作,但有时 ajax 调用重复 2 或 3 次。

enter image description here

重复代码块:

函数 submitLog()

let log = document.getElementById('logContent').value;
let project = document.getElementById('logger_active_project').innerhtml;
let category = document.getElementById('categorySelect').value;
let projectID = document.getElementById('logger_active_project_id').value;
let submit = document.getElementById('submit');
submit.disabled = true;

console.log('starting ajax post request');

$.post('./includes/logger/scripts/add_log.php', 
    log:log,
    project:project,
    category:category,
    project_id:projectID

, function(data, status)
    document.getElementById('logContent').value= "";
    submit.disabled = false;
    console.log('ajax callback fired.' + data);
    
)

编辑:

似乎只有在与以下功能一起使用时才会发生:

函数 submitLogByEntering() let log = document.getElementById('logContent');

log.addEventListener("keyup", function(event) 
    // Number 13 is the "Enter" key on the keyboard
    if (event.keyCode === 13) 
      // Cancel the default action, if needed
      event.preventDefault();
      submitLog();
    
  );

当使用按钮复制问题时,我无法让它重复。

提前非常感谢您提供的任何提示,让我找到正确的方向来解决这个热点问题!

【问题讨论】:

嗨,你确定它被烧了 2-3 次吗?有时浏览器控制台不是你最好的朋友。如果你尝试了 10 次,你看到 1 次重复了 3 次,那么数据库中是否有 12 个添加的对象而不是 10 个?如果没有,那么你的脚本是可以的,如果有 12 个,那么请提供更多关于你的代码的信息。 它确实会触发多次。 DB 显示相同的帖子,只是增加了一个 ID。 【参考方案1】:

这很可能取决于submitLog() 的侦听器。

检查您没有使用会触发多重触发的侦听器。

如果检查太多,只需在submitLog() 之外设置一个测试变量,请将其设置为 true 并测试是否为 true,然后触发 ajax。然后在您的发布请求后将其设置为 false 。这将阻止重复的按钮按下等发生或侦听器中发生任何有趣的事情。

如果您需要重新触发函数,请在变量上设置超时(或在 ajax 完成后设置)以将其重置为 true。

示例:

    var test = true;
    
    function submitLog() 
    
        if (test) 
    
            let log = document.getElementById('logContent').value;
            let project = document.getElementById('logger_active_project').innerHTML;
            let category = document.getElementById('categorySelect').value;
            let projectID = document.getElementById('logger_active_project_id').value;
            let submit = document.getElementById('submit');
            submit.disabled = true;
    
            console.log('starting ajax post request');
    
            $.post('./includes/logger/scripts/add_log.php', 
                log: log,
                project: project,
                category: category,
                project_id: projectID
    
            , function (data, status) 
                document.getElementById('logContent').value = "";
                submit.disabled = false;
                console.log('ajax callback fired.' + data);
    
            );
    
            test = false;
            setTimeout(function () 
                test = true;
            , 5000);
        
     

【讨论】:

您好 Wakka,感谢您的建议。我已经编辑了主要帖子以包含处理事件侦听器和(似乎)导致问题的函数。有关如何解决它的任何建议? 啊,您正在使用 keyup,关键侦听器的问题是,如果按键被按住以及其他方式(操作系统和其他因素在这里有影响),它们会重复。如果您在按键侦听器上为输入键 aka 13 设置了一个 console.log,您可能会看到它多次触发。这真的很常见。你将不得不像我说的那样走可变路线。这是否定这个问题的常用方法。 所以我必须创建一个为 true 的变量,允许函数触发,按下按钮后它变为 false,然后例如使用 setInterval() 将其转回 true 以允许它再次开火?不完全确定我完全了解如何实施您的解决方案。非常感谢到目前为止的指导! @dkvdev 我会用它更新我的答案 你的英雄!一会儿就解决这个问题!

以上是关于ajax/jquery POST 请求的不必要重复的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 WCF 自托管处理 Ajax JQUERY POST 请求

Ajax异步请求

AJAX--jQuery

AJAX和XMLHttpRequest之间的区别[重复]

mvc中的ajax jquery-方法返回不是布尔类型的True [重复]

Node.js https.post 请求 [重复]