jQuery向webApi提交post json数据


Posted in Javascript onJanuary 16, 2017

在页面想webApi post json数据的时候,发现webapi不能直接以json的方式接受数据(注:我是没有发现一个很好的方式来post json数据的);但是可以以数据结构的方式传递;

如下:

//js代码 
          var d = {
          Id: "1",
          Name: "name",
          Value: "OldValue", 7         };
        $.ajax({
          type: "post",
          url: url1,
          data: JSON.stringify({
            pConfig: d
          }),
          success:function(d){
          }
        });
public class Diff
  {
    public string Id { set; get; }
    public string Name { set; get; }
    public string Value { set; get; }
  }
 public Diff post([FromBody]Diff pConfig)
    {
      List<DiffConfig> s = pConfig;
      return s;
    }

像这样的代码是没有问题的;得到的是一个标准结构的数据;

但是如果改为下面的代码,就会发现没有数据

//js代码 
         var d = [{
           Id: "1",
           Name: "name",
           Value: "Value",
         },{
           Id: "2",
           Name: "name2",
           Value: "Value2",
         }];
         $.ajax({
          type: "post",
          url: url1,
           data: JSON.stringify({
             pConfig: d
          }),
           success:function(d){
         }
        });
public List<Diff> post([FromBody]List<Diff> diff)
     {
       List<Diff> d = diff;
       return d;
     }

这样的代码会发现,数据没有传过来,后面才发现,原来jq的ajax传输数据类型有问题;传输的数据类型contentType的默认值为 "application/x-www-form-urlencoded"。默认值适合大多数情况。但是却不能适应这次传输的值,把   contentType: 'application/json' 设置一下,就可以ok了;数据传输完全没有问题;

$.ajax({
      type: "post",
      dataType: 'json',
      url: url,
      contentType: 'application/json',
      data: JSON.stringify(d),
      success: function (d) {
       
      }
    });

以上所述是小编给大家介绍的jQuery向webApi提交post json数据,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS Range HTML文档/文字内容选中、库及应用介绍
May 12 Javascript
按钮接受回车事件的三种实现方法
Jun 06 Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 Javascript
微信小程序学习之数据处理详解
Jul 05 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
如何抽象一个Vue公共组件
Oct 17 Javascript
JavaScript模块模式实例详解
Oct 25 Javascript
简单通过settimeout看javascript的运行机制
May 10 Javascript
JavaScript多种图形实现代码实例
Jun 28 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
Jan 16 #Javascript
jQuery插件扩展操作入门示例
Jan 16 #Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 #Javascript
js实现带缓动动画的导航栏效果
Jan 16 #Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 #Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 #Javascript
JavaScript日期选择功能示例
Jan 16 #Javascript
You might like
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
收音机的保养
2021/03/01 无线电
解析php curl_setopt 函数的相关应用及介绍
2013/06/17 PHP
php ios推送(代码)
2013/07/01 PHP
浅谈Eclipse PDT调试PHP程序
2014/06/09 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
Prototype最新版(1.5 rc2)使用指南(1)
2007/01/10 Javascript
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
Three.js学习之网格
2016/08/10 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
Bootstrap响应式表格详解
2017/05/23 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
详解Webpack loader 之 file-loader
2018/11/07 Javascript
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
利用python实现命令行有道词典的方法示例
2017/01/31 Python
Python使用三种方法实现PCA算法
2017/12/12 Python
python实现小球弹跳效果
2019/05/10 Python
用python中的matplotlib绘制方程图像代码
2019/11/21 Python
如何在python中执行另一个py文件
2020/04/30 Python
css3 media 响应式布局的简单实例
2016/08/03 HTML / CSS
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
关于工资低的辞职信
2014/01/14 职场文书
空乘英文求职信
2014/04/13 职场文书
医学求职自荐信
2014/06/21 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
教师节慰问信
2015/02/15 职场文书
运动会表扬稿范文
2015/05/05 职场文书
对Golang中的FORM相关字段理解
2021/05/02 Golang
详解JAVA中的OPTIONAL
2021/06/14 Java/Android
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android