jQuery使用ajax传递json对象到服务端及contentType的用法示例


Posted in jQuery onMarch 12, 2020

本文实例讲述了jQuery使用ajax传递json对象到服务端及contentType的用法。分享给大家供大家参考,具体如下:

0、一般情况下,通过键值对的方式将参数传递到服务端

0.1 客户端代码:

$.ajax({
 url: 'TestHandler.ashx',
 type: 'post',
 data: {
  name: "admin",
  age: 10
 },
 dataType: 'text',
 success: function (data) {
  alert(data);
 }
})

0.2 服务端代码:

public void ProcessRequest(HttpContext context)
{
 string bodyText = string.Empty;
 using (var bodyReader = new System.IO.StreamReader(context.Request.InputStream))
 {
  bodyText = bodyReader.ReadToEnd();
 }

 string name= context.Request["name"].ToString();// "admin"
 string age = context.Request["age"].ToString();// "10"

 context.Response.ContentType = "text/plain";
 context.Response.Write(bodyText);// "name=admin&age=10"
}

0.3 在浏览器的网络中查看此次请求:

jQuery使用ajax传递json对象到服务端及contentType的用法示例

从上面的截图中可以看出,post请求,是将formdata中键值对用符号“&”相连,拼接成一个字符串,传递到服务端,服务端可以通过key来获取值,或从request的body中读取整个字符串;

1、ajax 传递复杂json对象到服务端

1.1 方法一:通过formdata传值,服务端通过key获取值;

客户端代码:

var user1 = {
 username: 'admin',
 age: 10
};
var user2 = {
 username: 'test',
 age: 11
};
var userArr = [];
userArr.push(user1);
userArr.push(user2);

$.ajax({
 url: 'TestHandler.ashx',
 type: 'post',
 //contentType: 'application/json',
 //contentType:"application/x-www-form-urlencoded; charset=UTF-8",
 data: {
  Users: JSON.stringify(userArr)
 },
 dataType: 'text',
 success: function (data) {
  alert(data);
 }
})

服务端代码:

public void ProcessRequest(HttpContext context)
{
 string contentType= context.Request.ContentType;// "application/x-www-form-urlencoded; charset=UTF-8"

 string users = context.Request["Users"].ToString();
 dynamic obj = JsonConvert.DeserializeObject(users);

 context.Response.ContentType = "text/plain";
 context.Response.Write(obj[0].username);// "admin"
}

1.2 方法二:通过formdata方式传值,服务端读取Request.InputStream;

前端代码:

var user1 = { username: 'admin', age: 10 };
var user2 = { username: 'test', age: 11 };
var userArr = [];
userArr.push(user1);
userArr.push(user2);

$.ajax({
 url: 'TestHandler.ashx',
 type: 'post',
 //contentType: 'application/json',
 //contentType:"application/x-www-form-urlencoded; charset=UTF-8",
 data: JSON.stringify(userArr),
 dataType: 'text',
 success: function (data) {
  alert(data);
 }
})

服务端代码:

public void ProcessRequest(HttpContext context)
{
 string contentType= context.Request.ContentType;//"application/x-www-form-urlencoded; charset=UTF-8"
 string bodyText = string.Empty;
 using (var bodyReader = new System.IO.StreamReader(context.Request.InputStream))
 {
  bodyText = bodyReader.ReadToEnd();// [{"username":"admin","age":10},{"username":"test","age":11}]
 }

 dynamic obj = JsonConvert.DeserializeObject(bodyText);

 context.Response.ContentType = "text/plain";
 context.Response.Write(obj[0].username);// "admin"
}

通过浏览器查看此次请求:
jQuery使用ajax传递json对象到服务端及contentType的用法示例

从图中可以看出,content-Type 为application/x-www-form-urlencoded,所以浏览器尝试将传输的数据解析成key-value的形式,但实际在ajax中的data中设置的是一个json字符串,无法解析成key-value的形式,故在服务端无法通过key来获取值;只能从Request.InputStream获取。
虽然通过Request.InputStream也能获取到想要的数据,但是在asp.net mvc项目中,还是有些点需要注意,下面我们去mvc项目中试下...

2、content-Type 对asp.net mvc项目的重要性

注:示例中服务端用的是 asp.net ApiController,如果使用普通的mvc controller,还有其他解决方案;

2.1 客户端代码:

var user1 = { username: 'admin', age: 10 };
var user2 = { username: 'test', age: 11 };
var userArr = [];
userArr.push(user1);
userArr.push(user2);

$.ajax({
 url: 'Test/PostUsers',
 type: 'post',
 data: JSON.stringify(userArr),
 dataType: 'text',
 success: function (data) {
  alert(data);
 }
})

2.2 服务端代码:

public class TestController : ApiController
{
 public string PostUsers( List<User> Users)
 {
  return Users.Count.ToString();// 0
 }
}
public class User
{
 public string username { get; set; }
 public int age { get; set; }

}

上面的代码中,客户端发送的是个json字符串,服务端中的变量Users是无法获取到前端传过来的json信息的;
那前端如何发送数据,后端就能这样获取数据呢?

2.3 解决方案:(设置contentType

var user1 = { username: 'admin', age: 10 };
var user2 = { username: 'test', age: 11 };
var userArr = [];
userArr.push(user1);
userArr.push(user2);

$.ajax({
 url: 'Test/PostUsers',
 type: 'post',
 contentType: 'application/json',
 //contentType:"application/x-www-form-urlencoded; charset=UTF-8",
 data: JSON.stringify(userArr),
 //dataType: 'text',
 success: function (data) {
  alert(data);// 2
 }
})

可以看出,ajax中添加了contentType设置;
jq的ajax中,contentType 主要设置你发送给服务器的格式,dataType设置你收到服务器数据的格式。
在http 请求中,get 和 post 是最常用的。在 jquery 的 ajax 中, contentType都是默认的值:application/x-www-form-urlencoded,这种格式的特点就是,name/value 成为一组,每组之间用 & 联接,而 name与value 则是使用 = 连接。如: wwwh.baidu.com/q?key=fdsa&lang=zh 这是get , 而 post 请求则是使用请求体,参数不在 url 中,在请求体中的参数表现形式也是: key=fdsa&lang=zh的形式。
键值对这样组织在一般的情况下是没有什么问题的,但是如果想传递复杂的json,可以将contentType设置为application/json,我们在 ajax 传递复杂JSON数据时,用 JSON.stringify序列化后,然后发送,在服务器端接到然后用 JSON.parse 进行还原就行了,这样就能处理复杂的对象了。

2.4 其他的解决方案:(修改服务端代码)

方法一:直接读取Request.Content的值,然后反序列化;

public class TestController : ApiController
{
 //[Route("ddd")]
 //[HttpPost]
 public string PostUsers( )
 {
  string str = Request.Content.ReadAsStringAsync().Result;//[{"username":"admin","age":10},{"username":"test","age":11}]
  var users = JsonConvert.DeserializeObject<List<User>>(str);
  return users.Count.ToString();
 }
}
public class User
{
 public string username { get; set; }
 public int age { get; set; }
}

方法二:服务端使用普通的mvc控制器,前端使用key-value传值;

var user1 = { username: 'admin', age: 10 };
var user2 = { username: 'test', age: 11 };
var userArr = [];
userArr.push(user1);
userArr.push(user2);

$.ajax({
 url: 'Test1/PostUsers',
 type: 'post',
 data: { Users: userArr },
 success: function (data) {
  alert(data); // 2
 }
})
public class Test1Controller : Controller
{
 public string PostUsers( List<User> Users)
 {
  return Content(Users.Count.ToString());// 2
 }
}
public class User
{
 public string username { get; set; }
 public int age { get; set; }

}

通过浏览器查看该请求:
jQuery使用ajax传递json对象到服务端及contentType的用法示例

方法三:服务端使用普通的mvc控制器,前端使用key-value传值,value值要json化;

var user1 = { username: 'admin', age: 10 };
var user2 = { username: 'test', age: 11 };
var userArr = [];
userArr.push(user1);
userArr.push(user2);

$.ajax({
 url: 'Test1/PostUsers',
 type: 'post',
 data: { Users:JSON.stringify(userArr) },
 success: function (data) {
  alert(data); // 2
 }
})
public class Test1Controller : Controller
{
 public ActionResult PostUsers()
 {
  string str = Request["Users"].ToString();
  var us = JsonConvert.DeserializeObject<List<User>>(str);
  return Content(us.Count.ToString());// 2
 }
}

更多关于jQuery相关内容可查看本站专题:《jquery中Ajax用法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
Jquery $.map使用方法实例详解
Sep 01 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
jQuery treeview树形结构应用
Mar 24 jQuery
jquery实现烟花效果(面向对象)
Mar 10 #jQuery
jquery实现垂直手风琴菜单
Mar 04 #jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 #jQuery
jquery实现直播视频弹幕效果
Feb 25 #jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 #jQuery
jquery实现的放大镜效果示例
Feb 24 #jQuery
jquery向后台提交数组的代码分析
Feb 20 #jQuery
You might like
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
PHP基于递归算法解决兔子生兔子问题
2018/05/11 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
JS 有名函数表达式全面解析
2010/03/19 Javascript
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
js点击选择文本的方法
2015/02/09 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
JS控制伪元素的方法汇总
2016/04/06 Javascript
JavaScipt选取文档元素的方法(推荐)
2016/08/05 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
vue设置默认首页的操作
2020/08/12 Javascript
JS实现手风琴特效
2020/11/08 Javascript
用vue设计一个日历表
2020/12/03 Vue.js
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
Python与Redis的连接教程
2015/04/22 Python
浅析PEP572: 海象运算符
2019/10/15 Python
原来我一直安装 Python 库的姿势都不对呀
2019/11/11 Python
python实现简单井字棋小游戏
2020/03/05 Python
Python图像读写方法对比
2020/11/16 Python
详解Python 中的 defaultdict 数据类型
2021/02/22 Python
python如何实现递归转非递归
2021/02/25 Python
Java面试中常遇到的问题,也是需要注意的几点
2013/08/30 面试题
描述RIP和OSPF区别以及特点
2015/01/17 面试题
社区庆中秋节活动方案
2014/02/07 职场文书
商学院大学生求职的自我评价
2014/03/12 职场文书
血轮眼轮回眼特效 html+css
2021/03/31 HTML / CSS
Python机器学习三大件之一numpy
2021/05/10 Python