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 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
jQuery实现简单评论区功能
Oct 26 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
php app支付宝回调(异步通知)详解
2018/07/25 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
JavaScript 解析读取XML文档 实例代码
2009/07/07 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
2015/02/03 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
2016/09/04 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
详解webpack性能优化——DLL
2017/10/20 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
KMP算法精解及其Python版的代码示例
2016/06/01 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
Python使用scrapy爬取阳光热线问政平台过程解析
2019/08/14 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
解决pymysql cursor.fetchall() 获取不到数据的问题
2020/05/15 Python
Python使用Pygame绘制时钟
2020/11/29 Python
关于前端上传文件全面基础扫盲贴(入门)
2019/08/01 HTML / CSS
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
美国台面电器和厨具品牌:KitchenAid
2019/04/12 全球购物
采购人员的个人自我评价
2014/01/16 职场文书
优秀教师事迹简介
2014/02/02 职场文书
争先创优活动总结
2014/08/27 职场文书
如何签定毕业生就业协议书
2014/09/28 职场文书
餐饮服务食品安全承诺书
2015/04/29 职场文书
治庸问责工作总结
2015/08/11 职场文书
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript