JSON参数- 前端开发 - JXASP源码网

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
[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的接口：

[csharp]view plaincopy
<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>  

[csharp]view plaincopy
<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>  

前端则有

[javascript]view plaincopy
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，可以：

[javascript]view plaincopy
$.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里加入一句：

[csharp]view plaincopy
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方式  
    }  
}  