# Java Servlet JQuery 列表教程 > 原文： [http://zetcode.com/articles/javaservletjquerylist/](http://zetcode.com/articles/javaservletjquerylist/) 在 Java Servlet JQuery 列表教程中，我們展示了如何使用 JQuery 從 Java servlet 中獲取數據并將其顯示在 HTML 列表中。 我們使用 Gson 庫處理 JSON 數據格式。 該 Web 應用已部署在 Tomcat 服務器上。 Apache Tomcat 是由 Apache 軟件基金會（ASF）開發的開源 Java Servlet 容器。 它是最流行的 Java Web 服務器。 ## Java Servlet Servlet 是 Java 類，可響應特定類型的網絡請求-最常見的是 HTTP 請求。 Java servlet 用于創建 Web 應用。 它們在 servlet 容器（例如 Tomcat 或 Jetty）中運行。 現代 Java Web 開發使用在 servlet 之上構建的框架。 ## JSON 格式 JSON（JavaScript 對象表示法）是一種輕量級的數據交換格式。 人類很容易讀寫，機器也很容易解析和生成。 與 XML 相比，它不那么冗長且更具可讀性。 JSON 的官方 Internet 媒體類型為`application/json`。 JSON 文件擴展名是`.json`。 JSON 可直接由 JavaScript 使用。 ## Gson Gson 是一個開放源代碼 Java 庫，用于將 Java 對象序列化和反序列化到 JSON 或從 JSON 反序列化。 Gson 由 Google 創建。 ## Java servlet JQuery 列表示例 以下 Web 應用使用 Java Servlet 將數據（城市列表）以 JSON 格式發送到客戶端。 JQuery 用于執行請求并動態構建 HTML 列表。 ```java ├── pom.xml └── src ├── main │ ├── java │ │ └── com │ │ └── zetcode │ │ ├── bean │ │ │ └── City.java │ │ ├── service │ │ │ └── CityService.java │ │ └── web │ │ └── GetCities.java │ ├── resources │ └── webapp │ ├── index.html │ ├── META-INF │ │ └── context.xml │ └── WEB-INF └── test └── java ``` 這是項目結構。 `pom.xml` ```java <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.zetcode</groupId> <artifactId>JavaServleJqueryList</artifactId> <version>1.0-SNAPSHOT</version> <packaging>war</packaging> <name>JavaServleJqueryList</name> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <maven.compiler.source>1.8</maven.compiler.source> <maven.compiler.target>1.8</maven.compiler.target> </properties> <dependencies> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>3.1.0</version> <scope>provided</scope> </dependency> <dependency> <groupId>com.google.code.gson</groupId> <artifactId>gson</artifactId> <version>2.8.0</version> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-war-plugin</artifactId> <version>2.3</version> <configuration> <failOnMissingWebXml>false</failOnMissingWebXml> </configuration> </plugin> </plugins> </build> </project> ``` 這是 Maven POM 文件。 我們有兩個工件：用于 Java servlet 的`javax.servlet-api`和用于 Java JSON 處理的`gson`。 `maven-war-plugin`負責收集 Web 應用的所有工件依賴項，類和資源，并將它們打包到 Web 應用存檔（WAR）中。 `context.xml` ```java <?xml version="1.0" encoding="UTF-8"?> <Context path="/JavaServleJqueryList"/> ``` 在 Tomcat `context.xml`文件中，我們定義了上下文路徑。 它是 Web 應用的名稱。 `City.java` ```java package com.zetcode.bean; import com.google.gson.annotations.Expose; public class City { private Long id; @Expose private String name; @Expose private int population; public City() { } public City(Long id, String name, int population) { this.id = id; this.name = name; this.population = population; } public Long getId() { return id; } public void setId(Long id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public int getPopulation() { return population; } public void setPopulation(int population) { this.population = population; } @Override public String toString() { return "City{" + "id=" + id + ", name=" + name + ", population=" + population + '}'; } } ``` 這是`City` bean。 它具有三個屬性：id，名稱和人口。 Gson 的`@Expose`批注指示應公開哪些成員以進行 JSON 序列化或反序列化。 在我們的例子中，我們忽略了 ID，因為它與客戶無關。 這樣我們可以節省一些帶寬。 `GetCities.java` ```java package com.zetcode.web; import com.google.gson.Gson; import com.google.gson.GsonBuilder; import com.zetcode.bean.City; import com.zetcode.service.CityService; import java.io.IOException; import java.io.PrintWriter; import java.util.List; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet(name = "GetCities", urlPatterns = {"/GetCities"}) public class GetCities extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("application/json;charset=UTF-8"); try (PrintWriter out = response.getWriter()) { List<City> cities = CityService.getCities(); Gson gson = new GsonBuilder() .excludeFieldsWithoutExposeAnnotation() .create(); out.print(gson.toJson(cities)); } } } ``` 這是`GetCities` servlet。 它從服務類檢索數據，并將它們以 JSON 格式返回給客戶端。 ```java response.setContentType("application/json;charset=UTF-8"); ``` 我們將響應對象的內容類型設置為`application/json`。 ```java try (PrintWriter out = response.getWriter()) { ``` 我們得到了`PrintWriter`，用于將字符文本發送到客戶端。 ```java List<City> cities = CityService.getCities(); ``` 從`CityService`中，我們可以獲得城市列表。 ```java Gson gson = new GsonBuilder() .excludeFieldsWithoutExposeAnnotation() .create(); ``` 我們創建并配置`Gson`類，這是使用 Gson 的主要類。 `excludeFieldsWithoutExposeAnnotation()`啟用`@Expose`批注。 ```java out.print(gson.toJson(cities)); ``` 使用`toJson()`方法，我們將 Java 列表轉換為 JSON 數組。 數組被寫入編寫器。 數組未命名。 `CityService.java` ```java package com.zetcode.service; import com.zetcode.bean.City; import java.util.ArrayList; import java.util.List; public class CityService { public static List<City> getCities() { List<City> cities = new ArrayList<>(); cities.add(new City(1L, "Bratislava", 432000)); cities.add(new City(2L, "Budapest", 1759000)); cities.add(new City(3L, "Prague", 1280000)); cities.add(new City(4L, "Warsaw", 1748000)); cities.add(new City(5L, "Los Angeles", 3971000)); cities.add(new City(6L, "New York", 8550000)); cities.add(new City(7L, "Edinburgh", 464000)); cities.add(new City(8L, "Berlin", 3671000)); return cities; } } ``` `CityService`的`getCities()`方法返回城市對象的列表。 `index.html` ```java <!DOCTYPE html> <html> <head> <title>Start Page</title> <meta charset="UTF-8"> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body> <button id="mybtn">Get cities</button> <div> <ul id="output"> </ul> </div> <script> $('#mybtn').click(function () { $.getJSON('GetCities', function (data) { $("ul#output > li").remove(); $.each(data, function (key, value) { $("#output").append('<li>' + value['name'] + " " + value['population'] + '</li>'); }); }); }); </script> </body> </html> ``` 這是主頁。 ```java <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> ``` 我們包括 JQuery 庫。 ```java <button id="mybtn">Get cities</button> ``` 該按鈕執行請求。 ```java <div> <ul id="output"> </ul> </div> ``` 返回的數據將被寫入這些元素內。 ```java $('#mybtn').click(function () { $.getJSON('GetCities', function (data) { $("ul#output > li").remove(); $.each(data, function (key, value) { $("#output").append('<li>' + value['name'] + " " + value['population'] + '</li>'); }); }); }); ``` 我們為按鈕添加一個點擊事件處理器。 `$.getJSON()`方法使用 GET HTTP 請求從`GetCities` Servlet 加載 JSON 編碼的數據。 使用`remove()`方法，我們刪除以前的元素（如果存在）。 使用`$.each()`，我們遍歷 JSON 數據并將其附加到`<li>`標簽內部的輸出中。  圖：Java Servlet JQuery 列表示例 在圖中，我們可以看到 HTML 列表中的數據：城市及其人口。 在本教程中，我們使用了 JQuery 從 Java servlet 獲取 JSON 數據并構建 HTML 列表。 您可能也對以下相關教程感興趣： [Gson 教程](/java/gson/)， [Java servlet JSON 教程](/articles/javaservletjson/)，[從 Java Servlet 提供純文本](/articles/javaservlettext/)， [Java servlet 復選框教程](/articles/javaservletcheckbox/)， [Java servlet 圖像教程](/articles/javaservletimage/)， [Java Servlet HTTP 標頭](/articles/javaservlethttpheaders/)或 [Java 教程](/lang/java/)