Ajax 调用未命中控制器操作

Question

我正在尝试将FormCollection 发送到我的控制器中的一个动作，但该动作从未被击中。

表格：

<form class="form-horizontal" role="form" id="TestForm" onsubmit="return false">
<div class="row">
    <div class="col-md-12">
        <div class="form-group">
            <input type="text" name="Blah1" />
            <input type="text" name="Blah2" />
        </div>
        <input id="SubmitButton" type="submit" value="Submit" />
    </div>
</div>

jQuery/Ajax：

$(document).ready(function () {
    $("#SubmitButton").click(function () {
        var form = $("#TestForm").serialize();


        $.ajax({
            url: "/Calculator/Post",
            type: "POST",
            data: form,
            dataType: 'json',
            success: function () {
                alert("Success");
            },
            error: function () {
                alert("Error");
            }
        });
    });
});

控制器动作：

[HttpPost]
public JsonResult Post(FormCollection form)
{
    return Json(new { success = true }, JsonRequestBehavior.AllowGet);
}

唯一发生的事情是浏览器会警告错误消息。我是否遗漏了导致操作永远不会被击中的东西？

Answer 1

您的代码应该可以正常工作，如问题中所述。唯一的问题是您如何手动构建 url，这有时可能会导致 404 问题，具体取决于您当前的 url/页面。您应该使用 Url.Action 辅助方法来构建 url，该方法将负责构建正确的相对 url，无论您当前位于哪个页面。

serialize() 方法足以发送您的表单数据。它应该可以正常工作（继续尝试）。您无需致电serializeArray，然后按照接受的答案的建议对其进行字符串化！

$.ajax({
    url: "@Url.Action("Post","Calculator")",
    type: "POST",
    data: $("#TestForm").serialize(),
    dataType: 'json',
    success: function () {
        alert("Success");
    },
    error: function () {
        alert("Error");
    }
});

如果您在外部 js 文件中进行此 ajax 调用，您可以考虑将基本 url 传递给 js 文件并使用它来构建您的操作方法的相对 url，如 this answer 中所述。

此外，在您的操作方法中，您不需要将JsonRequestBehavior.AllowGet 参数传递给Json 方法，因为您的操作方法标有[HttpPost]

[HttpPost]
public JsonResult Post(FormCollection form)
{
    var item =form["Blah1"];
    return Json(new { success = true });
}

Answer 2

.serialize() 方法以标准 URL 编码表示法创建一个文本字符串。serializeArray() 方法创建一个 JavaScript 对象数组，准备好编码为 JSON 字符串。

var form = JSON.stringify($("#TestForm").serializeArray());

Answer 3

确保您的控制器 Action Method 或 Method 的参数数据类型与正在发布的变量的数据类型相同。

例子：

这将不起作用，因为在控制器中 InsertScore 方法接收 char 作为 Answer 数据类型，但我们正在发送不是字符的 'abc'，因为 char 长度是 2 字节，所以只能发送 'a' 或 'ab'这种情况。

Ajax 帖子：

          $.ajax({
                  type: 'POST',
                  url: '/Home/InsertScore',
                  data: { Email: Em, Row: i, Answer: 'age' }
              });

控制器：

    [HttpPost]
    [WebMethod]
    public void InsertScore(string Email ,string Row,char Answer)
    {
     //do something here
    }

正确的方法是。

Ajax 帖子：

        $.ajax({
              type: 'POST',
              url: '/Home/InsertScore',
              data: { Email: Em, Row: i, Answer: 'a' }
          });

控制器：

    [HttpPost]
    [WebMethod]
    public void InsertScore(string Email ,string Row,char Answer)
    {
      //do something here
    }