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 相关文章推荐
javascript setTimeout()传递函数参数(包括传递对象参数)
Apr 07 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
Aug 30 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
Oct 13 Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 Javascript
Iscrool下拉刷新功能实现方法(推荐)
Jun 26 Javascript
JavaScript实现计数器基础方法
Oct 10 Javascript
node.js博客项目开发手记
Mar 16 Javascript
webpack多入口多出口的实现方法
Aug 17 Javascript
electron + vue项目实现打印小票功能及实现代码
Nov 25 Javascript
vue插件draggable实现拖拽移动图片顺序
Dec 01 Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 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
PHP 生成N个不重复的随机数
2015/01/21 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
PHP设计模式之单例模式定义与用法分析
2019/03/26 PHP
JavaScript 学习笔记(六)
2009/12/31 Javascript
jQuery入门知识简介
2010/03/04 Javascript
js获取input标签的输入值实现代码
2013/08/05 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
JavaScript中Cookies的相关使用教程
2015/06/04 Javascript
jQuery子元素过滤选择器用法示例
2016/09/09 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
老生常谈原生JS执行环境与作用域
2016/11/22 Javascript
激动人心的 Angular HttpClient的源码解析
2017/07/10 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
2017/07/13 Javascript
async/await地狱该如何避免详解
2018/05/10 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python中多线程及程序锁浅析
2015/01/21 Python
python3实现暴力穷举博客园密码
2016/06/19 Python
python selenium firefox使用详解
2019/02/26 Python
Python使用ffmpy将amr格式的音频转化为mp3格式的例子
2019/08/08 Python
Python获取excel内容及相关操作代码实例
2020/08/10 Python
python将数据插入数据库的代码分享
2020/08/16 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
天猫精选:上天猫,就够了
2016/09/21 全球购物
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
婚前协议书
2014/04/15 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
外联部演讲稿
2014/05/24 职场文书
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
个人党性锻炼总结
2015/03/05 职场文书