[英]How is the data passed from JSON to AJAX?
I'm facing difficulties understanding the logic here. 我在理解这里的逻辑时遇到了困难。 Ok, so let's say I have a class
好吧,假设我有一堂课
@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();
}
}
And then I have a simple script in my index.jsp 然后在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) {
}
});
So my question is the following... What is the logic that goes on here? 所以我的问题是以下内容...这里的逻辑是什么? How is the JSONObject data passed to the $.ajax success and the function.
JSONObject数据如何传递给$ .ajax成功和函数。 The function takes an argument "data" but what is going to be passed?
该函数接受参数“数据”,但是将传递什么呢? The whole getPersons method from the java or?
整个getPersons方法来自Java还是?
The point here is to dynamically populate a simple dropdown by calling json object with ajax. 这里的重点是通过使用ajax调用json对象来动态填充简单的下拉列表。
In your loadPersons
method, you use the JSONObject
and JSONArray
classes to build a Java representation of a JSON object that will look like this: 在您的
loadPersons
方法中,您使用JSONObject
和JSONArray
类来构建JSON对象的Java表示形式,如下所示:
{
"data": [
{
"name": "whatever person.getName() evaluated to"
},
{
"name": "another person.getName() call"
}
]
}
This is the JSON data that is sent, as text, in the response from your servlet. 这是Servlet响应中以文本形式发送的JSON数据。
The jQuery ajax
function does additional work with this response, finally turning it into a Javascript object, which is then passed to your success
callback as the data
parameter. jQuery
ajax
函数对该响应进行了其他工作,最终将其转换为Javascript对象,然后将其作为data
参数传递给您的success
回调。 This Javascript object looks similar: 这个Javascript对象看起来类似:
{
data: [
{
name: "whatever person.getName() evaluated to"
},
{
name: "another person.getName() call"
}
]
}
And you could access the value of the first name
with: data.data[0].name
您可以通过以下方式访问
name
的值: data.data[0].name
In this specific case, you're writing the JSON string content directly in the response of the request. 在这种情况下,您将直接在请求的响应中编写JSON字符串内容。 This is done in these lines:
在以下行中完成此操作:
//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();
}
So, the response from the server will be a string that contains your data. 因此,来自服务器的响应将是一个包含您的数据的字符串。 This comes from these lines of code:
这来自以下代码行:
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);
Then, the $.ajax from jquery will execute the callback function defined in success
, where it receives the response from the server as the argument: 然后,来自jquery的$ .ajax将执行
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);
}
});
In loadPersons
function, you deserialize the data from the json string into a JavaScript json object, then create HTML from the json data there. 在
loadPersons
函数中,您将json字符串中的数据反序列化为JavaScript json对象,然后从那里的json数据中创建HTML。
First click the link http://localhost:8080/Persons/getPersons on any browser,if your spring service is running currently,you will see JSON
data in your browser. 首先在任何浏览器上单击链接http:// localhost:8080 / Persons / getPersons ,如果您的spring服务当前正在运行,您将在浏览器中看到
JSON
数据。 The same data is getting fetched by the AJAX
call inside your index.jsp
. index.jsp
的AJAX
调用会获取相同的数据。
$.ajax({
url: "http://localhost:8080/Persons/getPersons",
success: function (data) {
loadPersons(data);
},
error: function (xhr, ajaxOptions, thrownError) {
}
});
PS - i think you will have to add below line also to this ajax call PS-我认为您也必须在此ajax调用中添加以下行
dataType :'json'
In the ajax call, success
and failure
are callback
function which are invoked when browser get the response from server,success is executed in case of (2XX)
while failure is invoked in case of error response,success function takes an argument data,which is JSON
,same as you would have seen in your previous step. 在ajax调用中,
success
和failure
是callback
函数,当浏览器从服务器获取响应时调用该callback
函数,在(2XX)
情况下执行成功,而在错误响应的情况下调用失败,成功函数采用参数数据,即JSON
,与您在上一步中看到的相同。
Then as you received data from server,it is in JSON format(I suppose),you will have to parse it to convert it to object,and then you are fetching the data and setting it to the html elements. 然后,当您从服务器接收数据时,它是JSON格式的(我想是),您必须对其进行解析以将其转换为对象,然后再获取数据并将其设置为html元素。
$('#myId).append('<li><a href="#" PersonId="+Person[i].name+">Test</a></li>');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.