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 相关文章推荐
匹配任意字符的正则表达式写法
Apr 29 Javascript
window.location.href IE下跳转失效的解决方法
Mar 27 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
Apr 21 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
May 27 Javascript
Vue.js -- 过滤器使用总结
Feb 18 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
Feb 28 Javascript
nuxt.js 缓存实践
Jun 25 Javascript
史上最为详细的javascript继承(推荐)
May 18 Javascript
JavaScript如何判断input数据类型
Feb 06 Javascript
小程序分享链接onShareAppMessage的具体用法
May 22 Javascript
Vue3.0的优化总结
Oct 16 Javascript
javascript拖曳互换div的位置实现示例
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
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
php获取$_POST同名参数数组的实现介绍
2013/06/30 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
js中的push和join方法使用介绍
2013/10/08 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
在ASP.NET中使用JavaScript脚本的方法
2013/11/12 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
2013/11/19 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
第一个Vue插件从封装到发布
2017/11/22 Javascript
微信小程序实现倒计时调用相机自动拍照功能
2018/06/10 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
vue-week-picker实现支持按周切换的日历
2019/06/26 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
centos7之Python3.74安装教程
2019/08/15 Python
python pillow模块使用方法详解
2019/08/30 Python
Python中有几个关键字
2020/06/04 Python
python 获取字典键值对的实现
2020/11/12 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
英国玛莎百货美国官网:Marks & Spencer美国
2018/11/06 全球购物
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
nohup的用法
2012/11/26 面试题
新学期开学标语2015
2015/07/16 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书
导游词之沈阳植物园
2019/11/30 职场文书
bootstrapv4轮播图去除两侧阴影及线框的方法
2022/02/15 HTML / CSS
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS