JSON总结（以及前后端交互举例）

一、JSON的语法规则

1. [ ] 表示数组；
2. { }表示对象；
3. 并列的数据之间用逗号（,）分隔；
4. 映射（键值对）用冒号（:）表示；

5. 6种类型 （对象、数组、字符串、数字、布尔值、null）
   几种JSON格式举例如下：

   [“one”, “two”, “three”] //数组

   { “one”: 1, “two”: 2, “three”: 3 }//对象，注意成员名称必须用双引号

   {“names”: [“张三”, “李四”] }//值为复合对象

   [ { “name”: “张三”}, {“name”: “李四”} ]//对象数组

6. JSON字符串必须使用双引号（单引号会报错）

7. 数组或对象的最后一个成员后面不能加逗号

8. 字符集必须是UTF-8

二、JSON对象
（1）JSON对象简介
1. JSON对象是一个键值对的无序集合，如：{key:value}
2. Map map和json都是键值对，不同的是map中键值对中间用等号分开，json中键值对中间用冒号分开。Map <String,String>map=new JSONObject();

（2）JSON对象序列化（把js对象序列化为JSON字符串>>stringify()）

---

举例1：

var student= {
    name: '小白',
    age: 18,
    gender: true,
    teachers:["lily"],
    grade: null,
    'middle-school': '\"W3C\" Middle School',
    skills: ['JavaScript', 'Java', 'Python']
};
//输出
console.log(JSON.stringify(student)); 
//按缩进输出
console.log(JSON.stringify(student,null, '  '));

输出：

"{"name":"小白","age":18,"gender":true,"teachers":["lily"],"grade":null,"middle-school":"\"W3C\" Middle School","skills":["JavaScript","Java","Python"]}"

按缩进输出：

"{
  "name": "小白",
  "age": 18,
  "gender": true,
  "teachers": [
    "lily"
  ],
  "grade": null,
  "middle-school": "\"W3C\" Middle School",
  "skills": [
    "JavaScript",
    "Java",
    "Python"
  ]
}"

---

举例2：
输出指定的属性（第二个参数，可以传入数组）

//输出指定的属性
console.log(JSON.stringify(student, ['name', 'skills'], '  '));

输出：

"{
  "name": "小白",
  "skills": [
    "JavaScript",
    "Java",
    "Python"
  ]
}"

---

举例3：
输出处理过的属性（第二个参数，可以传入函数）

//输出处理过的属性（第二个参数，可以传入函数）
function convert(key, value) {
    if (typeof value === 'string') {
        return value.toUpperCase();
    }
    return value;
}
console.log(JSON.stringify(student, convert, '  '));

输出：

"{
  "name": "小白",
  "age": 18,
  "gender": true,
  "teachers": [
    "LILY"
  ],
  "grade": null,
  "middle-school": "\"W3C\" MIDDLE SCHOOL",
  "skills": [
    "JAVASCRIPT",
    "JAVA",
    "PYTHON"
  ]
}"

---

举例4：
定义一个toJSON()的方法

var student= {
    name: '小白',
    age: 18,
    gender: true,
    teachers:["lily"],
    grade: null,
    'middle-school': '\"W3C\" Middle School',
    skills: ['JavaScript', 'Java', 'Python'],
    toJSON: function () {
        return {             // 只输出name和age，并且改变了key：
            'StudentName': this.name,
            'StudentAge': this.age
        };
    }
};
console.log(JSON.stringify(student,null,' '))

输出：

"{
 "StudentName": "小白",
 "StudentAge": 18
}"

---

序列化的注意事项：
具体请参考：http://blog.csdn.net/a1247529789/article/details/51769536

（3）JSON反序列化（JSON格式的字符串，转变成一个JavaScript对象）

//parse()方法
JSON.parse('[1,2,3,true]');         // Array [1, 2, 3, true]
JSON.parse('{"name":"小明","age":14}');   // Object {name: '小明', age: 14}
JSON.parse('true'); // true
JSON.parse('123.45'); // 123.45
JSON.parse('{"name":"小明","age":14}', function (key, value) {
    if (key === 'name') {
        return value + '同学';
    }
    return value;
});     // Object {name: '小明同学', age: 14}

//eval方法
var str='{"name":"小明","age":14}'
eval('(' + str + ')');// Object {"name":"小明","age":14}

（4）JSON访问值

1.访问数组类型

var items = ['item1','item2','item3'];
alert(items[0]);     // item1　　

2.访问对象类型

var oExample = { "name":"lily" };
alert(oExample.name);     // lily
alert(oExample["name"]);     // lily　

(5)JSON的前后端交互

---

一、前台传到后端
方式一：AJAX
(1)将要传入后台的数据组装成JSON格式的字符串

var data = [{'name':'jim' , 'age':20} , {'name':'king' ,'age':26},{'name':'jge' , 'age':30}];
var jsonString = JSON.stringify(data);

(2)ajax请求向后台传数据

$.ajax({
    type: "post",
    url: url,
    dataType : 'json',
    data : {'mydata':jsonString},
    success: function(data,textStatus){
        alert("操作成功");
    },
    error: function(xhr,status,errMsg){
        alert("操作失败!");
    }
});

(3)后台接收数据并解析

String jsonString = request().getParameter("mydata");
// string转为JSONArray,从array中获取到JSONObject
JSONArray jsonArray = JSONArray.fromObject(jsonString);
for(int i = 0;i < jsonArray.length(); i++) {
    JSONObject jsonObj = jsonArray.getJSONObject(i);
    jsonObj.getInt("name");
    jsonObj.getString("age");
}

方式二：原生XMLHttp发送
（1）前端发送：

function login() {
 var username =document.getElementById("username").value;
 var password = document.getElementById("password").value;
 var remember =document.getElementById("remember").checked;
 var xmlhttp;
 if (window.XMLHttpRequest)
 {
  // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
  xmlhttp=new XMLHttpRequest();
 }
 else
 {
  // IE6, IE5 浏览器执行代码
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 xmlhttp.onreadystatechange=function()
 {
  if (xmlhttp.readyState===4 && xmlhttp.status===200)
  {
   ...
  }
 };

 xmlhttp.open("POST","/flask/login",true);
 xmlhttp.setRequestHeader("Content-type","application/json");
 // 后面这两部很重要，我看网上很多都是使用      xmlhttp.send("username="+username+"&password="+"),这样接收还要解析一番感觉还是直接发送以下格式的好些
 var data = {
  "username": username
  "password": password
  "remember": remember
 };
 var data_json = JSON.stringify(data);
 xmlhttp.send(data_json);
}

（2）后台解析和上个方法类似
（3）前端接受响应信息并解析：

var text = xmlhttp.responseText;
// 通过eval() 方法将json格式的字符串转化为js对象，并进行解析获取内容
var result = eval("("+text+")");
if (result) {

 } else {
   alert("请输入正确的用户名和密码");
  }

---

二、后台响应到前端

 @RequestMapping("/getAllUserTest")  
public String getAllUserTest(HttpServletRequest request, HttpServletResponse response) throws IOException {  
//从数据库中取出所有用户信息，返回值为一个User对象集合，每个               User对象包含username与age两个参数  
        List<User> findAll = userService.findAll();  
//创建JSONArray实例  
        JSONArray jsonArray = new JSONArray();  
//for each循环取出每个User对象  
        for(User user: findAll) {  
//JSONObject是一个{}包裹起来的一个对象(Object)，  
//JSONArray则是[]包裹起来的一个数组(Array)  
//此处为对象，所以用得到JSONObject  
             JSONObject jo = new JSONObject();  
             jo.put("username", user.getUsername());  
             jo.put("age", user.getAge());  
             jsonArray.add(jo);  
        }  
        try {  
//后台输出测试  
             System.out.println(jsonArray.toString());  
//设置字符集  
             response.setCharacterEncoding("UTF-8");  
//页面输出  
             response.getWriter().println("JSON输出：");  
             response.getWriter().write(jsonArray.toString());  

         } catch (IOException e) {  
             e.printStackTrace();  
         }  
         return null;  
    }  

页面输出：

JSON输出：
[{'name':'jim' , 'age':20} , {'name':'king' ,'age':26},{'name':'jge' , 'age':30}]

---

三、纯JSON后台解析的各种方法
（1）传统JSON解析：
<1> 生成json字符串

public static String createJsonString(String key, Object value) {
        JSONObject jsonObject = new JSONObject();
        jsonObject.put(key, value);
        return jsonObject.toString();
}

<2>解析JSON字符串(一个JavaBean，一个List数组，一个嵌套Map的List数组：)

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Map;

import org.json.JSONArray;
import org.json.JSONObject;

import com.android.myjson.domain.Person;

/**
 * 完成对json数据的解析
 * 
 */
public class JsonTools {

    //JavaBean
    public static Person getPerson(String key, String jsonString) {
        Person person = new Person();
        try {
        //解析成Array
        //JSONArraygetJsonArray=JSONArray.fromObject(arrayStr);

        //解析成Object
            JSONObject jsonObject = new JSONObject(jsonString);
            JSONObject personObject = jsonObject.getJSONObject("person");
            person.setId(personObject.getInt("id"));
            person.setName(personObject.getString("name"));
            person.setAddress(personObject.getString("address"));
        } catch (Exception e) {

        }
        return person;
    }


    //List
    public static List getPersons(String key, String jsonString) {
        List list = new ArrayList();
        try {
            JSONObject jsonObject = new JSONObject(jsonString);
            // 返回json的数组
            JSONArray jsonArray = jsonObject.getJSONArray(key);
            for (int i = 0; i < jsonArray.length(); i++) {
                JSONObject jsonObject2 = jsonArray.getJSONObject(i);
                Person person = new Person();
                person.setId(jsonObject2.getInt("id"));
                person.setName(jsonObject2.getString("name"));
                person.setAddress(jsonObject2.getString("address"));
                list.add(person);
            }
        } catch (Exception e) {
            // TODO: handle exception
        }
        return list;
    }

//List<map...
 public static List listKeyMaps(String key,
            String jsonString) {
        List> list = new ArrayList>();
        try {
            JSONObject jsonObject = new JSONObject(jsonString);
            JSONArray jsonArray = jsonObject.getJSONArray(key);
            for (int i = 0; i < jsonArray.length(); i++) {
                JSONObject jsonObject2 = jsonArray.getJSONObject(i);
                Map map = new HashMap();
                Iterator iterator = jsonObject2.keys();
                while (iterator.hasNext()) {
                    String json_key = iterator.next();
                    Object json_value = jsonObject2.get(json_key);
                    if (json_value == null) {
                        json_value = "";
                    }
                    map.put(json_key, json_value);
                }
                list.add(map);
            }
        } catch (Exception e) {
            // TODO: handle exception
        }
        return list;
    }
}

---

（2）FastJSON解析：

import java.util.ArrayList;
import java.util.List;
import java.util.Map;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.TypeReference;

public class JsonTool {

    public static  Person getPerson(String jsonstring, Class cls) {
       Person  p = null;
        try {
            t = JSON.parseObject(jsonstring, cls);
        } catch (Exception e) {
            // TODO: handle exception
        }
        return p;
    }

    public static  List getPersonList(String jsonstring, Class cls) {
        List list = new ArrayList();
        try {
            list = JSON.parseArray(jsonstring, cls);
        } catch (Exception e) {
            // TODO: handle exception
        }
        return list;
    }

    public static  List> getPersonListMap1(
            String jsonstring) {
        List> list = new ArrayList>();
        try {
            list = JSON.parseObject(jsonstring,
                    new TypeReference>>() {
                    }.getType());

        } catch (Exception e) {
            // TODO: handle exception
        }

        return list;
    }
}