Question

我有数据提交表单，我使用ajax帖子提交，成功后我想要一个消息框显示成功，它会这样做但只停留在屏幕上一秒钟并加载页面默认值。如何在用户单击“确定”之前阻止加载页面默认值？这适用于默认的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();
});

Answer 1

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

方法1（使用return false）

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

请注意，如果您不想发布表单，则在单击按钮时应返回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);" />

Answer 2

正如我在评论中提到的那样，虽然您根据点击按钮提到了代码，但它并不清楚您的代码是如何被调用的。

它应该看起来像这样，以便与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 个答案: