目錄
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
}
}