ajax 對 Json 格式的解析

時間 2019-11-11

標籤 ajax json 格式解析欄目 Ajax 简体版

原文原文鏈接

ajax 對 Json 格式的解析

Json 的介紹： java

JSON 能夠將 JavaScript 對象中表示的一組數據轉換爲字符串，而後就能夠在函數之間輕鬆地傳遞這個字符串，或者在異步應用程序中將字符串從 Web 客戶機傳遞給服務器端程序。 ajax

按照最簡單的形式，能夠用下面這樣的 JSON 表示名稱/值對： json

{ "firstName": "Brett" } 數組

這樣的鍵/值對也能夠是多個：服務器

{"name":"aaa","sex":"男","age":"20"}
從語法方面來看，這與名稱/值對相比並無很大的優點，可是在這種狀況下 JSON 更容易使用，並且可讀性更好。 app

值的數組dom

當須要表示一組值時，JSON 不但可以提升可讀性，並且能夠減小複雜性。異步

若是使用 JSON，就只需將多個帶花括號的記錄分組在一塊兒：async

{ "people": [
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "111111" },
{ "firstName": "Jason", "lastName":"Hunter", "email": "22222" },
{ "firstName": "Elliotte", "lastName":"Harold", "email": "33333" }
]}函數

可使用相同的語法表示多個值（每一個值包含多個記錄）：

{ "programmers": [
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "3333" },
{ "firstName": "Jason", "lastName":"Hunter", "email": "1222" },
{ "firstName": "Elliotte", "lastName":"Harold", "email": "3333" }
],
"authors": [
{ "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
{ "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
{ "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
],
"musicians": [
{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
{ "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
]
}

Json也能夠這樣寫：

{ "listaccountsresponse" : { "count":1 ,"account" : [ {"id":5,"name":"xian1","accounttype":0,"domainid" :2,"domain":"Server","receivedbytes":649444,"sentbytes":175467975,"vmlimit":"20","vmtotal":2,"vmavailable" :"18","iplimit":"20","iptotal":1,"ipavailable":"19","volumelimit":"20","volumetotal":2,"volumeavailable" :"18","snapshotlimit":"20","snapshottotal":0,"snapshotavailable":"20","templatelimit":"20","templatetotal" :0,"templateavailable":"20","vmstopped":0,"vmrunning":2,"state":"enabled","user":[{"id":5,"username" :"xian1","firstname":"Eric","lastname":"Tang","email":"Wang-Ngai.Tang@pccw.com","created":"2012-03-22T09 :36:44+0800","state":"enabled","account":"xian1","accounttype":0,"domainid":2,"domain":"Server","timezone" :"Asia/Shanghai"}]} ] } }

ajax對Json格式數據的解析 ：

1.對簡單json格式的解析：

{ "firstName": "Brett" }

寫道

$.ajax({
url:"這裏是你要請求的地址",
data:{"id":id}, //以鍵/值對的形式
async : false,
dataType : "json",
success : function(data) {
alert("firstName = " + data.firstName);
}
});

注：這裏的data是你從後臺穿過來的Json字符傳串。

後臺寫法：

Java代碼

response.setCharacterEncoding("utf-8");
response.setContentType("text/json;charset=UTF-8");
PrintWriter out = null;
String count = "<SPAN style="COLOR: #000000">{ "firstName": "Brett" }</SPAN>
;
try {
out = response.getWriter();
} catch (Exception e) {
e.printStackTrace();
}
out.print(count);
out.flush();

response.setCharacterEncoding("utf-8");
		response.setContentType("text/json;charset=UTF-8");
		PrintWriter out = null;
		String count = "{ "firstName": "Brett" }

;
		try {
			out = response.getWriter();
		} catch (Exception e) {
			e.printStackTrace();
		}
		out.print(count);
		out.flush();

這樣就能在前臺頁面彈出提示框：firstName = Brett。

2.多個鍵/值對和上面的狀況同樣

3.解析Json以下數組：

{

{ "firstName": "Brett", "lastName":"McLaughlin", "email": "111111" },
{ "firstName": "Jason", "lastName":"Hunter", "email": "22222" },
{ "firstName": "Elliotte", "lastName":"Harold", "email": "33333" }
}

Js代碼

$.ajax({
url:"這裏是你要請求的地址",
data:{"id":id}, //以鍵/值對的形式
async : false,
dataType : "json",
success : function(data) {
for(int i = 0; i < data.length; i++) { //循環後臺傳過來的Json數組
var datas = data[i];
alert(datas.firstName);
alert(datas.lastName);
alert(datas.email);
}
}
});

$.ajax({
url:"這裏是你要請求的地址",
data:{"id":id}, //以鍵/值對的形式
async : false,
dataType : "json",
success : function(data) {
for(int i = 0; i < data.length; i++) { //循環後臺傳過來的Json數組
     var datas = data[i];
     alert(datas.firstName);
     alert(datas.lastName);
     alert(datas.email);
}
}
});

4.解析以下Json數據

Js代碼

$.ajax({
url:"這裏是你要請求的地址",
data:{"id":id}, //以鍵/值對的形式
async : false,
dataType : "json",
success : function(data) {
var pro = data.programmers; // pro爲programmers的一個數組
for(int i = 0; i < pro.length; i++) { //循環後臺傳過來的Json數組
var datas = pro[i];
alert(pro.firstName);
alert(pro.lastName);
alert(pro.email);
}
var aut = data.authors; // aut爲authors的一個數組
for(int i = 0; i < aut.length; i++) { //循環後臺傳過來的Json數組
var datas = aut[i];
alert(aut.firstName);
alert(aut.lastName);
alert(aut.genre);
}
var mus = data.musicians; // aut爲authors的一個數組
for(int i = 0; i < mus.length; i++) { //循環後臺傳過來的Json數組
var datas = mus[i];
alert(mus.firstName);
alert(mus.lastName);
alert(mus.instrument);
}
}
});

$.ajax({
url:"這裏是你要請求的地址",
data:{"id":id}, //以鍵/值對的形式
async : false,
dataType : "json",
success : function(data) {
var pro = data.programmers; // pro爲programmers的一個數組
for(int i = 0; i < pro.length; i++) { //循環後臺傳過來的Json數組
     var datas = pro[i];
     alert(pro.firstName);
     alert(pro.lastName);
     alert(pro.email);
}
var aut = data.authors; // aut爲authors的一個數組
for(int i = 0; i < aut.length; i++) { //循環後臺傳過來的Json數組
     var datas = aut[i];
     alert(aut.firstName);
     alert(aut.lastName);
     alert(aut.genre);
}
var mus = data.musicians; // aut爲authors的一個數組
for(int i = 0; i < mus.length; i++) { //循環後臺傳過來的Json數組
     var datas = mus[i];
     alert(mus.firstName);
     alert(mus.lastName);
     alert(mus.instrument);
}

}
});

Js代碼

$.ajax({
url:"這裏是你要請求的地址",
data:{"id":id}, //以鍵/值對的形式
async : false,
dataType : "json",
success : function(data) {
var accounts = data.listaccountsresponse.account; //取到「account」中的數據
for(int i = 0; i < accounts.length; i++) { //循環後臺傳過來的Json數組
var datas = accounts[i];
alert(datas.id);
alert(datas.name);
alert(datas.accounttype);
..........
}
}
});

$.ajax({
url:"這裏是你要請求的地址",
data:{"id":id}, //以鍵/值對的形式
async : false,
dataType : "json",
success : function(data) {
var accounts = data.listaccountsresponse.account; //取到「account」中的數據
for(int i = 0; i < accounts.length; i++) { //循環後臺傳過來的Json數組
     var datas = accounts[i];
     alert(datas.id);
     alert(datas.name);
     alert(datas.accounttype);
     ..........
}
}
});

-----這裏是本身寫的一個後臺傳值----------------------------------------------------------------------------------------------------------

Js代碼

@RequestMapping(value="/applyVm/listApplyVmCount", method={RequestMethod.GET, RequestMethod.POST})
public void listApplyVmCount(HttpServletRequest request, HttpServletResponse response) {
response.setCharacterEncoding("utf-8");
response.setContentType("text/json;charset=UTF-8");
PrintWriter out = null;
String count = "";
try {
out = response.getWriter();
Map<String, Integer> map = applyVmService.findApplyVmCount();
Gson gson = new Gson();
count = gson.toJson(map);
} catch (Exception e) {
e.printStackTrace();
}
out.print(count);
out.flush();
}