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和JQuery实用代码片段(一)
Apr 07 Javascript
jquery 查找新建元素代码
Jul 06 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
Aug 01 Javascript
node.js中的fs.open方法使用说明
Dec 17 Javascript
Javascript基础教程之数组 array
Jan 18 Javascript
javascript实现限制上传文件大小
Feb 06 Javascript
javascript实现手机震动API代码
Aug 05 Javascript
javascript实现粘贴qq截图功能(clipboardData)
May 29 Javascript
webpack2.0搭建前端项目的教程详解
Apr 05 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 Javascript
使用vue实现一个电子签名组件的示例代码
Jan 06 Javascript
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
详解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生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
PHP中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
PHP获取MAC地址的函数代码
2011/09/11 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
jquery 页面全选框实践代码
2010/04/02 Javascript
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
2016/11/22 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
小程序从手动埋点到自动埋点的实现方法
2019/01/24 Javascript
JavaScript刷新页面的几种方法总结
2019/03/28 Javascript
Angular实现svg和png图片下载实现
2019/05/05 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
谈谈IntersectionObserver懒加载的具体使用
2019/10/15 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
[01:33:25]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第一场 1月24日
2021/03/11 DOTA
python实现的防DDoS脚本
2011/02/08 Python
详解Python中的元组与逻辑运算符
2015/10/13 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
python实现word文档批量转成自定义格式的excel文档的思路及实例代码
2020/02/21 Python
在Django中自定义filter并在template中的使用详解
2020/05/19 Python
python数据类型强制转换实例详解
2020/06/22 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
瑞典多品牌连锁店:Johnells
2021/01/13 全球购物
C#如何判断当前用户是否输入某个域
2015/12/07 面试题
关于祖国的演讲稿
2014/05/04 职场文书
汽车转让协议书范本
2014/12/07 职场文书
先进班集体申报材料
2014/12/26 职场文书
python tkinter模块的简单使用
2021/04/07 Python
anaconda python3.8安装后降级
2021/06/11 Python
javascript函数式编程基础
2021/09/15 Javascript
python manim实现排序算法动画示例
2022/08/14 Python