javascript - 加载时运行操作并停留在同一页面上

Question

我目前正在尝试在我的应用程序中加载页面时在我的 grails Controller 中运行一个操作，该操作将启动一个线程并继续执行任务。我仍然能够成功地实现这一点。这是我的代码:

    $(document).ready(function(){
    var $form = $("#background_thread");
    $form.submit(function(e){
        e.preventDefault();
        $.post($(this).attr("background"), $(this).serialize(), function(data){
            alert("should work" + data)
        });
        return false;
    });
});

我一生都无法弄清楚为什么它不起作用。是否有一些我忽略的简单语法或者我应该采取不同的方式来做到这一点？

更新:

我的表单 ID 是#background_thread，我正在尝试异步执行此操作，以便页面仍保持不变并且我的操作将运行。

我的脚本已运行，但在 $form.submit(function(e){ 上失败，并且不会通过。

Answer 1

您需要防止已生成事件的默认行为。

$form.submit(function(e){
    e.preventDefault();
    // your code
}

更新:

一旦整个脚本开始工作，您肯定需要添加上述内容。另外，请将您的标记添加到问题中。需要确定的几个基本问​​题:

#background_thread 是您表单的 ID 吗？

在 Chrome Inspector(或类似工具)的网络选项卡中，请求是否被触发？

标记是否是异步传递的，如果是的话，您将需要使用 .on 来永久附加事件，而不仅仅是一个基本的选择器？

更新2:

您的表单本身是异步传递的，因此您的事件附件必须更改为:

$(document).ready(function(){
    $("body").on("submit", "#background_thread", function(e){
        e.preventDefault();
        $.post($(this).attr("background"), $(this).serialize(), function(data){
            alert("should work" + data)
        });
        return false;
    });
});

所以，解释一下，您的事件附件是在文档准备就绪期间发生的。文档就绪触发，但表单尚未传递到 DOM，因此它没有附件。因此，您可以使用 on() 将该事件永久附加到该元素，以便在整个页面呈现到浏览器的生命周期内。

注意我将其附加到正文，以便在此时开始监听提交，实际上，由于多种原因，您不会这样做，您可以将其附加到表单的 AJAX 替换的最外层点，本质上，与初始页面加载时已知的表单最近的父级。

我希望这对您有所帮助，并祝您申请顺利。