当前位置: 首页 > 面试题库 >

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

左宁
2023-03-14
问题内容

在我的MVC视图中,我有一个按钮:

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

当我单击此按钮时,我需要调用一个动作,在其中执行一些操作,然后提交我的表单。

我有这个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"我按下按钮时,无法到达SaveDetailedInfoAction,导致ajax给了我error,但是当我删除时type="submit",ajax可以正常工作,但是SaveAction永远不会执行。

请问如何执行两个动作的任何想法?我想也许在Ajax > Success尝试type=submit通过jquery
添加并使用之后.click(),但这对我来说听起来很奇怪。


问题答案:

使用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!!!");
        }
    });
});


 类似资料:
  • 问题内容: 我想在点击提交按钮时验证WordPress帖子上的用户条目,显示错误消息是否存在问题,如果一切正常,则提交表单。我有一个PHP函数进行检查,如果输入的数据还可以,则返回,否则返回一些错误代码。以下JavaScript发出AJAX请求,并应在成功检查后继续提交表单,但不会: 该代码是根据WPSE问题改编的,该问题最初对我不起作用,因为未提交表单。我发现,如果绑定到的jQuery函数返回t

  • 对于如何控制表单中的提交事件,我有点困惑,我试图在这里找到一个简单的答案。 我想在将表单数据发送到表单操作脚本之前验证表单输入。我试图通过捕获submit事件、使用Ajax调用验证脚本来解决这个问题,如果验证成功,我希望调用实际的表单过程。但我不确定该如何进行。简单地使用似乎会失败(我猜是没有发送表单值)。 下面是概念代码: null null

  • 问题内容: 我正在尝试学习asp.net,到目前为止,我可以加载其他页面内容而无需使用刷新,但是我无法弄清楚提交表单时如何使用ajax。我做了很多谷歌搜索,但是找不到合适的解决方案。这是我的代码, 控制器页面 查看页面 查看页面 问题答案: 这里是完整的例子- 让我们创建一个简单的模型- 现在,让我们创建几个动作,以使用- 发出GET和POST请求 然后让我们创建一个简单的视图,它将托管Ajax.

  • 问题内容: 我有一个ID为ID的表单,该表单具有以下div,其中包含一个Submit按钮: 单击后,将调用该函数。该函数将上述div的innerHTML更改为“ processing …”(因此,提交按钮现在消失了)。 上面的代码有效,但是现在的问题是我无法提交表单!我试着把它放在函数中: 但这是行不通的。 我该如何提交表格? 问题答案: 将表单的属性设置为,代码即可正常工作。

  • 问题内容: 我正在尝试使用phantomJS(真棒的工具!)为具有登录凭据的页面提交表单,然后将目标页面的内容输出到stdout。我可以使用幻像访问该表单并成功设置其值,但是我不太确定提交表单并输出后续页面内容的正确语法。到目前为止,我有: 问题答案: 我想到了。基本上,这是一个异步问题。您不能只是提交并期望立即呈现下一页。您必须等到触发下一页的onLoad事件。我的代码如下:

  • 问题内容: 这是我的表单和onClick方法。我想在按下键盘的Enter按钮时执行此方法。怎么样 ? 注意: 没有jquery被赞赏。 问题答案: 更改为。删除。反而做。这应该可以单击按钮并按回车键。