JSON参数

JSON(JavaScript Object Notation，JavaScript 对象表示法），多么简单，不就是键值对嘛。

可是每次在前后端之间通过json作为参数传递，我都心烦意乱，甚至吓到面无人色。

何故？因为没搞懂咯。

现在也是一知半解。是时候做一个总结了。

1、前端传送给后端

$.ajax({
    url: "/api/customview/SetTags?projectId=0&account=leftfist",
    data: JSON.stringify(jsonObj),//这个JSON.stringify函数是js自带的，作用是将JSON对象序列化为字符串
    dataType: "json",
    type: "POST",
    contentType: "application/json; charset=utf-8",
    success: function (data) {//成功后回调函数
    	alert(data);
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        alert(textStatus + ": " + errorThrown);
    }
});

上述例子中，URL含有参数，但json对象不在这些参数中。而是以提交的方式，放在消息体里面传送。http协议，前端到后端，是由请求行 + 请求报头 + 消息正文组成的，后端到前端，是由响应行 + 相应报头 + 消息正文组成。我估计，json对象，即放在消息正文中。

2、后端接收前端

后端，我这里以asp.net web api为例。

[csharp]  view plain copy

1. [System.Web.Http.HttpPost]  
2. public bool SetTags(int projectId, string account, SetViewTag svt)  
3. {//此为对应前端的请求API:url: "/api/customview/SetTags?projectId=0&account=leftfist"  
4.     List<ViewTag> lisVt = new List<ViewTag>();  
5.   
6.     assemblyViewTagList(ref lisVt,svt.Updated,ViewTag.EChangeType.Update);  
7.     assemblyViewTagList(ref lisVt, svt.Deleted, ViewTag.EChangeType.Remove);  
8.   
9.     return customViewService.SetTags(projectId,account,lisVt);  
10. }  
11. void assemblyViewTagList(ref List<ViewTag> lisVt,string strJson,ViewTag.EChangeType ctype)  
12. {  
13.     if (strJson.Length == 0) return;  
14.   
15.     //JsonConvert.DeserializeObject<> 是Newtonsoft.Json 的方法，作用是将JSON字符串反序列化，转换回JSON对象  
16.     //注意里面的泛型  
17.     List<ViewTag> items = JsonConvert.DeserializeObject<List<ViewTag>>(strJson);  
18.     foreach (ViewTag vt in items)  
19.     {  
20.         vt.ChangeType = (byte)ctype;  
21.         lisVt.Add(vt);  
22.     }  
23. }  
24.   
25. public class SetViewTag  
26. {  
27.     public string Updated { get; set; }  
28.     public string Deleted { get; set; }  
29. }  
30. public class ViewTag  
31. {  
32.     public int ViewId { get; set; }  
33.     public string Name { get; set; }  
34.     public bool IsValid { get; set; }  
35.     public int Seq { get; set; }  
36.     public byte ChangeType { get; set; }  
37.   
38.     public enum EChangeType : byte { NoChanged = 0,Update,Remove}  
39. }  

3、前端接收后端

假设后端有WCF的接口：

[csharp]  view plain copy

1. <span style="font-size:10px;">        static readonly DateTime dtZone = new DateTime(1970, 1, 1, 0, 0, 0);  
2.         public Stream GetUTC()  
3.         {  
4.             DateTime utc = DateTime.Now.ToUniversalTime();  
5.             return GetStream(String.Format(@"{{""data"":""{0}""}}", (long)utc.Subtract(dtZone).TotalMilliseconds));  
6.         }</span>  

[csharp]  view plain copy

1. <span style="font-size:10px;">        /// <summary>  
2.         /// 辅助方法，用于输出流  
3.         /// </summary>  
4.         /// <param name="str"></param>  
5.         /// <returns></returns>  
6.         private Stream GetStream(string str)  
7.         {  
8.             MemoryStream ms = new MemoryStream();  
9.             StreamWriter sw = new StreamWriter(ms);  
10.             sw.AutoFlush = true;  
11.             sw.Write(str);  
12.             ms.Position = 0;  
13.             WebOperationContext.Current.OutgoingResponse.ContentType = "text/plain";  
14.             return ms;  
15.         }</span>  

前端则有

[javascript]  view plain copy

1. function getLocationTime(){  
2.     var url = _webUrl + "/Attendance.svc/GetUTC";  
3.     var xhr;  
4.     xhr = new XMLHttpRequest();  
5.     if (xhr) {  
6.         xhr.onerror = function () { alert("erro"); };  
7.         xhr.ontimeout = function () { alert("Time out"); };  
8.         xhr.onload = function () {  
9.             var data = $.parseJSON(xhr.responseText);  
10.             serverDateTime = new Date();  
11.             serverDateTime.setTime(data.data * 1);  
12.               
13.             timeId = window.setInterval(getCalTimes, 1000);  
14.         };  
15.         xhr.open("get", url, true);  
16.         //xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  
17.         xhr.send(null);  
18.     }  
19.     else {  
20.         alert("Failed to create");  
21.     }                 
22. }  

前端这里使用了 XMLHttpRequest()，主要是照顾IE。如果用纯ajax，可以：

[javascript]  view plain copy

1. $.ajax({    
2.     url: _webUrl + "/Attendance.svc/GetUTC";,    
3.     type: "GET",    
4.     success: function (data) {//成功后回调函数    
5.         //假如这个data是json字符串，则 obj 得到json对象  
6.         var obj = eval("(" + data + ")");  
7.     },    
8.     error: function (XMLHttpRequest, textStatus, errorThrown) {    
9.         alert(textStatus + ": " + errorThrown);    
10.     }    
11. });    

3、前端接收后端-2

asp.net web api 默认的结果传送方式是XML。但可以设置为JSON。方法为在WebApiConfig里加入一句：

[csharp]  view plain copy

1. public static class WebApiConfig  
2. {  
3.     public static void Register(HttpConfiguration config)  
4.     {  
5.         // Web API 路由  
6.         config.MapHttpAttributeRoutes();  
7.   
8.         config.Routes.MapHttpRoute(  
9.             name: "DefaultApi",  
10.             routeTemplate: "api/{controller}/{action}/{id}",  
11.             defaults: new { id = RouteParameter.Optional }  
12.         );  
13.         config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));//改为JSON方式  
14.     }  
15. }  

如此，在服务端那些List<>之类只有服务端才能明白的东西，在前端接收到时一律是JSON。