IT兄弟連 JavaWeb教程 AJAX以及JSON字元串經典案例
- 2019 年 10 月 5 日
- 筆記
版權聲明：本文為部落客原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。
本文鏈接：https://blog.csdn.net/ITXDL123/article/details/91039800
案例需求：客戶端發送AJAX請求伺服器端獲取用戶資訊的數據。
案例實現：
在伺服器端要將Java對象轉換成JSON字元串，如果使用拼接JSON字元串的方式非常繁瑣，並且非常容易出錯，所以一般會藉助第三方Jar包來輔助我們把Java對象編程JSON字元串。
在伺服器端將單個Java對象轉換成JSON字元串使用JSONObject類的靜態方法：formObject (Object object)，該方法返回一個JSONObject對象，調用該對象的toString()方法即可完成轉換。
在客戶端將JSON字元串轉換為JavaScript對象，常用的方法有如下幾種：
● 使用eval函數：
var jsonStr = 『{「id」:1,「name」:「張三」}』;
var obj = eval( " ( " + str + " ) " );
● 使用JSON.parse函數
var jsonStr = 『{「id」:1,「name」:「張三」}』;
var obj = JSON.parse(str);
可以發現使用JSON.parse函數可以更方便的將JSON字元串轉換為JavaScript對象，這也是推薦的方式。
下面的案例將演示如何使用Ajax從伺服器端查詢一個用戶資訊並使用json-lib.jar工具包將用戶對象轉換為JSON字元串然後返回到客戶端。
首先新建一個動態的Web工程，工程名為xdl_ajax_demo，項目構建成功後在lib目錄下添加json-lib.jar以及它的依賴包：
● commons-beanutils.jar
● commons-collections.jar
● common-logging.jar
● common-lang.jar
● ezmorph.jar
● json-lib.jar
然後再新建com.xdl.bean包並在包下定義一個User類，用來封裝用戶數據，包括以下屬性：
name：姓名
age：年齡
gender：性別
salary：薪水
User類的詳細程式碼如下：
package com.xdl.bean;
public class User {
private String name; //姓名 private int age; //年齡 private String gender; //性別 private double salary; //薪水 /** * 構造器 * @param name * @param age * @param gender * @param salary */ public User(String name, int age, String gender, double salary) { this.name = name; this.age = age; this.gender = gender; this.salary = salary; } /** * 無參構造器 */ public User(){ } //Get and Set方法 public String getName() { return name; } public void setName(String name) { this.name = name; } public int getAge() { return age; } public void setAge(int age) { this.age = age; } public String getGender() { return gender; } public void setGender(String gender) { this.gender = gender; } public double getSalary() { return salary; } public void setSalary(double salary) { this.salary = salary; }
}
接下來新建com.xdl.servlet包並在包下定義一個GetUserInfoServlet類，可以返回User對象的JSON字元串數據。詳細程式碼如下：
package com.xdl.servlet;
import com.xdl.bean.User;
import net.sf.json.JSONObject;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/getUserInfo")
public class GetUserInfoServlet extends HttpServlet {
@Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { User user = new User("三十畫生",26,"男",5000.0); String jsonStr = JSONObject.fromObject(user).toString(); response.setContentType("text/html;charset=UTF-8"); response.getWriter().write(jsonStr); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); }
}
編寫HTML頁面user.html，使用Ajax發送請求，把返回的用戶資訊JSON字元串經過解析後顯示到頁面上。詳細程式碼如下：
<meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function getUserInfo(){ var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp"); xhr.open('get','getUserInfo',true); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var userInfo = xhr.responseText; userInfo = JSON.parse(userInfo); document.getElementById("name").innerHTML = 'name:' + userInfo.name; document.getElementById("age").innerHTML = 'age:' + userInfo.age; document.getElementById("gender").innerHTML = 'gender:' + userInfo.gender; document.getElementById("salary").innerHTML = 'salary:' + userInfo.salary; } }; xhr.send(null); } </script>
<button type="button" onclick="getUserInfo()">獲取用戶資訊</button> <h2 id="name"></h2> <h2 id="age"></h2> <h2 id="gender"></h2> <h2 id="salary"></h2>
最後啟動Tomcat伺服器，然後打開瀏覽器並輸入http://localhost:8080/xdl_ajax_ demo/user.html，瀏覽器將顯示如圖4所示的頁面。
此時點擊獲取用戶資訊按鈕，網頁將發送Ajax請求獲取用戶資訊，最後瀏覽器將顯示如圖5所示的頁面，表示瀏覽器已經獲取到伺服器端返回的JSON格式的用戶數據，並且已經成功解析。
圖4 user.html
圖5 頁面成功接收並解析服務端返回的用戶資訊
案例需求：在上一個案例中，是客戶端發送AJAX請求，服務端返回所有用戶資訊。
案例實現：
在伺服器端將Java集合轉換為JSON字元串需要使用JSONArray類的靜態方法：formObject(Object object)，該方法返回一個JSONArray對象，調用該對象的toString()方法即可完成轉換。
下面將在之前xdl_ajax_demo項目的基礎上進行，演示了如何使用Ajax從伺服器端查詢一個用戶資訊列表並使用json-lib.jar工具包將用戶列表對象轉換為JSON字元串然後返回到客戶端。
首先在com.xdl.servlet包下定義GetUserInfoListServlet類，可以返回User對象集合的JSON字元串數據。詳細程式碼如下：
package com.xdl.servlet;
import com.xdl.bean.User;
import net.sf.json.JSONArray;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
@WebServlet("/getUserInfoList")
public class GetUserInfoListServlet extends HttpServlet {
@Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { User user1 = new User("三十畫生",26,"男",5000.0); User user2 = new User("二十畫生",24,"女",15000.0); List<User> userList = new ArrayList<>(); userList.add(user1); userList.add(user2); String jsonStr = JSONArray.fromObject(userList).toString(); response.setContentType("text/html;charset=UTF-8"); response.getWriter().write(jsonStr); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); }
}
編寫HTML頁面userlist.html，使用Ajax發送請求，把返回的用戶資訊列表的JSON字元串經過解析後顯示到頁面上。詳細程式碼如下：
<meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function getUserInfoList(){ var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp"); xhr.open('get','getUserInfoList',true); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var userInfoList = xhr.responseText; userInfoList = JSON.parse(userInfoList); var userInfoListTable = document.getElementById("userInfo List"); userInfoListTable.innerText = ''; var rowHead = userInfoListTable.insertRow(); rowHead.insertCell().innerHTML = 'NAME'; rowHead.insertCell().innerHTML = 'AGE'; rowHead.insertCell().innerHTML = 'GENDER'; rowHead.insertCell().innerHTML = 'SALARY'; for(var i = 0;i<userInfoList.length;i++){ var userInfo = userInfoList[i]; var row = userInfoListTable.insertRow(); row.insertCell().innerHTML = userInfo.name; row.insertCell().innerHTML = userInfo.age; row.insertCell().innerHTML = userInfo.gender; row.insertCell().innerHTML = userInfo.salary; } } } xhr.send(null); } </script>
<button type="button" onclick="getUserInfoList()">獲取用戶資訊列表</button> <table id="userInfoList"></table>
最後啟動Tomcat伺服器，然後打開瀏覽器並輸入http://localhost:8080/xdl_ajax_ demo/userlist.html，瀏覽器將顯示如圖6所示的頁面。
此時點擊獲取用戶資訊列表按鈕，網頁將發送Ajax請求獲取用戶資訊列表，最後瀏覽器將顯示如下圖7所示的頁面，表示瀏覽器已經獲取到伺服器端返回的JSON格式的用戶列表數據，並且已經成功解析。
圖6 userlist.html
圖7 頁面成功接收並解析服務端返回的用戶資訊列表
