本文例項講述了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 在瀏覽器的網路中檢視此次請求：

從上面的截圖中可以看出，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',//contentType: 'application/json',//contentType:"application/x-www-form-urlencoded; charset=UTF-8",data: {
  Users: JSON.stringify(userArr)
 },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',data: JSON.stringify(userArr),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: 11 };
var userArr = [];
userArr.push(user1);
userArr.push(user2);

$.ajax({
 url: 'Test/PostUsers',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',contentType: 'application/json',//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":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: 11 };
var userArr = [];
userArr.push(user1);
userArr.push(user2);

$.ajax({
 url: 'Test1/PostUsers',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',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程式設計有所幫助。