jq 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 在浏览器的网络中查看此次请求:
从上面的截图中可以看出,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"
}
通过浏览器查看此次请求:
从图中可以看出,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; }
}
通过浏览器查看该请求:
方法三:服务端使用普通的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
}
}
jq ajax传递json对象到服务端及contentType的用法的更多相关文章
- ajax 传递JSON对象参数
https://msdn.microsoft.com/zh-cn/library/cc836466(v=vs.94).aspx https://msdn.microsoft.com/zh-cn/lib ...
- 原生态ajax 传递json参数到服务器端
案例说明:通过ajax将用户名和密码以json形式传递给服务器端,然后服务器端接受数据,进行处理返回json数据到前端 首先,在客户端,通过JavaScript脚本将页面表单数据封装成JSON格式.L ...
- Ajax(form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传)
form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multi ...
- ajax获取json对象
ajax获取json对象 ajax获取json数据,都是一个原理,设置response 的Content-Type:application/json,这样浏览器自动会解析为json对象 $result ...
- Ajax传递json数据简介和一个需要注意的小问题
Ajax传递json数据 Ajax操作与json数据格式在实际中的运用十分广泛,本文为大家介绍一个两者相结合的小案例: 项目结构 我们新建一个Django项目,在里面创建一个名为app01的应用: p ...
- 用ajax传递json,返回前台的中文乱码问题
java项目中用ajax传递json,返回前台时中文出现问号(乱码问题)的解决办法 首先看一下没有解决前的状态: 我用的框架是ssm,在springMVC中我配置了编码格式为utf-8,每个jsp页面 ...
- boke例子: freermarker:在使用ajax传递json数据的时候多出冒号
boke例子: freermarker:在使用ajax传递json数据的时候多出冒号 json数据是用JSON.stringify()格式化的数据,然后用ajax传递,发现数据多出一个冒号:, 后来度 ...
- html拼接时onclick事件传递json对象
Bootstrap Table 中拼装onclick传递json对象会造成[object,object]错误,反正各种传值不成功, 应该是因为json对象中的‘’‘’引号冲突吧,直接把json对象转成 ...
- jQuery调用WCF服务传递JSON对象
下面这个示例使用了WCF去创建一个服务端口从而能够被ASP.Net页面通过jQuery的AJAX方法访问,我们将在客户端使用Ajax技术来 与WCF服务进行通信.这里我们仅使用jQuery去连接Web ...
随机推荐
- 如何在 Centos7 中使用阿里云的yum源
如何在 Centos7 中使用阿里云的yum源 1. 备份原来的yum源 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Ba ...
- 【Android】Jetpack中的ViewModel:自动保存页面数据
目录 ViewModel 简介 ViewModel的使用方法 ViewModel 简介 ViewModel 允许数据在配置更改(如屏幕旋转)后仍然存在,使用 ViewModel 可以免去开发者花费 ...
- Mybatis整合Spring 使用
1.继承通用的Mapper<T>,必须指定泛型<T> 例如下面的例子: public interface UserInfoMapper extends Mapper<Us ...
- 深入了解String和intern
引言 在 JAVA 语言中有8中基本类型和一种比较特殊的类型String.这些类型为了使他们在运行过程中速度更快,更节省内存,都提供了一种常量池的概念.常量池就类似一个JAVA系统级别提供的缓存. 8 ...
- mysql中left join right join inner join用法分析
mysql数据库中的关联查询,基本都会用到left join,right join,inner join等查询方式,今天来说说这三种用法的区别 1.创建表test1,test2,插入测试数据 #创建表 ...
- 一文搞懂 Prometheus 的直方图
原文链接:一文搞懂 Prometheus 的直方图 Prometheus 中提供了四种指标类型(参考:Prometheus 的指标类型),其中直方图(Histogram)和摘要(Summary)是最复 ...
- 初试kafka消息队列中间件一 (只适合初学者哈)
初试kafka消息队列中间件一 今天闲来有点无聊,然后就看了一下关于消息中间件的资料, 简单一点的理解哈,网上都说的太高大上档次了,字面意思都想半天: 也就是用作消息通知,比如你想告诉某某你喜欢他,或 ...
- 统计学习方法—SVM推导
目录 SVM 1. 定义 1.1 函数间隔和几何间隔 1.2 间隔最大化 2. 线性可分SVM 2.1 对偶问题 2.2 序列最小最优算法(SMO) 3. 线性不可分SVM 3.1 松弛变量 3.2 ...
- EFCore + MySql codeFirst 迁移 Migration出现的问题
第二次使用Migration update-database的时候出现以下错误: System.NotImplementedException: The method or operation is ...
- (八)c#Winform自定义控件-分割线
前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. 开源地址:https://gitee.com/kwwwvagaa/net_winform_custom_control ...