jQuery AJAX: 传递JSON对象与contentType应用实例

本文主要介绍了如何在jQuery中使用Ajax技术向服务端发送JSON对象，并关注contentType设置的重要性。首先，我们来看一个基本的使用案例，通常情况下，客户端通过键值对的形式构建数据，并通过POST请求发送至`TestHandler.ashx`。 客户端代码: ```javascript $.ajax({ url: 'TestHandler.ashx', type: 'post', data: { name: "admin", age: 10 }, dataType: 'text', // 指定返回的数据类型为文本 success: function (data) { alert(data); // 成功时弹出接收到的数据 } }) ``` 在客户端发送的POST请求中，数据是以键值对的形式编码为URL编码格式，即"name=admin&age=10"。服务器端可以通过`context.Request["name"]`和`context.Request["age"]`来获取这些参数。 服务端代码（C#）: ```csharp public void ProcessRequest(HttpContext context) { string bodyText = string.Empty; using (var bodyReader = new StreamReader(context.Request.InputStream)) { bodyText = bodyReader.ReadToEnd(); // 读取整个请求体 } string name = context.Request["name"].ToString(); // 通过键获取参数 string age = context.Request["age"].ToString(); // 将接收到的键值对写回响应 context.Response.ContentType = "text/plain"; // 设置响应内容类型 context.Response.Write(bodyText); } ``` 当浏览器查看这次请求时，可以看到原始数据是作为`application/x-www-form-urlencoded`格式传递的。 传递复杂JSON对象到服务端: 对于更复杂的JSON对象，可以将其转换为字符串形式，然后通过POST请求传递。这里介绍了一种方法，即使用`formdata`： ```javascript var user1 = { username: 'admin', age: 10 }; var user2 = { username: 'test', age: 11 }; var userList = [user1, user2]; // JSON对象数组 // 将对象序列化为JSON字符串 var jsonString = JSON.stringify(userList); $.ajax({ url: 'TestHandler.ashx', type: 'post', data: jsonString, contentType: 'application/json', // 需要设置正确的content-type来表明发送的是JSON dataType: 'json', success: function (receivedData) { // 处理接收到的JSON响应 } }) ``` 在上述例子中，客户端设置了`contentType: 'application/json'`，确保服务端能够正确识别并解析JSON数据。服务端在接收到请求后，同样需要解析这个JSON字符串来获取用户对象。 总结起来，jQuery的Ajax方法可以方便地处理JSON对象的传递，但需要确保双方都正确配置了content-type，以便正确解析和交互数据。同时，理解URL编码与JSON序列化的区别，能帮助我们优化数据传输和处理过程。