Question

我的代码成功将数据保存到数据库中。但是尽管使用了jquery ajax，当方法完成后，它会打开新页面： - （http://localhost:3721/Home/Save）并显示“＆＃39; True＆＃39;”。

我需要留在我调用按钮事件的同一页面上，并显示警告信息。

这是我的jquery代码： -

$("#btnSave").on("click", function() {
    var text = $("#txtText").val();
    var id = $("#id").val();
    var url = "/Home/Save";
    $.ajax({
        url: url,
        type: "POST",
        data: "{ 'id' :'" + id + "','text' : '" + text + "'}",
        cache: false,
        contentType: "application/json; charset=utf-8",
        success: function(result) {
            if (result === true)
                alert("Record Saved");
        },
        error: function(result) {
            alert("Error...failed");
        }
    });
});

这是我的控制器方法： -

[HttpPost]
public bool Save(int id, string text)
{
    return(_repo.SaveRecord(id, text));
}

Answer 1

错误很少：

你有一个错字：它应该说类型：＆＃34; POST＆＃34;，而不是tyupe。
您应该从JavaScript函数返回false以避免该行为。
您的ASP.NET MVC方法应返回JsonResult，以便您可以更好地控制AJAX服务器端方法返回的内容。
最后但并非最不重要的是，尝试对从客户端发送的对象进行字符串化以避免安全问题。

Answer 2

非常重要：切勿在表单发布时使用click个事件。表格仍然通过按键提交。请改用submit事件。

$("form").on("submit", function(e) {
    e.preventDefault();  // Stop form submit
    var text = $("#txtText").val();
    var id = $("#id").val();
    var url = "/Home/Save";
    $.ajax({
        url: url,
        type: "POST",
        data: "{ 'id' :'" + id + "','text' : '" + text + "'}",
        cache: false,
        contentType: "application/json; charset=utf-8",
        success: function(result) {
            if (result === true)
                alert("Record Saved");
        },
        error: function(result) {
            alert("Error...failed");
        }
    });
});

此外，您还需要在处理程序中阻止提交的默认操作{/ 1}}或e.preventDefault()。

此外，正如@Nick Pierpoint建议的那样，您需要确保您的保存按钮标记为return false。如果您显示HTML，它将有助于：）

Answer 3

添加event.preventDefault();以阻止默认点击事件：

$("#btnSave").on("click", function(event) {
     event.preventDefault();

使用jquery Ajax时为什么会发布页面？

3 个答案: