Json在前台与后台之间的使用

 一、将前台数据，使用ajax中的post、get传到后台

1、生成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数据传递到后台

二、在后台中取得前台传来的数据

$.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对象

1、使用Json.net转换

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

将DataTable转换成Json对象

2、使用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 = ; i < dt.Rows.Count; i++)
        {
            jsonBuilder.Append("{");
            for (int j = ; 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 - , );
            jsonBuilder.Append("},");
        }
        if (dt.Rows.Count > )
        {
            jsonBuilder.Remove(jsonBuilder.Length - , );
        }
        jsonBuilder.Append("]");
        return jsonBuilder.ToString();
    }

DataTable2Json with C# code

3、在后台将数据序列化成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("");
            newList.Add("");
            newList.Add("");

            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("");
            newList.Add("");
            newList.Add("");
            var data = new { newList = newList, name = "Vichin" };
            JavaScriptSerializer js = new JavaScriptSerializer();
            string strJson = js.Serialize(data);
            return strJson;
        }

使用匿名类来序列化

四、将后台的数据，传给前台

将数据通过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 标准模式。 
解决方法：
　　1、将页面强制设置浏览器打开页面的文档模式 
　　　　<head><meta http-equiv="X-UA-Compatible" content="IE=8">…</head>——————将浏览器打开页面时，默认文档设置为IE 8
　　2、在页面上引用JSON2.JS

eval对象支持ie6\7（听说好像是不太安全）！
$.parseJSON()———— 将格式完好的JSON字符串转为与之对应的JavaScript对象（jQuery3.0以后废弃（改用JSON.parse），在1.9中推荐使用）
$.param()方法————用于将JS内的数组转换成JSON对象

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