數據如何從JSON傳遞給AJAX？

Question

我很難理解這裏的邏輯。好了，讓我們說我有一個類

@RequestMapping(value="/GetPersons", method = RequestMethod.GET) 
    public void loadPersons(HttpSession session, HttpServletRequest request, HttpServletResponse response) throws IOException { 
     OutputStream out = response.getOutputStream(); 
     List<Person> persons = personDAO.loadPersons(); 
     Iterator iterator = persons.iterator(); 

     JSONObject jsonObject = new JSONObject(); 
     JSONArray jsonArray = new JSONArray(); 
     while (iterator.hasNext()) { 
      JSONObject object = new JSONObject(); 
      object.put("name", person.GetName()); 
      jsonArray.add(object); 
     } 
     jsonObject.put("data", jsonArray); 
     OutputStreamWriter writer = new OutputStreamWriter(out); 

     try { 
      writer.write(jsonObject.toString()); 
     }finally { 
      writer.close(); 
     } 
    } 

然後我在index.jsp中有一個簡單的腳本

function loadPersons(json) { 
    var obj = JSON.parse(json); 
    var Person = obj.data; 

    for (i = 0; i < myArr.length; i++) { 
     $('#myId).append('<li><a href="#" PersonId="+Person[i].name+">Test</a></li>'); 

    } 
} 

$.ajax({ 
    url: "http://localhost:8080/Persons/getPersons", 
    success: function (data) { 
     loadPersons(data); 
    }, 
    error: function (xhr, ajaxOptions, thrownError) { 
    } 
}); 

所以我的問題是下面的......那是什麼而來的邏輯在這？ JSONObject數據如何傳遞給$ .ajax成功和函數。該函數需要一個參數「數據」，但會傳遞什麼？從java或整個getPersons方法？

這裏的要點是通過使用ajax調用json對象來動態填充簡單的下拉列表。

Answer 1

在你loadPersons方法，使用JSONObject和JSONArray類建立一個JSON對象的Java表示，這將是這樣的：

{ 
    "data": [ 
     { 
     "name": "whatever person.getName() evaluated to" 
     }, 
     { 
     "name": "another person.getName() call" 
     } 
    ] 
} 

這是發送，作爲文本的JSON數據，在你的servlet的響應中。

jQuery ajax函數對此響應做了額外的工作，最終將其轉換爲Javascript對象，然後將其作爲data參數傳遞給您的success回調。這Javascript對象類似於：

{ 
    data: [ 
     { 
     name: "whatever person.getName() evaluated to" 
     }, 
     { 
     name: "another person.getName() call" 
     } 
    ] 
} 

而且你可以訪問第一name與價值：data.data[0].name

Answer 2

在這種特殊情況下，你直接寫JSON字符串內容的請求的響應。這是在這些行完成的：

//Obtain the output stream from the response 
OutputStream out = response.getOutputStream(); 
//Wrap the output stream into a writer 
OutputStreamWriter writer = new OutputStreamWriter(out); 
try { 
    //write in the writer that will write on the HTTP response 
    writer.write(jsonObject.toString()); 
}finally { 
    //close writer and free resources 
    writer.close(); 
} 

所以，來自服務器的響應將是一個包含您的數據的字符串。這來自這些行的代碼：

JSONObject jsonObject = new JSONObject(); 
JSONArray jsonArray = new JSONArray(); 
while (iterator.hasNext()) { 
    JSONObject object = new JSONObject(); 
    object.put("name", person.GetName()); 
    jsonArray.add(object); 
} 
jsonObject.put("data", jsonArray); 

然後，$就從jQuery將執行在success，在那裏它從服務器接收作爲參數的響應中定義的回調函數：

$.ajax({ 
    //removed code for explanation purposes... 
    success: function (data) { 
     //data is the response from the server on a successful execution 
     //of the HTTP request to the server 
     //do something here with the response from the server 
     //in this case, call the loadPersons function 
     loadPersons(data); 
    } 
}); 

在loadPersons函數中，您將json字符串中的數據反序列化爲JavaScript json對象，然後從那裏的json數據創建HTML。

Answer 3

首先在任何瀏覽器上點擊鏈接http://localhost:8080/Persons/getPersons，如果您的spring服務正在運行，您將在瀏覽器中看到JSON數據。您的index.jsp中的AJAX呼叫獲取相同的數據。

$.ajax({ 
    url: "http://localhost:8080/Persons/getPersons", 
    success: function (data) { 
     loadPersons(data); 
    }, 
    error: function (xhr, ajaxOptions, thrownError) { 
    } 
}); 

P.的S - 我認爲你將不得不也加入下面一行的這個Ajax調用

dataType :'json'

在Ajax調用，success和failure是callback功能時，瀏覽器從服務器獲取的響應被調用，執行成功在(2XX)的情況下，如果發生錯誤響應時調用失敗，則成功函數將採用參數數據，該數據爲JSON，與您在上一步中看到的數據相同。

然後，當你從服務器收到數據時，它是JSON格式（我想），你將不得不解析它將其轉換爲對象，然後你獲取數據並將其設置爲html元素。

$('#myId).append('<li><a href="#" PersonId="+Person[i].name+">Test</a></li>');