如何使用 Jquery AJAX 调用 MVC Action 然后在 MVC 中提交表单？

Posted 2023-02-22

【中文标题】如何使用 Jquery AJAX 调用 MVC Action 然后在 MVC 中提交表单？

【英文标题】：How to call MVC Action using Jquery AJAX and then submit form in MVC?

【发布时间】：2014-09-23 23:03:26

【问题描述】：

在我的 MVC 视图中，我有按钮：

<input id="btnSave" type="submit" name="Save" value="Save" />

当我点击这个按钮时，我需要调用一个 Action，在那里做一些事情，然后提交我的表单。

我有这个 jQuery：

$('#btnSave').click(function ()     
    $.ajax(
        url: "/Home/SaveDetailedInfo",
        type: "POST",
        data: JSON.stringify( 'Options': someData),
        dataType: "json",
        traditional: true,
        contentType: "application/json; charset=utf-8",
        success: function (data) 
            if (data.status == "Success") 
                alert("Done");
             else 
                alert("Error occurs on the Database level!");
            
        ,
        error: function () 
            alert("An error has occured!!!");
        
    );
);

然后我想提交我的表单。在控制器中，我有 2 个动作：

public ActionResult SaveDetailedInfo(Option[] Options)

    return Json(new  status = "Success", message = "Success" );


[HttpPost]
public ActionResult Save()
 
    return RedirectToAction("Index", "Home");

问题是当我的按钮中有type="submit" 时，我无法到达SaveDetailedInfo 操作，因为ajax 给了我error，但是当我删除type="submit" 时，ajax 工作正常，但是Save操作永远不会执行。

请问您有什么想法可以执行这两个操作吗？我想也许在Ajax > Success之后尝试通过jquery添加type=submit并使用.click()，但这对我来说听起来很奇怪。

【参考方案1】：

使用preventDefault()停止提交按钮的事件，并在ajax调用成功时使用submit()提交表单：

$('#btnSave').click(function (e) 
    e.preventDefault(); // <------------------ stop default behaviour of button
    var element = this;    
    $.ajax(
        url: "/Home/SaveDetailedInfo",
        type: "POST",
        data: JSON.stringify( 'Options': someData),
        dataType: "json",
        traditional: true,
        contentType: "application/json; charset=utf-8",
        success: function (data) 
            if (data.status == "Success") 
                alert("Done");
                $(element).closest("form").submit(); //<------------ submit form
             else 
                alert("Error occurs on the Database level!");
            
        ,
        error: function () 
            alert("An error has occured!!!");
        
    );
);

【讨论】：

好的。现在我可以访问 Home/SaveDetailedInfo，但是当我提交表单时，我无法进入 Save() Action

确保 ajax 调用成功返回，将警报放入成功回调以验证

我更改了 submit() 代码，现在它可以工作了！非常感谢！

你改变了什么@Bryuk

$(element).closest("form").submit();

【参考方案2】：

假设您的按钮在表单中，您不会阻止按钮单击的默认行为发生，即除了表单提交之外，还会进行 AJAX 调用；您很可能看到的是其中之一

表单提交的速度比 AJAX 调用返回的速度快 表单提交导致浏览器中止 AJAX 请求并继续提交表单。

所以你应该防止按钮点击的默认行为

$('#btnSave').click(function (e) 

    // prevent the default event behaviour    
    e.preventDefault();

    $.ajax(
        url: "/Home/SaveDetailedInfo",
        type: "POST",
        data: JSON.stringify( 'Options': someData),
        dataType: "json",
        traditional: true,
        contentType: "application/json; charset=utf-8",
        success: function (data) 

            // perform your save call here

            if (data.status == "Success") 
                alert("Done");
             else 
                alert("Error occurs on the Database level!");
            
        ,
        error: function () 
            alert("An error has occured!!!");
        
    );
);

【讨论】：

好的。现在我可以访问 Home/SaveDetailedInfo，但是当我提交表单时，我无法进入 Save() Action

【参考方案3】：

您的 C# 操作“Save”未执行，因为您的 AJAX url 指向“/Home/SaveDetailedInfo”而不是“/Home/Save”。

要从一个动作中调用另一个动作，您可以尝试以下解决方案： link

这是另一个更好的解决方案：link

[HttpPost]
public ActionResult SaveDetailedInfo(Option[] Options)

    return Json(new  status = "Success", message = "Success" );


[HttpPost]
public ActionResult Save()
 
    return RedirectToAction("SaveDetailedInfo", Options);

AJAX：

Initial ajax call url: "/Home/Save"
on success callback: 
   make new ajax url: "/Home/SaveDetailedInfo"

【讨论】：

Action Save 和 Button name="Save" type="Submit" 同名，所以当我点击这个按钮时，我会进入 [HttpPost] ActionResult Save()

不要使用 <input type="submit"..> 。试试<button id="btnSave">Save</button>你的javascript会在btnSave点击时触发。

SaveDetailedInfo 操作后我需要提交此表单

然后在您的 ajax 成功回调中，评估是否 data.status == "Success" 然后获取您的表单字段值并使用它构建一个新的 json 对象并执行新的 AJAX 调用。

确实如此，但我相信有更好的方法可以进入 Save() ActionResult，并使用 Model 和其他 MVC Stuff