JSON總結（以及前後端交互舉例）

一、JSON的語法規則

[ ] 表示數組；
{ }表示對象；
並列的數據之間用逗號（,）分隔；
映射（鍵值對）用冒號（:）表示；
6種類型（對象、數組、字符串、數字、布爾值、null）
幾種JSON格式舉例如下：

[“one”, “two”, “three”] //數組

{ “one”: 1, “two”: 2, “three”: 3 }//對象，注意成員名稱必須用雙引號

{“names”: [“張三”, “李四”] }//值爲複合對象

[ { “name”: “張三”}, {“name”: “李四”} ]//對象數組
JSON字符串必須使用雙引號（單引號會報錯）
數組或對象的最後一個成員後面不能加逗號
字符集必須是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;
    }
}

JSON總結（以及前後端交互舉例）

使用c#強大的表達式樹實現對象的深克隆之解決循環引用的問題

free AI online tools All In One

痞子衡嵌入式：恩智浦i.MX RT1xxx系列MCU啓動那些事（12.A）- uSDHC eMMC啓動時間(RT1170)

linux安裝cuda和cudnn

Mellanox網卡開啓SR-IOV

模擬手機設備：使用 Playwright 實現移動端自動化測試

HTML 00 Tutorial

全面系統的AI學習路徑，幫助普通人也能玩轉AI

從零開始：使用 Playwright 腳本錄製實現自動化測試

uni-app實現上拉加載

idea啓動maven項目，run的時候java:程序包xxx不存在

mybatis-plus在使用多個mapper時報錯

將枚舉Enum轉換爲JSON對象的方法,直接返回對象給前臺

struts1+ajax導入excel文件，並獲取返回值回顯到頁面

jQuery 重置type="file”爲空，IE瀏覽器下

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結