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 相关文章推荐
网页中CDATA标记的说明
Sep 12 Javascript
JavaScript中的16进制字符(改进)
Nov 21 Javascript
在javascript中执行任意html代码的方法示例解读
Dec 25 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
Jun 18 Javascript
bootstrap-treeview自定义双击事件实现方法
Jan 09 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 Javascript
Angular4学习笔记router的简单使用
Mar 30 Javascript
Vue+Express实现登录状态权限验证的示例代码
May 05 Javascript
Node.js系列之连接DB的方法(3)
Aug 30 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 Javascript
jQuery编写QQ简易聊天框
Aug 27 jQuery
Vue中使用import进行路由懒加载的原理分析
Apr 01 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
十大“创意”战术!
2020/03/04 星际争霸
IStream与TStream之间的相互转换
2008/08/01 PHP
PHP 引用文件技巧
2010/03/02 PHP
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
JQuery简单实现锚点链接的平滑滚动
2015/05/03 Javascript
基于JavaScript实现生成名片、链接等二维码
2015/09/20 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
使用Node.js给图片加水印的方法
2016/11/15 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
2017/07/12 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
python的多重继承的理解
2017/08/06 Python
python简单商城购物车实例代码
2018/03/15 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
Python使用pymysql从MySQL数据库中读出数据的方法
2018/07/25 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
python多线程扫描端口(线程池)
2019/09/04 Python
pytorch+lstm实现的pos示例
2020/01/14 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
函授毕业生的自我鉴定
2013/11/26 职场文书
工作表扬信的范文
2014/01/10 职场文书
小小的船教学反思
2014/02/21 职场文书
家长会学生演讲稿
2014/04/26 职场文书
一体化教学实施方案
2014/05/10 职场文书
面试必备的求职信
2014/05/25 职场文书
网络技术专业求职信
2014/07/13 职场文书
抗洪救灾标语
2014/10/08 职场文书
2014年底工作总结
2014/12/15 职场文书
高中教师个人工作总结
2015/02/10 职场文书
本溪水洞导游词
2015/02/11 职场文书
美丽的大脚观后感
2015/06/03 职场文书
python 调用js的四种方式
2021/04/11 Python