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

Posted 2023-03-09

【中文标题】AJAX 和 Web Api Post 方法 - 它是如何工作的？

【英文标题】：AJAX & Web Api Post Method - How does it work?

【发布时间】：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] 属性和静态关键字在哪里使该方法可用？

【参考方案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 路由和参数绑定的更多信息：

On www.asp.net On www.west-wind.com 和MSDN

【讨论】：

我只使用了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) 使用它们来（帮助）反序列化模型。

【讨论】：

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