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为例。

[System.Web.Http.HttpPost]
public bool SetTags(int projectId, string account, SetViewTag svt)
{//此为对应前端的请求API:url: "/api/customview/SetTags?projectId=0&account=leftfist"
    List<ViewTag> lisVt = new List<ViewTag>();

    assemblyViewTagList(ref lisVt,svt.Updated,ViewTag.EChangeType.Update);
    assemblyViewTagList(ref lisVt, svt.Deleted, ViewTag.EChangeType.Remove);

    return customViewService.SetTags(projectId,account,lisVt);
}
void assemblyViewTagList(ref List<ViewTag> lisVt,string strJson,ViewTag.EChangeType ctype)
{
    if (strJson.Length == 0) return;

    //JsonConvert.DeserializeObject<> 是Newtonsoft.Json 的方法，作用是将JSON字符串反序列化，转换回JSON对象
    //注意里面的泛型
    List<ViewTag> items = JsonConvert.DeserializeObject<List<ViewTag>>(strJson);
    foreach (ViewTag vt in items)
    {
        vt.ChangeType = (byte)ctype;
        lisVt.Add(vt);
    }
}

public class SetViewTag
{
    public string Updated { get; set; }
    public string Deleted { get; set; }
}
public class ViewTag
{
    public int ViewId { get; set; }
    public string Name { get; set; }
    public bool IsValid { get; set; }
    public int Seq { get; set; }
    public byte ChangeType { get; set; }

    public enum EChangeType : byte { NoChanged = 0,Update,Remove}
}

3、前端接收后端

假设后端有WCF的接口：

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

<span style="font-size:10px;">        /// <summary>
        /// 辅助方法，用于输出流
        /// </summary>
        /// <param name="str"></param>
        /// <returns></returns>
        private Stream GetStream(string str)
        {
            MemoryStream ms = new MemoryStream();
            StreamWriter sw = new StreamWriter(ms);
            sw.AutoFlush = true;
            sw.Write(str);
            ms.Position = 0;
            WebOperationContext.Current.OutgoingResponse.ContentType = "text/plain";
            return ms;
        }</span>

前端则有

function getLocationTime(){
    var url = _webUrl + "/Attendance.svc/GetUTC";
    var xhr;
    xhr = new XMLHttpRequest();
    if (xhr) {
        xhr.onerror = function () { alert("erro"); };
        xhr.ontimeout = function () { alert("Time out"); };
        xhr.onload = function () {
            var data = $.parseJSON(xhr.responseText);
            serverDateTime = new Date();
            serverDateTime.setTime(data.data * 1);

            timeId = window.setInterval(getCalTimes, 1000);
        };
        xhr.open("get", url, true);
        //xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send(null);
    }
    else {
        alert("Failed to create");
    }
}

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

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

3、前端接收后端-2

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

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        // Web API 路由
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{action}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
        config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));//改为JSON方式
    }
}

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