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 相关文章推荐
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
JQuery复选框全选效果如何实现
May 08 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 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
数据库中排序的对比及使用条件详解
2012/02/23 PHP
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
PHP CodeIgniter分页实例及多条件查询解决方案(推荐)
2017/05/20 PHP
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
javascript获取form里的表单元素的示例代码
2014/02/14 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
2016/09/09 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
js时间戳和c#时间戳互转方法(推荐)
2017/02/15 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
详解react服务端渲染(同构)的方法
2017/09/21 Javascript
微信小程序之GET请求的实例详解
2017/09/29 Javascript
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
angularJS自定义directive之带参方法传递详解
2018/10/09 Javascript
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
AngularJS动态生成select下拉框的方法实例
2019/11/17 Javascript
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
python 图片验证码代码分享
2012/07/04 Python
Django admin美化插件suit使用示例
2017/12/12 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
Python判断一个文件夹内哪些文件是图片的实例
2018/12/07 Python
分享PyCharm的几个使用技巧
2019/11/10 Python
python 项目目录结构设置
2020/02/14 Python
Python如何存储数据到json文件
2020/03/09 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
检测浏览器对HTML5和CSS3支持度的方法
2015/06/25 HTML / CSS
美国排名第一的在线葡萄酒商店:Wine.com
2016/09/07 全球购物
Booking.com英国官网:全球酒店在线预订网站
2018/04/21 全球购物
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
师德师风自我剖析材料
2014/09/27 职场文书
资料员岗位职责范本
2015/04/13 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
入党积极分子党支部意见
2015/06/02 职场文书
SpringBoot使用ip2region获取地理位置信息的方法
2022/06/21 Java/Android