javascript - 通过 AJAX Web API 存在参数时无法发布

Question

我正在尝试通过 Ajax 发布到函数。当web api函数没有参数时，它可以工作。

当我添加参数时，它失败了。

我怀疑问题是由路由引起的，但我不明白为什么会出现这种情况。

我的功能是

    [HttpPost]
    [Route("api/cms/{accountId:int}/{paneId}/{url}/{content}")]
    public IHttpActionResult Post(int accountId, string paneId, string url, string content)
    {
        ....
    }

如果我将上面的内容更新为

    [HttpPost]
    public IHttpActionResult Post()
    {
        ....
    }

然后它就可以工作了(它从 AJAX 帖子中调用了这个函数)。

JavaScript 是

function ajaxStart(type, url, data, successDelegate, failDelegate, errorDelegate) {
    $.ajax({
        type: type.toUpperCase(),
        url: url,
        contentType: "application/json;",
        data: data,
        dataType: "json",
        success: function (response) {
            successDelegate(response);
        },
        failure: function (e) {
            failDelegate(e.statusText);
        },
        error: function (e) {
            errorDelegate(e.statusText);   //always hit this, statusText is Not Found
        }
    })
}

相关变量在哪里

type = "POST", 
url = "http://localhost:53733/api/cms", 
data = "{"accountId":1,"paneId":"02","url":"/Playground/Index","content":"Left"}"

数据对象是使用 JSON.Stringify 创建的

同样的问题发生在

    public IHttpActionResult Post([FromBody] int accountId, [FromBody]string paneId, [FromBody]string url, [FromBody]string content)

为什么不接受？

Answer 1

当您定义 Route("api/cms/{accountId:int}/{paneId}/{url}/{content}") 时，Mvc 实际上期望路由具有 accountId、paneId、url 和 content。

因此，如果您想在路由/网址中发布这些变量，则需要以这种方式构造网址，并且不需要发布任何数据。

否则，如果您想将请求正文中的 application/json 格式的数据发送回服务器，您的 url/路由应该只是 Route("api/cms").

错误的 url 将导致 404。

选项 1:在请求正文中发布数据

[HttpPost]
[Route("api/cms")]
public IActionResult Post(int accountId, string paneId, string url, string content)
{
    ...
}

$.ajax({
    type: 'POST',
    url: 'http://localhost:53733/api/cms',
    data: data,
    ...
});

选项 2:在 url 中嵌入数据(不推荐!)

[HttpPost]
[Route("api/cms/{accountId: int}/{paneId}/{url}/{content}")]
public IActionResult Post(int accountId, string paneId, string url, string content)
{
    ...
}

$.ajax({
    type: 'POST',

    // Remember to encode the url parameter! yawk!
    url: 'http://localhost:53733/api/cms/1/2/%2FPlayground%2FIndex/left',

    // No need to post with data as they're already in the url
    // data: data,
    ...
});

我的看法

// Sample code run on ASP.NET Core MVC 2.0

// Controller
[Route("api/[controller]")]
public class CMSController : Controller
{
    ...

    [HttpPost]
    public IActionResult(CreateCmsViewModel model)
    {
        // Do something

        // Return a 201 response with new location header
        return Created(...);
    }
}

// The view model
public class CreateCmsViewModel
{
    public int AccountId { get; set; }
    public string PaneId { get; set; }
    public string Url { get; set; }
    public string Content { get; set; }
}

// jQuery AJAX
    $.ajax({
    type: 'POST',
    url: 'http://localhost:53733/api/cms',
    data: {
        accountId: 1,
        paneId: "02",
        url: "/Playground/Index",
        content: "Left"
    },
    dataType: 'json',
    // No longer need this
    // contentType: 'application/json',

    ...
}).done(function(response){

});