WebAPI接收js传过来的对象数组数据

最新推荐文章于 2022-10-19 16:09:55 发布

原创最新推荐文章于 2022-10-19 16:09:55 发布 · 3.1k 阅读

3 ·

CC 4.0 BY-SA版权

c# 同时被 2 个专栏收录

17 篇文章

订阅专栏

5 篇文章

订阅专栏

本文分享了将JS对象数组成功传递至WebAPI的方法。通过将数据转换为JSON格式，并设置正确的Content-Type，解决了WebAPI接收数据为空的问题。同时，讨论了异步请求对数据传递的影响及解决方案。

WebAPI 接收js传过来的对象数组数据

百度 Google了一整天终于在晚上聊天的时候弄出来了所以得出结论

写代码一定要分心结果才能出来

说一下我的需求
需要将如下图的对象数组传递到webapi那边接收然后进行操作
在这里插入图片描述
思路：

post是肯定的
数组直接传但是始终接收不到可能是技术不够
那就转为json格式传接收格式传在后台接收到的是空数据长度为0
json应该没问题应该是接收有问题挨个去试 string[] string object List… 还是没出来要么null要么0
回过头来看js 突然看到借鉴文档的最后一个 emmm 指定请求的头的Content-Type值
好叭传的是json 但是服务器不知道啊

最后上代码：

$.post({
     url: "https://localhost:44319/api/Home/AddSongList",
     // 转json数据
     data: JSON.stringify(SongList),
     // 就是这里了 contentType属性告诉服务器，我们正在以JSON格式发送数据。
     // 如果检查Ajax请求的头，可以看到Content-Type值设置为application/json.
     contentType: "application/json",
     // dataType: "json",
     // 防止深度序列化
     traditional: true,
     success: function (data) {
         console.log(data)
     }
 })

注意：

[FromBody]
object

[HttpPost]
public string AddSongList([FromBody]object json)
{
    Console.WriteLine(json);
    return "添加成功";
}

顺便提一句
我js提交的数据是由网络上ajax获取到的数据重新拼成的直接使用JSON.stringify 可能后台代码无法获取数据是因为ajax是异步的

解决办法：
Ajax请求从异步改为同步
设置 setTimeout 延迟执行或者把提交到后台的ajax写成回调函数
如下图
addInfo回调方法

由于进行了ajax的嵌套调用最终还是用到了 async/await …
最后呢就是数据成功出来了因为需要遍历调用ajax 一次完整的事件大概调了60来次所以时间消耗…
没办法有别的办法了再优化
在这里插入图片描述
可能还有别的比较好的方法这里只是自己琢磨出来的由好方法可以扣我

借鉴文档：

WebApi如何接收前台传递过来的数组：
https://www.cnblogs.com/guo-xu/p/12147402.html

js 数组、对象转json 以及json转数组、对象：
https://www.cnblogs.com/Im-Victor/p/9431718.html

WebApi FromBody参数：
https://blog.youkuaiyun.com/bafnypeu/article/details/78262684

如何将JSON POST数据作为对象传递给WebAPI方法？：
其中慕桂英4014372 的回答
http://www.imooc.com/wenda/detail/571372