json在前后端数据交互中的应用

一.什么是json？

json本来是javascript里的内容，有时后端要传各种各样的数据格式来适应前端，所以需要用到json来转换，用它来表示各种各样复杂的数据，如对象，数组，集合，以及集合的集合等数据。
先来了解json是什么，json是一种轻量级的前端后端以及网络传输的数据交换格式，就是一串字符串，只不过元素会使用特定的符号标注。 {} 双括号表示对象，[] 中括号表示数组，”” 双引号内是属性或值，: 冒号表示后者是前者的值(这个值可以是字符串、数字、也可以是另一个数组或对象)。也就是说在后端可以把一个字符串，然后通过json来转换成特定的字符串传到前端去。

二.为什么要用json？

1.数据格式比较简单, 易于读写, 格式都是压缩的, 占用带宽小，其可读性也不错，基本具备了结构化数据的性质。

2.易于解析这种语言, 客户端JavaScript可以简单的通过eval()进行JSON数据的解析，通过遍历数组以及访问对象属性来获取数据，

3.因为JSON格式能够直接为服务器端代码使用, 大大简化了服务器端和客户端的代码开发量, 且易于维护，语言无关，任何语言都能轻松搞它，类型安全，值是有类型的，比如整数、字符串、布尔等。

三.一些常见的json格式

1.一个JSON对象——JSONObject

简单点的：var json={"name":"张三" , "age":18 };

复杂一点的：var json={"name":"张三", "age"=18，"address":{"street":"湖南", "city":长沙","country":"中国"}}；

2.一个JSON数组——JSONArray

简单点的：
var json=[{"name":"张三" , "age":18 },{"name":"李四" , "age":20 }];

复杂一点的：
[
{"name":"张三", "age"=18,  "address":{"street":"湖南", "city":"长沙","country":"中国"}},

{"name":"李四", "age"=20,  "address":{"street":"湖南", "city":"张家界","country":"中国"}}
]

3.还有一种结构

var json={"abc":[{"name":"txt1"},{"name","txt2"}]};
//这里的json.abc是一个数组，数组是由2个子json组成的

遍历(后面不在讲这种结构）
for(var i=0;i<json1.abc.length;i++){alert(json1.abc[i].name);}

里面的是一个对象{}，如果是多个对象，则用逗号间隔，即{},{}，这样就组成了一个对象序列，为了辨别开始和结束，则需要加上[]才能进行传递，则实际传递的形式应该是[{},{}]，如果只要传递一个对象，则{}的形式就可以了。

四.json在前端(js)应用

后端将数据处理成json格式，前端就通过ajax来接收数据，并eval()或者json.prase(data)解析，循环遍历，展现在页面上。

$  .ajax({
                        url : "myfileAction",
                        dataType : "json",
                        type : "post",
                        success : function(data) {
                        }
                        });

第一步，接收数据
用ajax来接收后端发来的数据，简单说下ajax，ajax是一种用于快速创建动态网页的技术。通过在后台与服务器进行少量数据交换，ajax就可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页（不使用ajax）如果需要更新内容，必须重载整个网页面。
type: “POST”, //请求的方式，也有get请求
url: “myfileAction”, //请求地址，后台提供的,填写具体action，也就是struts.xml文件中action名字。
data: {name:name},//data是传给后台的json字段，后台需要哪些就传入哪些，这里是接收数据，所以可以不用写。
dataType: “json”, //json格式，后台返回的数据为json格式的。

第二步，解析数据
前后台传输的时候其实是字符串，解析是把json字符串重新变成json类型的对象。

json字符串转换成json对象

var obj = eval('(' + data + ')');
或者 var obj = JSON.parse(data);  

区别：eval方法不会去检查给的字符串时候符合json的格式，同时如果给的字符串中存在js代码eval也会一并执行。相比而言eval()不安全，建议用JSON.parse。

json对象转为json字符串

var name = JSON.stringify(person);

前端传入后台的应该是一个json格式的字符串，而不是一个json对象，所以这个也有用的。
讲到这里简单提下发送数据吧。

<script type="text/javascript">  
    $(document).ready(function(){  
        var saveDataAry=[];  
        var data1={"userName":"zhangsan","address":"bj"};  
        var data2={"userName":"lisi","address":"nj"};  
        saveDataAry.push(data1);  
        saveDataAry.push(data2);         
        $.ajax({ 
            type:"POST", 
            url:"user/saveUser", 
            dataType:"json",      
            contentType:"application/json",               
            data:JSON.stringify(saveData), 
            success:function(data){ 

            } 
         }); 
    });  
</script>

ajax请求的时候也要指定dataType:“json”,contentType:”application/json” 这样就可以轻易的将一个对象或者List传到后端。

第三步，数据遍历
可以通过jQuery的$.each()方法遍历输出，举个例子

var arr = [{ name: "john", lang: "js" },{ name: "张三", lang: "ext" }];   
  $.each( arr, function(index, content)  
  {   
   alert( "the man's no. is: " + index + ",and " + content.name + " is learning " + content.lang );   
  });  

如果声明的是字符串，var arr=’[]’这样类型，那么遍历的时候应该先用json.parse()或者jquery的方法$.parseJSON将字符串转化为对象。

还有一种是for循环遍历

  for(var i=0; i<arr.length; i++)  
  {  
     alert(arr[i].name+" " + arr[i].value)  
  }  
  //取arr数组里一个叫name的值，比如上面name后面值是张三，就取出张三

五.json在后端上的应用

在后端action里要导入 net.sf.json.JSONObject这个包。

第一步，有几种后端数据封装成json数据格式

1.List集合转换成json代码
　List list = new ArrayList();
　list.add( “first” );
　list.add( “second” );
　JSONArray jsonArray = JSONArray.fromObject( list );
2. Map集合转换成json代码
　Map map = new HashMap();
　map.put(“name”, “json”);
　map.put(“bool”, Boolean.TRUE);
　map.put(“int”, new Integer(1));
　map.put(“arr”, new String[] { “a”, “b” });
　map.put(“func”, “function(i){ return this.arr[i]; }”);
　JSONObject json = JSONObject.fromObject(map);
3.Bean转换成json代码
　　JSONObject jsonObject = JSONObject.fromObject(new JsonBean());
4. 数组转换成json代码
　boolean[] boolArray = new boolean[] { true, false, true };
　　JSONArray jsonArray1 = JSONArray.fromObject(boolArray);
5. 一般数据转换成json代码
JSONArray jsonArray =JSONArray.fromObject([‘json’,’is’,’easy’]” );
6.用json put方法
JSONObject json=new JSONObject();
json.put(“name”, “张三”);
json.put(“age”, 18);

第二步，给你一个Struts 2的struts.xml中配置json类型result

<package name="json" extends="json-default" >  

  <action name="***Action"  
   class="action.UserAction" method="add">  
   <result type="json">  
                <param name="root">result</param>  
        </result>  
    </action>  
</package>

<param> 这个标签是设置参数的，对于java程序来说，这个标签就相当于定义一个root 变量，将其赋值为map ,前台可以获取使用root这个参数值。
所以action里要有get，setresult方法，把json字符串值给reslut setResult(json.toString());

接收前端提交的数据

String data = request.getParameter("data");
 JSONArray json=JSONArray.fromObject(data);
JSONObject jsonOne;
  Map<String,String> map=null;

for(int i=0;i<json.size();i++){
           updataMap = new HashMap<String,String>();
           jsonOne = json.getJSONObject(i); 
           map.put("name", (String) jsonOne.get("name"));
           map.put("age", (String) jsonOne.get("age"));
  }