AJAX 和 Web Api Post 方法 - 它是如何工作的？答案

【问题标题】：AJAX & Web Api Post Method - How does it work?AJAX 和 Web Api Post 方法 - 它是如何工作的？
【发布时间】：2013-03-19 05:58:33
【问题描述】：

我正在尝试使用 AJAX/Jquery 和 c# 写入我的数据库。每当我将参数传递给 C# 代码时，它都会显示为 null。我正在使用 Visual Studio 在创建控制器类时生成的默认模板。任何帮助将不胜感激！

注意：这是我试图调用的休息服务。（一个普通的 ASP 网站......不是 MVC。此外，GET Rest api 工作得很好。）

jQuery/AJAX：

var dataJSON = { "name": "test" }

$('#testPostMethod').bind("click", GeneralPost);
function GeneralPost() {
    $.ajax({
        type: 'POST',
        url: '../api/NewRecipe',
        data:JSON.stringify(dataJSON),
        contentType: 'application/json; charset=utf-8',
        dataType: 'json'
    });
}

C#

    //If I remove the [FromBody] Tag then when I click the button this method is never called.
    public void Post([FromBody]string name)

    {

    }

编辑：

我已经稍微调整了我的代码，但仍然遇到同样的问题。回顾一下，它正在加载 POST 方法，但它传入的是 null。

C#

 public class RecipeInformation
    {
        public string name { get; set; }

    }

        public void Post(RecipeInformation information)

        {

        }

AJAX：

    var dataJSON = { information: { name: "test" } };

    $('#testPostMethod').bind("click", GeneralPost);
    console.log(dataJSON);
    function GeneralPost() {
        $.ajax({
            type: 'POST',
            url: '../api/NewRecipe',
            data: dataJSON,
            contentType: 'application/json; charset=utf-8',
        });
    }

【问题讨论】：

Post(string name) 是 MVC 应用程序、Web 服务还是什么的一部分？
抱歉，这是 ASP - 一个 Rest 服务。 GET 完美运行。
@Yecats 你的 [WebMethod] 属性和静态关键字在哪里使该方法可用？

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

【解决方案1】：

$("#updateuser").click(function () {

        var id = $("#id").val();
        var dataJSON = $("#username").val();

        alert("" + dataJSON);

        $.ajax({


            url: 'http://localhost:44700/api/Home/' + id,
            type: 'PUT',
            data: JSON.stringify(dataJSON),
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',

            success: function (data, textStatus, xhr) {
                $.each(data, function (key, val) {
                    $("<li>" + val + "</li>").appendTo($("#names"));
                })
            },
            error: function (xhr, textStatus, errorThrown) {
                alert('Error in Operation');
            }

            })

    })

【讨论】：

【解决方案2】：

我在Microsoft Docs 的帮助下发现了问题使用提到的JS代码

$.post('api/updates/simple', { "": $('#status1').val() });

我错过的是添加空属性名称，所以OP需要做的是{"":data:JSON.stringify(dataJSON)},而不是data:JSON.stringify(dataJSON),

【讨论】：

【解决方案3】：

我假设您使用的是 ASP.NET WebAPI，它绑定了 URL 中的所有简单类型（int、bool、string 等）和正文中的所有复杂类型。当您使用 FromBody 属性标记名称时，它会从请求正文而不是 url 映射中绑定它。

您可以在此处阅读有关 ASP.NET WebAPI 路由和参数绑定的更多信息：

【讨论】：

我只使用了frombody，因为模板就是这样生成的。我已经更新了上面的代码，以反映我真正想要传递信息的方式。
这是一本非常好的读物，感谢您发送它！

【解决方案4】：

对于简单类型，在服务器端：

public void Post([FromBody]string name)
{
}

在客户端，您只需定义是否要以 json 格式发送：

    var dataJSON = "test";

    $('#testPostMethod').bind("click", GeneralPost);
    function GeneralPost() {
        $.ajax({
            type: 'POST',
            url: '/api/NewRecipe',
            data: JSON.stringify(dataJSON),
            contentType: 'application/json; charset=utf-8',
            dataType: 'json'
        });
    }

如果你想让它在复杂类型中工作，你应该从服务器端定义：

public class RecipeInformation
{
    public string name { get; set; }
}

public class ValuesController : ApiController
{
    public void Post(RecipeInformation information)
    {
    }
}

从客户端：

    var dataJSON = { name: "test" };

    $('#testPostMethod').bind("click", GeneralPost);
    function GeneralPost() {
        $.ajax({
            type: 'POST',
            url: '/api/NewRecipe',
            data: JSON.stringify(dataJSON),
            contentType: 'application/json; charset=utf-8',
            dataType: 'json'
        });
    }

【讨论】：

啊！终于有一个可行的解决方案了！我测试了复杂的类型，它工作得很好。 :)
如何向复杂数据添加更多参数？此 JSON 不能超出名称 - var dataJSON = { name: "test", category: "1",prepTime:"60", cookTime:"40",standTime:"32", imgPath:"something.jpg" ,status:"1" };
在 json 中，你的值可以是另一个 json 对象（例如：{ name: "test", category: "1", time:{prepTime:"60", cookTime:"40"},standTime:"32", imgPath:"something.jpg",status:"1" }
使用 webapi 2.0，我从您的答案中复制粘贴了第一个示例，并不断收到“预检响应具有无效的 HTTP 状态代码 405”
优秀的解决方案！我正在寻找我的帖子不起作用的原因。你刚刚给出了完美的答案。非常感谢！

【解决方案5】：

API 控制器中的绑定有点奇怪。我相信：

public void Post([FromBody]RecipeInformation information)

与

var dataJSON = { name: "test" };

应该可以，如果您只是将其作为表单数据传递，肯定会有效。

【讨论】：

我已经尝试过了（然后又试了一次）。这似乎不起作用:(

【解决方案6】：

您可以尝试做这样的事情并使用 jquery 参数方法

    var postData = {
        name : 'name'
    }

    $('#testPostMethod').bind("click", GeneralPost);
    function GeneralPost() {
        $.ajax({
            type: 'POST',
            url: '../api/NewRecipe',
            data: $.param(postData,true),
            contentType: 'application/json; charset=utf-8',
            dataType: 'json'
        });
    }

【讨论】：

看起来并没有解决这个问题。我仍然遇到同样的问题。

【解决方案7】：

您缺少的一部分是数据合同属性如果你让你的类像：

[DataContract]
public class RecipeInformation
{
    [DataMember]
    public string name { get; set; }
}

这些属性位于 System.Runtime.Serialization 中，Json 解析器 (Json.NET) 使用它们来（帮助）反序列化模型。

【讨论】：

很遗憾，这并没有解决问题。