JQuery 獲取JSON資料方法
阿新 • • 發佈:2019-01-10
簡述:
使用jquery從後臺獲取JSON資料,顯示
知識點:
1. 使用了require JS 框架
2. 用Jquery的兩種方法獲取後臺資料
1)ajax 方法,傳回的都是json資料
2)getJSON, 直接封裝了一些引數{command : GetRegsiterJsonData}
專案結構:
程式碼:
test.html
<!DOCTYPE html> <head> <title>MyWebProject</title> <meta charset="utf-8" /> <link type="text/css" href="./lib/css/jquery-ui-1.8.19.custom.css" rel="stylesheet" /> <script type="text/javascript" src="./lib/js/require-jquery.js" data-main="js/main"> </script> </head> <body> <label id="dataArea"></label> </body> </html>
main.js
var loadJS = [ "jquery", ]; require.config({ baseUrl : "lib/js/", paths: { "jquery": "jquery-1.8.3.min", } }); //Function In main require(loadJS, LoadData("./Test")); //CallWebTrendsUri function LoadData(url){ $(function(){ $(document).ready(function(){ jQuery.ajax({ type:"GET", url: url + "?command=GetRegsiterJsonData", dataType:"json", global:false, success: function(data){ var jsonData = "1. 用統一的ajax方法<br/>"; var personList = data.personList; for(var i=0; i<personList.length; i++){ var name = personList[i].name; var age = personList[i].age; jsonData += "name: " + name + ", age: " + age + "<br/>"; } $("#dataArea").html(jsonData + "<br/>"); } }); $.getJSON(url, {command: "GetRegsiterJsonData"}, function(data){ var jsonData = "2. 用getJSON方法<br/>"; var personList = data.personList; $.each(personList, function(i){ var name = personList[i].name; var age = personList[i].age; jsonData += "name: " + name + ", age: " + age + "<br/>"; }); $("#dataArea").html($("#dataArea").html() + jsonData); }); }); }); };
web.xml 對映servlet
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5"> <display-name>MyProjectWeb</display-name> <welcome-file-list> <welcome-file>test.html</welcome-file> </welcome-file-list> <context-param> <param-name>log4jConfigLocation</param-name> <param-value>/WEB-INF/log4j.properties</param-value> </context-param> <servlet> <servlet-name>TestServlet</servlet-name> <servlet-class>mwp.servlet.TestServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>TestServlet</servlet-name> <url-pattern>/Test</url-pattern> </servlet-mapping> </web-app>
下面是後臺的servlet
TestServlet.java
package mwp.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import java.util.logging.Logger;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
class Person{
Person(){}
Person(String name, int age){
this.name = name;
this.age = age;
}
String name;
int age;
}
class Register{
String time;
List<Person> personList;
Register(String time){
this.time = time;
personList = new ArrayList<Person>();
}
void AddPerson(Person newPerson){
this.personList.add(newPerson);
}
}
public class TestServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
private static Logger logger = Logger.getAnonymousLogger();
private static Gson gson = new Gson();
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String command = (String)request.getParameter("command");
logger.info("TestServlet: doGet: command: " + command);
if("GetOnePersonJsonData".equals(command)){
Person person = new Person("John", 30);
String personToJson = gson.toJson(person);
out.append(personToJson);
logger.info("TestServlet: doGet: GetOnePersonJsonData: " + personToJson);
}else if("GetRegsiterJsonData".equals(command)){
//Intialize JSON Object
Register register = new Register("2012/12/16");
Person jeremy = new Person("Jeremy", 20);
Person tom = new Person("Tom", 43);
Person mary = new Person("Mary", 33);
register.AddPerson(jeremy);
register.AddPerson(tom);
register.AddPerson(mary);
String registerToJson = gson.toJson(register);
//Response to frontend
out.append(registerToJson);
logger.info("TestServlet: doGet: registerToJson: " + registerToJson);
}
}
}
返回的JSON資料如下:
{"time":"2012/12/16","personList":[{"name":"Jeremy","age":20},{"name":"Tom","age":43},{"name":"Mary","age":33}]}
輸出如下: