在加载时运行操作并保持在同一页面上

Question

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

    $(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;
    });
});

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

注意我将它附加到正文，然后开始收听提交，实际上您不会出于多种原因这样做，您会将其附加到表单的 AJAX 替换的最外点，基本上，在初始页面加载时已知的最接近表单的父级。

我希望这对您的应用有所帮助并祝您好运。