用于 odata web api 的 JQuery Ajax 发布数据答案

【问题标题】：JQuery Ajax Post Data for odata web api用于 odata web api 的 JQuery Ajax 发布数据
【发布时间】：2020-09-23 03:40:03
【问题描述】：

我使用下面的链接创建了一个 odata web api Microsoft Doc OData V4 Link

所以我的解决方案包含两个项目

ODATAWebApi
Web 应用程序

请查找代码 WebApp Code 我可以通过以下代码使用并将数据发布到 odata web api

index.html

<input type="text" id="txtName" value="" />
<br />
<input type="text" id="txtPrice" value="" />
<br />
<input type="text" id="txtCategory" value="" />
<br />

<input type="button" id="btnPostData" value="Post Data Via Query " />

<input type="button" id="btnPostData2" value="Post Data Via Json Object" />

Ajax 代码

$("#btnPostData").bind("click", function () {
        var Name = $("#txtName").val();
        var Price = $("#txtPrice").val();
        var Category = $("#txtCategory").val();

    //I am creating a query string to post the data to odata web api
        var PostData = "Name=" + Name + "&Price=" + Price + "&Category=" + Category;

        $.ajax({
            url: 'https://localhost:44340/api/Products',
            type: 'POST',
            crossDomain: true,
            dataType: 'json',
            data:PostData,
            success: function (data) {
                alert('Data: ' + data);
            },
            error: function (request, error) {
                console.log("Request: " + JSON.stringify(request));
                alert("Request: " + JSON.stringify(request));
            }
        });
    });

使用上述方法，我们能够将数据发布到 odata web api，但我想通过 json 对象发布数据，如下所示，但它不起作用

产品型号

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
    public string Category { get; set; }
}

Json 产品模型

$("#btnPostData2").bind("click", function () {     
        var Product = {
            Id : null,
            Name: $("#txtName").val(),
            Price: $("#txtPrice").val(),
            Category: $("#txtCategory").val()
        }

        $.ajax({
            url: 'https://localhost:44340/api/Products',
            type: 'POST',
            crossDomain: true,
            dataType: 'json',
            data: JSON.stringify(Product),
            success: function (data) {
                alert('Data: ' + data);
            },
            error: function (request, error) {
                console.log("Request: " + JSON.stringify(request));
                alert("Request: " + JSON.stringify(request));
            }
        });
    });

使用上述方法，我无法将数据发布到 odata web api。请帮助或让我知道将数据发布到 odata web api 的任何其他方式。

【问题讨论】：

标签： jquery json ajax asp.net-web-api2 odata

【解决方案1】：

dataType 指的是您期望的服务器响应，以防服务器未设置 Content-Type 标头。您通常根本不需要使用此参数。

contentType 指的是你发给服务器的，这个是你需要设置的。

$("#btnPostData").bind("click", function () {
    $.ajax({
        url: 'https://localhost:44340/api/Products',
        type: 'POST',
        crossDomain: true,
        contentType: 'application/json',
        data: JSON.stringify({
            Id: null,
            Name: $("#txtName").val(),
            Price: $("#txtPrice").val(),
            Category: $("#txtCategory").val()
        })
    }).done(function (data) {
        alert('Data: ' + JSON.stringify(data));
    }).fail(function (request, error) {
        console.log("Request: " + JSON.stringify(request));
        alert("Request: " + JSON.stringify(request));
    });
});

除非您明确指定要发送 JSON，否则您的数据将被标记为内容类型 application/x-www-form-urlencoded，这将在预期 JSON 时关闭服务器。

【讨论】：