如何通过 $.ajax() 发布到 ASP.NET WEB API？答案

【问题标题】：How to POST via $.ajax() to ASP.NET WEB API?如何通过 $.ajax() 发布到 ASP.NET WEB API？
【发布时间】：2015-10-02 13:19:03
【问题描述】：

一旦 WEB API 方法被命中，我不断得到一个空参数。我做错了什么？

var product = {
name: "productA",
Id: 22
};

$.ajax({
    url: 'http://localhost:50175/api/values/',
    type: 'POST',
    data: product
})
.success(function(data) {
    alert('success');
})

网页接口

// POST api/values
[HttpPost]
public void Post([FromBody]Product value)
{
    setResponse();
}

产品类别

public class Product
{
    public string name { get; set; }
    public int Id { get; set; }
}

【问题讨论】：

你没有做错任何事，它对我来说非常完美。
我正在使用 query-1.11.3.min.js。我过去遇到过类似的问题，我建议将 var product 重命名为 var value，这样 Web API 方法的参数名称和您从 AJAX 传递的参数名称相同。
我使用的是 jquery 2.1.4。
尝试将url 更改为api/values/Post！我刚来这里工作！它也可以正常工作！
添加 /POST 按预期产生 404。

标签： c# jquery asp.net ajax asp.net-web-api

【解决方案1】：

您需要将Post 附加到网址：

var product = {
    name: "productA",
    Id: 22
};

$.ajax({
    url: 'http://localhost:50175/api/values/Post',
    type: 'POST',
    data: product
})
.success(function (data) {
    alert('success');
})

屏幕截图

【讨论】：

这不是 Web API 的工作方式。此外，如果我这样做，什么也不会发生。
@4thSpace 老实说，正如您在屏幕截图中看到的那样，这就是我为使其正常工作所做的全部更改。如果您喜欢您的 URL，可以添加 RouteAttribute。我发布的答案的唯一区别是端口 url，我已更改以匹配您的。您可能在发布的代码之外遇到问题。我会在一个新的解决方案中尝试它，只是为了隔离问题。您是否收到任何控制台错误？

【解决方案2】：

假设您打算将 JSON 发布到您的 WebAPI。

您必须自己指定编码并进行编码。默认情况下，jQuery 会对表单 url 编码数据参数。

$.ajax({
    url: 'http://localhost:50175/api/values/',
    type: 'POST',
    data: JSON.stringify(product),
    contentType: "application/json"
})
.success(function(data) {
    alert('success');
});

【讨论】：

仍为空参数。

【解决方案3】：

试试这个

  var product = {
name: "productA",
Id: 22
};

$.ajax({
    url: 'http://localhost:50175/api/values/',
    type: 'POST',
    data: JSON.stringify(product),
    dataType: "json"
})
.success(function(data) {
    alert('success');
});

【讨论】：

你能提供 JSON.stringify(product) 语句给你什么吗？
{"name":"productA","Id":"22"}

【解决方案4】：

试试这个：

 function YourMethodName() {
            $.ajax({
                url: '~/api/values/',
                type: 'POST',
                data: JSON.stringify({
                    product : {
                        name: $('#IdOfInputName"').val(),
                        ID: $('#idofInputID').val()
                    },
                }),
                contentType: 'application/json; charset=utf-8',
                success: function (result) {
                   // your code 
                },
                error: function (result) {
                   //your code 
                }
            });
        };

【讨论】：

试过了。对象有效，但属性仍然为 null。

【解决方案5】：

将每个人的答案拼凑在一起，我找到了解决方案。

删除 Web API 参数中的 [FromBody]。 @Big Daddy 在 OP 评论中提到了这一点，但后来说要使用 HttpRequestMessage，这是不可用的。

使用来自 OP 的代码，上面是唯一的修改。

一些额外的 cmets，至少在我的场景中：

不要使用JSON.stringify()，我不在OP 中。
contentType: 'application/json; charset=utf-8' 将导致值为 null
type 没关系
不要将Post 附加到端点网址

我不确定为什么首先会出现 [FromBody]。我猜微软假设每个人都会发布表格？这是不现实的。

【讨论】：