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 到您的操作方法，如本答案所述。

此外，在您的操作方法中，您不需要將JsonRequestBehavior.AllowGet參數傳遞給Json方法，因為您的 Action 方法標有[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 方法接收字符作為應答數據類型，但我們發送的不是字符的“abc”，因為字符長度為 2 個字節，因此在這種情況下只能發送“a”或“ab”。

阿賈克斯郵報：

          $.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({
              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
    }