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 plaincopy

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. assemblyViewTagList(ref lisVt,svt.Updated,ViewTag.EChangeType.Update);
6. assemblyViewTagList(ref lisVt, svt.Deleted, ViewTag.EChangeType.Remove);
7. return customViewService.SetTags(projectId,account,lisVt);
8. }
9. void assemblyViewTagList(ref List<ViewTag> lisVt,string strJson,ViewTag.EChangeType ctype)
10. {
11. if (strJson.Length == 0) return;
12. //JsonConvert.DeserializeObject<> 是Newtonsoft.Json 的方法，作用是将JSON字符串反序列化，转换回JSON对象
13. //注意里面的泛型
14. List<ViewTag> items = JsonConvert.DeserializeObject<List<ViewTag>>(strJson);
15. foreach (ViewTag vt in items)
16. {
17. vt.ChangeType = (byte)ctype;
18. lisVt.Add(vt);
19. }
20. }
21. public class SetViewTag
22. {
23. public string Updated { get; set; }
24. public string Deleted { get; set; }
25. }
26. public class ViewTag
27. {
28. public int ViewId { get; set; }
29. public string Name { get; set; }
30. public bool IsValid { get; set; }
31. public int Seq { get; set; }
32. public byte ChangeType { get; set; }
33. public enum EChangeType : byte { NoChanged = 0,Update,Remove}
34. }

3、前端接收后端

假设后端有WCF的接口：

[csharp] view plaincopy

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 plaincopy

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 plaincopy

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. timeId = window.setInterval(getCalTimes, 1000);
13. };
14. xhr.open("get", url, true);
15. //xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
16. xhr.send(null);
17. }
18. else {
19. alert("Failed to create");
20. }
21. }

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

[javascript] view plaincopy

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 plaincopy

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

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