Ajax 使用fetch（）api发布对象_Ajax_Post_Fetch

Ajax 使用fetch（）api发布对象

ajax post

Ajax 使用fetch（）api发布对象,ajax,post,fetch,Ajax,Post,Fetch,我试图使用fetch（）api发布一些数据，但一直收到一个“400-Bad Request”错误。我使用jQuery的$.ajax（）方法没有任何问题，我想知道我做错了什么：数据 let obj = { id_user: 57, id_category: 60, note: 'test' } 使用jQuery（工作）使用fetch（）（不工作）响应 Response {type: "basic", url: "http://localhost:3001/api/

我试图使用fetch（）api发布一些数据，但一直收到一个“400-Bad Request”错误。我使用jQuery的$.ajax（）方法没有任何问题，我想知道我做错了什么：

数据

let obj = {
    id_user: 57,
    id_category: 60,
    note: 'test'
}

使用jQuery（工作）

使用fetch（）（不工作）

响应

Response {type: "basic", url: "http://localhost:3001/api/devices", redirected: false, status: 400, ok: false…}

我遗漏了什么吗？

以下是如何使用fetch API：

namespace WebApi.Controllers
{
    public class obj
    {
        public int id_user { get; set; }
        public int id_category { get; set; }
        public string note { get; set; }
    }

    public class devicesController : ApiController
    {
        public string Post([FromBody]obj value)
        {
            //use newtonsoft json
            string json = JsonConvert.SerializeObject(value);
            return json;
        }
    }
}

视图：

@{
布局=空；
}
Index2
$（函数（）{
$（“#callAjax”）。单击（函数（）{
设obj={
id_用户：57，
id_类别：60，
注：“测试”
}
//这对我有用，仅供参考，我使用的端口与你不同
//$.ajax({
//网址：'http://localhost:53110/api/devices',
//键入：“post”，
//资料来源：obj
//}).done（函数（数据、文本状态、jqXHR）{
//警报（数据）；
//}).失败（功能（xhr、状态、错误抛出）{
//警报（“抱歉，出现问题！”）；
//log（“错误：+errorshown”）；
//控制台日志（“状态：+状态”）；
//console.dir（xhr）；
//})
//https://davidwalsh.name/fetch -在ie11中不起作用
//https://stackoverflow.com/questions/11492325/post-json-fails-with-415-unsupported-media-type-spring-3-mvc
取（'http://localhost:53110/api/devices', {
//我必须添加此标题，因为415不支持媒体类型
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
},
方法：“post”，
正文：JSON.stringify（obj）
}).然后（功能（响应）{
//警报（响应）
//加上这个https://developers.google.com/web/updates/2015/03/introduction-to-fetch
response.json（）.then（函数（数据）{
警报（数据）；
});
}).catch（函数（错误）{
警报（错误）
})
})
})

Response {type: "basic", url: "http://localhost:3001/api/devices", redirected: false, status: 400, ok: false…}

namespace WebApi.Controllers
{
    public class obj
    {
        public int id_user { get; set; }
        public int id_category { get; set; }
        public string note { get; set; }
    }

    public class devicesController : ApiController
    {
        public string Post([FromBody]obj value)
        {
            //use newtonsoft json
            string json = JsonConvert.SerializeObject(value);
            return json;
        }
    }
}

     @{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index2</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#callAjax").click(function () {
                let obj = {
                    id_user: 57,
                    id_category: 60,
                    note: 'test'
                }

                //this worked for me, FYI, I USE different port than you
                //$.ajax({
                //    url: 'http://localhost:53110/api/devices',
                //    type: 'post',
                //    data: obj
                //}).done(function (data, textStatus, jqXHR) {
                //    alert(data);
                //}).fail(function (xhr, status, errorThrown) {
                //    alert("Sorry, there was a problem!");
                //    console.log("Error: " + errorThrown);
                //    console.log("Status: " + status);
                //    console.dir(xhr);
                //})

                //https://davidwalsh.name/fetch - does not work in ie11
                //https://stackoverflow.com/questions/11492325/post-json-fails-with-415-unsupported-media-type-spring-3-mvc
                fetch('http://localhost:53110/api/devices', {
                    //I HAD TO add this headers because 415 unsupported media type
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    },
                    method: 'post',
                    body: JSON.stringify(obj)
                }).then(function (response) {
                    //alert(response)
                    //ADDED THIS https://developers.google.com/web/updates/2015/03/introduction-to-fetch
                    response.json().then(function (data) {
                        alert(data);
                    });
                }).catch(function (error) {
                    alert(error)
                })
            })
        })
    </script>
</head>
<body>
    <div>
        <input type="button" value="callAjax" id="callAjax" />
    </div>
</body>
</html>