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
}"
(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;
}
}