Javascript 发送多个最终提交表单的AJAX请求会导致意外结果_Javascript_Ajax_Forms_Grails

Javascript 发送多个最终提交表单的AJAX请求会导致意外结果

javascript ajax forms grails

Javascript 发送多个最终提交表单的AJAX请求会导致意外结果,javascript,ajax,forms,grails,Javascript,Ajax,Forms,Grails,对不起，问题的标题，但我甚至不知道如何问这个D 假设我的页面有一些公式集，可以将数据添加到列表中，每次您想要添加新数据时，都会首先将其插入数据库，然后刷新页面（糟糕的设计，但为了示例，请想象一下！）因此，我们有一个执行AJAX请求的按钮。当服务器收到请求时，它会执行一些检查并最终返回成功。在AJAX成功部分，我最终提交了插入到输入字段中的公式集数据。因此，对服务器执行了两个调用，首先是AJAX请求，然后是表单提交。我的浏览器显示列表需要3秒钟现在想象一下，我按下按钮3次的速度如此之快，以至于

对不起，问题的标题，但我甚至不知道如何问这个D

假设我的页面有一些公式集，可以将数据添加到列表中，每次您想要添加新数据时，都会首先将其插入数据库，然后刷新页面（糟糕的设计，但为了示例，请想象一下！）

因此，我们有一个执行AJAX请求的按钮。当服务器收到请求时，它会执行一些检查并最终返回成功。在AJAX成功部分，我最终提交了插入到输入字段中的公式集数据。因此，对服务器执行了两个调用，首先是AJAX请求，然后是表单提交。我的浏览器显示列表需要3秒钟

现在想象一下，我按下按钮3次的速度如此之快，以至于第一个AJAX请求甚至没有完成（想象一下服务器中的AJAX请求方法有一个sleep 1000，这给了我这样做的时间）。6秒钟后，浏览器刷新，列表中的相同数据重复3次。我理解为什么在创建三个不同线程时数据会出现3次，而服务器中的代码会执行3次（我可以在控制台中看到日志出现3次）

但我不太明白当第一个AJAX请求到达“重定向”或“渲染”方法时会发生什么。为什么渲染实际页面需要6秒？因为我可以理解看到3种不同的“刷新”，延迟2秒，但是出现了一个加载循环，我只能等待。我没有被“延迟”触发，因为这种编码方式非常糟糕，将来会发生变化，但我真的想了解为什么会发生这种情况，以及服务器在呈现新页面时如何处理几个AJAX请求

代码示例：

视图：

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <title>dfsfsd</title>
    <g:javascript library='jquery' />
    <r:layoutResources/>
</head>
<body>

<g:form url="[action:'addToDatabase',controller:'main']" id="addDataForm">
    <label>Data Name</label>
    <input type="text" name="dataName" id="inputDataName">
</g:form>
    <button type="button" id="addToDatabaseButton">Add Data</button>

<script>
    $("#addToDatabaseButton").on( "click", function() {
        $.ajax({
            url: "${createLink(controller: "main", action: "ajaxCheck")}",
            type: "post",
            cache: false,
            success: function () {
                $("#addDataForm").submit();
            }
        });
    });

</script>

</body>
</html>

现在，有一个2秒的延迟，表示我在数据库中插入了一些东西。显示我尝试插入的项目时出现log.error。如您所见，当我键入“Name A”并按Add Data时，将显示该值，2秒钟后，页面将重新加载

但是如果我一直按下按钮，2秒的延迟就会刷新，我不明白为什么我不喜欢看浏览器刷新3次或者类似的事情，为什么只刷新一次

它是否与浏览器缓存请求相关？如果您发送的是完全相同的请求，它可能会被缓存在缓存中

在Firefox中，请选中

开发工具->网络选项卡->禁用缓存复选框。附截图：
我觉得这更像是一个具体问题，而不是一般问题。一段代码/片段，演示引擎盖下真正发生的事情，将有助于评估场景。我同意这一点，我将尝试构建一个项目，并共享代码+显示问题的gif。我尽可能地解释它，因为这是一个概念问题，而不是代码是否正确。给我几分钟@RayonHope可以帮助@rayon你可以试试-$（“#addToDatabaseButton”）。在（“单击”，函数（e）{e.preventDefault（）；}）我不明白，那么AJAX调用在哪里@雷恩，这个星期天我会试试的。但是，你能不能再解释一下当时可能发生的情况？就像ok一样，我发送了三次相同的请求，但是缓存在这里扮演什么角色呢？D:不过谢谢你的主意
class MainController {

    def index() {
        []
    }

    def addToDatabase() {
        log.error ("We recieve $params.dataName")
        sleep 2000
        redirect(controller: "main", action: "index")
    }

    def ajaxCheck (){
        def map = [:]
        map.put("result","OK")
        render map as JSON
    }
}