阻止默认页面加载，直到单击按钮答案

【问题标题】：prevent default page from loading until button clicked阻止默认页面加载，直到单击按钮
【发布时间】：2018-01-18 09:42:35
【问题描述】：

我有数据提交表单，我使用 ajax post 提交，成功时我想要一个消息框来显示成功，它会这样做但只会在屏幕上停留一秒钟并加载页面默认值。在用户单击确定之前，如何防止加载页面默认值？这适用于默认的 javascript 警报框

function sendToController()
{
    $.ajax({
        type: "POST",
        url: myUrl,
        contentType: "application/json; charset=utf-8",
        datatype: "JSON",
        data: JSON.stringify({ methodParam: arrayDetails }),
        success: function (result) {
            bootbox.confirm("This is the default confirm!",
                function(result) {
                    console.log('This was logged in the callback: ' + result);                                 
            });
        },
        error: function () {
            alert(test);
        }
    });
}

event.preventDefault();
});

【问题讨论】：

这里定义了event。你已经使用了 event.preventDefault();这是停止默认回发行为所必需的，但您实际上需要有该变量可供您使用（通常来自导致此代码运行的“单击”或“提交”事件回调。显示您实际触发此函数的方式。跨度>
另外，在重新格式化您的代码后，似乎 a) 这个 sn-p 不完整，不会自行编译，并且 b) event.preventDefault() 在您的 sendToController() 函数之外，所以不清楚它什么时候被执行。就目前而言，没有足够的信息来肯定地回答这个问题，请编辑您的代码示例，以便我们可以看到发生了什么正确
@cmcc8712，sendToController 方法是在单击按钮时调用的吗？
是的，这是从提交按钮调用的
看看我刚才提供的答案。此外，ADyson 在他的第一条评论中所说的是真正的问题，尽管您可以采用另一种在您的场景中不使用 preventDefault 的方法。

标签： jquery asp.net ajax model-view-controller

【解决方案1】：

正如我在 cmets 中提到的，虽然您提到它是基于单击按钮的，但尚不清楚您的代码是如何被调用的。

它应该看起来像这样，以便与 event.preventDefault() 方法正常工作，从而防止回发同时发生在您的 ajax 请求中，这似乎是当前正在发生的事情。您必须使用回调中提供给您的event 变量并使用它来停止常规回发。

假设你有一个这样的按钮：

<input type="submit" id="yourButtonID" value="Submit"/>

或者这个：

<button id="yourButtonID">Submit</button>

那么你可以这样写：

$("#yourButtonID").click(function(event) {
  event.preventDefault();
  sendToController();
});

function sendToController()
{
    $.ajax({
        type: "POST",
        url: myUrl,
        contentType: "application/json; charset=utf-8",
        datatype: "JSON",
        data: JSON.stringify({ methodParam: arrayDetails }),
        success: function (result) {
            bootbox.confirm("This is the default confirm!",
                function(result) {
                    console.log('This was logged in the callback: ' + result);                                 
            });
        },
        error: function () {
            alert(test);
        }
    });
}

【讨论】：

【解决方案2】：

您的问题不清楚，但我最好的猜测是，当单击按钮提交表单时，您正在调用函数sendToController。如果是这种情况，那么您需要连接提交按钮的 JavaScript onclick 事件，以便表单不会回发。您可以使用以下两种方法中的任何一种来解决您的问题。

方法 1（使用 return false）

由于在您的场景中没有 return false 语句，因此表单发布到服务器并且您的当前页面重新加载，这反过来又导致您的引导框确认弹出窗口消失。

请注意，如果您不想发布表单，则应在单击按钮时返回 false。另外，如果使用这种方法，请从您的 sendToController 函数中删除 event.preventDefault()，因为它可能会导致意想不到的效果。

<input type="button" id"btnSubmit" onclick="sendToController(); return false;" />

方法 2（使用 preventDefault）

此外，正如 ADyson 所提到的，您没有将 event 参数传递给 `sendToController 函数，这就是为什么当您调用 event.preventDefault() 时它不会执行您想要的操作。如果您将事件传递给 sendToController 函数，那么它将按预期工作并且不提交表单，而不会返回 false。使用 preventDefault 方法时的事件连接标记应如下所示。

<input type="button" id"btnSubmit" onclick="sendToController(event);" />

【讨论】：