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 相关文章推荐
快速解决jquery之get缓存问题的最简单方法介绍
Dec 19 Javascript
JS记录用户登录次数实现代码
Jan 15 Javascript
javascript每日必学之继承
Feb 23 Javascript
基于javascript实现九宫格大转盘效果
May 28 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
Aug 23 Javascript
利用jQuery实现一个简单的表格上下翻页效果
Mar 14 Javascript
JavaScript模块模式实例详解
Oct 25 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
Jul 18 Javascript
vue中的router-view组件的使用教程
Oct 23 Javascript
jqGrid表格底部汇总、合计行footerrow处理
Aug 21 Javascript
vue中监听返回键问题
Aug 28 Javascript
jquery添加div实现消息聊天框
Feb 08 jQuery
详解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
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
php中rename函数用法分析
2014/11/15 PHP
php支付宝接口用法分析
2015/01/04 PHP
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
利用php-cli和任务计划实现订单同步功能的方法
2017/05/03 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
jquery 问答知识整理
2010/02/11 Javascript
jquery学习笔记二 实现可编辑的表格
2010/04/09 Javascript
细说浏览器特性检测(2)-通用事件检测
2010/11/05 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
基于node简单实现RSA加解密的方法步骤
2019/03/21 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
2019/09/25 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
Node.js fs模块原理及常见用途
2020/10/22 Javascript
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
pandas 读取各种格式文件的方法
2018/06/22 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
2020/06/11 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
Chain Reaction Cycles芬兰:世界上最大的在线自行车商店
2017/12/06 全球购物
建筑工地门卫岗位职责
2014/04/30 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
2016见义勇为事迹材料汇总
2016/03/01 职场文书
2016年教代会开幕词
2016/03/04 职场文书