Json在前臺與後臺之間的使用

 1、將前臺數據，使用ajax中的post、get傳到後臺

一、生成JSON字符串

1.1在前臺頁面生成JSON

 

<label>無錫</label><input type="checkbox" name="city" value="無錫" />
    <label>蘇州</label><input type="checkbox" name="city" value="蘇州" />
    <label>江蘇省</label><input type="checkbox" name="province" value="江蘇省" />
    <input type="button" name="btn" value="點擊查看" id='btn_query'/>

HTML代碼

 $("#btn_query").click(function () {
     var citys=[];
     $("input[name='city']:checked").each(function () {     
         var options={};
     if(this.value!=""){     
         options.city=this.value;
              citys.push(options);         
          }
     });                      
 });

JS代碼聲明數組，將數組當成JSON對象

 

    <input name="name" type="text" id="name" value="" />
    <input type="text" name="name" value="" id="email" />
    <input type="text" name="name" value="" id="tel" />
    <input type="text" name="name" value="" id="memo" />

HTML代碼　

            var data = new Object;
            data.name = document.getElementById('name').value;
            data.email = document.getElementById('email').value;
            data.tel = document.getElementById('tel').value;
            data.memo = document.getElementById('memo').value;
            var str = JSON.stringify(data);

JS聲明對象，再講對象轉換成JSON

 

$.ajax({
    type: 'post',
    url: 'your url',
    data: JSON.stringify(citys),//這裏的citys 第一段JS代碼中的city（JS數組）
    success: function(data) {     
若是是form提交，能夠使用$("form").serialize()來說表單內的內容，轉換成String。
　　　　 //serialize方法，是jQuery中序列化方法。
  } });
//ajax的簡便使用
$.post("url",{id:123},function(data){
　　alert(data)
});
{id:123} 就是一個json
$.get("url","age=23&name=vichin",function(data){
　　alert(data)
});
$.getJSON();要求後臺必須返回一個json對象

經過Ajax，將JSON數據傳遞到後臺

 

2、在後臺中取得前臺傳來的數據 

$.ajax({
                type: "post",
                url: "Handler1.ashx?action=citys",
                data:JSON.stringify(a),//這裏的a必定要是一個json對象，而不是能json格式的字符串
                success: function (result) {
                    alert(result);
                }
            });


//後臺取值
//先生成一個person類。該類的結構，要與前臺的json結構一致！
 public class getJson
 {
    public string city { get; set; }
 }

//使用NewtonSoft.dll
　　　　 var stream = context.Request.InputStream;//獲取傳遞過來的JSON對象        
　　　　 string json = new StreamReader(stream).ReadToEnd();//獲取傳遞過來的JSON對象
 　　　　getJson city = JsonConvert.DeserializeObject<getJson>(json);

//使用.net內置對象
　　　　public void citys(HttpContext context)        {　　
            var stream = context.Request.InputStream;
            string json = new StreamReader(stream).ReadToEnd();
            System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();
            List<getJson> cityList = js.Deserialize<List<getJson>>(json);
　　　　　　　context.Response.Write("轉換成功!");                     
        }

C#裏處理前臺傳來的JSON

 

將DataTable轉換成Json對象

一、使用Json.net轉換

 

           string sqlstr="select * from table";
            DataTable DT =SqlHelper.Query(sqlstr);            
            if (DT.Rows.Count != 0)
            {                
                context.Response.Write(JsonConvert.SerializeObject(DT, new DataTableConverter()));
            } 

將DataTable轉換成Json對象

 

二、使用C#代碼轉換(該方法主要是用於Jquery Easy UI中)

/// <summary>  
    /// dataTable轉換成Json格式  
    /// </summary>  
    /// <param name="dt"></param>  
    /// <returns></returns>  
    public static string DataTable2Json(DataTable dt)
    {
        StringBuilder jsonBuilder = new StringBuilder();
        jsonBuilder.Append("[");
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            jsonBuilder.Append("{");
            for (int j = 0; j < dt.Columns.Count; j++)
            {
                jsonBuilder.Append("\"");
                jsonBuilder.Append(dt.Columns[j].ColumnName);
                jsonBuilder.Append("\":\"");
                jsonBuilder.Append(dt.Rows[i][j].ToString());
                jsonBuilder.Append("\",");
            }
            jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
            jsonBuilder.Append("},");
        }
        if (dt.Rows.Count > 0)
        {
            jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
        }
        jsonBuilder.Append("]");
        return jsonBuilder.ToString();
    }

DataTable2Json with C# code

 

三、在後臺將數據序列化成JSON字符串

    //實體：
    public class outData
    {
        public List<string> NewList { get; set; }
        public string user { get; set; }
    }

string WannaJson()
        {
            List<string> newList = new List<string>();
            newList.Add("1");
            newList.Add("2");
            newList.Add("3");

            outData data1 = new outData();
            data1.NewList = newList;
            data1.user = "james";

            JavaScriptSerializer js = new JavaScriptSerializer();
            string strJson = js.Serialize(data1);
            return strJson;
        }

使用實體來轉換

        string GetJson()
        {
            List<string> newList = new List<string>();
            newList.Add("1");
            newList.Add("2");
            newList.Add("3");
            var data = new { newList = newList, name = "Vichin" };
            JavaScriptSerializer js = new JavaScriptSerializer();
            string strJson = js.Serialize(data);
            return strJson;
        }

使用匿名類來序列化

 

 4、將後臺的數據，傳給前臺

將數據經過ajax返回給前臺後，使用js的eval函數，就能夠把string轉換成json對象了

success: function (data) {
var man= eval(data);
//後面要執行的代碼for(int i=0;i<man.length;i++){
....
}
}

 

 注意：

JSON對象轉化JSON字符串
　　var jsonstr =JSON.stringify(jsonObject );

JSON字符串轉化JSON對象
　　var jsonObject= jQuery.parseJSON(jsonstr);

JSON中的stringify 和 parse對象所支持的瀏覽器都是要在IE8以上的（IE8兼容模式也不行）。

stringify兼容性問題：
MSDN上原話：在如下文檔模式中受到支持：Internet Explorer 8 標準模式、Internet Explorer 9 標準模式、Internet Explorer 10 標準模式、Internet Explorer 11 標準模式。 
解決方法：
　　一、將頁面強制設置瀏覽器打開頁面的文檔模式 
　　　　  
eval對象支持ie6\7（據說好像是不太安全）！
$.parseJSON()———— 將格式無缺的JSON字符串轉爲與之對應的JavaScript對象（jQuery3.0之後廢棄（改用JSON.parse），在1.9中推薦使用）
$.param()方法————用於將JS內的數組轉換成JSON對象
<head><metahttp-equiv="X-UA-Compatible"content="IE=8">…</head>——————將瀏覽器打開頁面時，默認文檔設置爲IE 8
　　二、在頁面上引用JSON2.JS

var obj = {
  name: 'sunnie'
};

var flag = isHasAttr(obj, "name");
var val = isHasAttrVal(obj, "name", "sunnie");
//是否有對象屬性
function isHasAttr(obj, attr) {
  //判斷是否有該鍵值
  if (obj && obj.hasOwnProperty(attr)) {
    //若是有返回true
    return true;
  } 
    return false;
  
}
//是否含有對象屬性對應的值
function isHasAttrVal(obj, attr, value) {
  //判斷是否有該鍵值對應的值
  if (obj && obj.hasOwnProperty(attr) && obj[attr] === value) {
    //若是有返回true
    return true;
  } 
    return false;  
}

判斷JSON對象下是否包含某個值或者某個屬性

 

JSON.net官網
使用newtonSoft.dll進行序列化與反序列化 https://www.newtonsoft.com/json/help/html/SerializeDataSet.htm