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 Ajax 异步操作之动态添加节点功能
May 24 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
jQuery实现带进度条的轮播图
Sep 13 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脚本数据库功能详解(上)
2006/10/09 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
PHP注释语法规范与命名规范详解篇
2018/01/21 PHP
prototype1.4中文手册
2006/09/22 Javascript
深入理解JavaScript定时机制
2010/10/29 Javascript
jQuery提交多个表单的小例子
2013/06/30 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
解决vue动态为数据添加新属性遇到的问题
2018/09/18 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
python实现在字符串中查找子字符串的方法
2015/07/11 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
python实现对excel进行数据剔除操作实例
2017/12/07 Python
基于Python中单例模式的几种实现方式及优化详解
2018/01/09 Python
Python+matplotlib实现填充螺旋实例
2018/01/15 Python
对于Python深浅拷贝的理解
2019/07/29 Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
python 读取yaml文件的两种方法(在unittest中使用)
2020/12/01 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
野兽派官方旗舰店:THE BEAST 野兽派
2016/08/05 全球购物
AVON雅芳官网:世界上最大的美容化妆品公司之一
2016/11/02 全球购物
澳大利亚在线划船、露营和钓鱼商店:BCF Australia
2020/03/22 全球购物
软件配置管理有什么好处
2015/04/15 面试题
电气工程自动化求职信
2014/03/14 职场文书
企业年会主持词
2014/03/27 职场文书
化工工艺设计求职信
2014/06/25 职场文书
高三英语教学反思
2016/03/03 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
只需要这一行代码就能让python计算速度提高十倍
2021/05/24 Python