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

本文关键字：何工作 工作 Web Api Post 方法 AJAX | 更新日期: 2023-09-27 18:06:15

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

注意:这是我正在尝试调用的rest服务。(一个正规的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方法，但它传递的是空值。

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',
        });
    }

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

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

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'
        });
    }

您可以尝试这样做并使用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'
        });
    }

我想你使用的是ASP。NET WebAPI，它从URL绑定所有简单类型(int, bool, string等)，从body绑定所有复杂类型。当你用FromBody属性标记name时，它会从请求体绑定它，而不是url映射。

你可以阅读更多关于ASP的信息。. NET WebAPI路由和参数绑定:

    在www.asp.net上
  • 在www.west-wind.com上
  • 和MSDN

您还缺少数据契约属性如果你创建一个你的类，如:

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

这些属性可以在System.Runtime中找到。序列化，Json解析器(Json.NET)使用它们来(帮助)反序列化模型。

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

public void Post([FromBody]RecipeInformation information)


var dataJSON = { name: "test" };

应该可以工作，如果你只是把它作为表单数据传递，它肯定会工作。

我在Microsoft Docs的帮助下发现了这个问题使用如上所述的JS代码

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

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

$("#updateuser")。点击(函数(){

        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');
            }
            })
    })
相关文章：