1. 程式人生 > >頁面解析後臺傳的JSON

頁面解析後臺傳的JSON

後臺傳JSON一般有兩種格式:

① out直接拼接傳回;

一般返回JSON字串。

out.print("{\"username\":\"yanshi02\",\"password\":\"123456\"}");

下面的形式返回將不不能解析!
"{'username':'admin','password':'123456'}"

這裡寫圖片描述

② 返回一個JSON-String物件;

JSON陣列多應用此種方法。

  • 使用jackson 進行轉換返回JSON(也可以使用fastJSON等其他json框架)
        List<User> users= session.
selectList(statement); ObjectMapper objectMapper = new ObjectMapper(); String json = objectMapper.writeValueAsString(users);
  • json陣列如下
json..[{"id":1,"name":"tom1","age":11},
{"id":2,"name":"tom2","age":12},
{"id":3,"name":"tom4","age":13},
{"id":7,"name":"tom5","age":15},
{"id"
:8,"name":"Tom6","age":16}, {"id":9,"name":"Tom6","age":16}]

或者

  • 手動拼接成JSON字串返回
        String name = request.getParameter("username");
        String password = request.getParameter("password");

        String jsonString ="{\"username\":"+'"'+name+'"'+",\"password\":"+'"'+password+'"'+"}";
        out.println(jsonString);
        out.flush();
        out.close();
或者陣列:
"[{\"
name\":\"username\",\"value\":\"admin\"}, {\"name\":\"password\",\"value\":\"123456\"}]"

判斷型別

alert(typeof data);
//如果為object,可以嘗試直接使用data.key獲取屬性;
//如果為string,那麼必須進行解析為json object,才可以使用!

第一種情況:

  • 獲取拿到的JSON字串,將其轉換為JSON 物件。
  • 使用data.key(此時 typeof json 一定為object 而不是string)的形式獲取屬性值
var jsonReturn = JSON.parse(data);
alert(jsonReturn.username+" , "+jsonReturn.password);
    • 提交的資料內容(字串的形式,非JSON)

提交的資料內容

    • 返回的JSON字串

返回的JSON字串

    • 轉換後的JSON物件

轉換後的json物件

    • 獲取的屬性值

獲取的屬性值

著重講一下第二種情況–返回String物件。

JS拿到String物件,需要進行解析,將其轉變為JSON物件(如果為object,不需要解析,可以直接使用string)。
【此時json為陣列哦,不是單個json物件】

  • 有三種方法:
var jsonReturn = eval("("+data+")");

② var jsonReturn = $.parseJSON(data);

③ var jsonReturn = JSON.parse(data);

然後就可以對 jsonReturn 進行遍歷。

  • 遍歷的兩種方法:

    • 第一種:
                for(var i=0;i<jsonReturn.length;i++){
                   for(var key in jsonReturn[i]){
                     alert(key+':'+jsonReturn[i][key]);
                      $("#content").append(jsonReturn[i][key]);
                         }
                     }
    • 第二種
$.each(jsonReturn,function(index,value){
    //alert(typeof value +" , "+value);             
    alert(typeof value +" ,外層 index: "+index+","+value+",內容為:name :"+value.name+",value:"+value.value);     
                    });