JavaWeb筆記-23-ajax請求案例---省市聯動
阿新 • • 發佈：2018-11-03
省市聯動
1. 頁面 <select name="province"> <option>===請選擇省份===</option> </select> <select name="city"> <option>===請選擇城市===</option> </select> 2. ProvinceServlet: 當頁面載入完畢後馬上請求ProvinceServlet！ 1）載入china.xml檔案，把所有的省的名稱使用字串傳送給客戶端！ 3. 頁面的工作-1 將省份省份新增到<select name="province">中 1）獲取ProvinceServlet傳送的字串，使用逗號分隔，得到陣列 2）迴圈遍歷每個字串（省份的名稱）。 3）使用每個字串建立一個使用每個字串建立一個<option>元素 4）將建立的<option>元素新增到<select name="province">這個元素中 4. CityServlet 當頁面選擇某個省時，請求CityServlet： 1）得到省份的名稱，載入china.xml檔案，查詢出該省份對應的元素物件！ 2）把這個元素轉換成xml字串，傳送給客戶端 5. 頁面的工作-2 1）把<select name="city">中的所有子元素刪除，但不要刪除<option>===請選擇城市===</option> 2）得到伺服器的響應結果：document 3）獲取所有的<city>子元素，迴圈遍歷，得到<city>的內容 4）使用每個<city>的內容建立一個<option>元素，新增到<select name="city">
ssld.jsp
//此jsp頁面工作：
1）從provinceServlet中得到省份，顯示在第一個下拉選擇框中
2）當第一個選擇框選擇改變時，請求CityServlet，得到對應省份，顯示在第二個下拉選擇框中。
<script type="text/javascript">
/*
1. a> 在文件載入完畢時傳送請求，
b> 使用ajax請求ProvinceServlet，得到所有省份名稱。
c> 顯示在<select name="province"/>中
*/
//得到XMLHttpRequest ProvinceServlet
@WebServlet("/ProvinceServlet")
public class ProvinceServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
//載入china.xml檔案，把所有的省的名稱使用字串傳送給客戶端
//使用dom4j操作xml檔案
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
try {
// 1）建立解析器
SAXReader saxReader = new SAXReader();
InputStream input = this.getClass().getResourceAsStream("/china.xml");
// 2）呼叫解析器讀方法，得到document
Document document = saxReader.read(input);
/*
* 查詢所有province的name屬性，得到屬性物件 （使用xpath表示式進行查詢）
*
* 迴圈遍歷，把所有的屬性值連線成一個字串，傳送給客戶端
*/
List arrList = document.selectNodes("//province/@name");
//使用StringBuilder儲存由屬性值構成的字串。StringBuilder是一個可變的字元序列。
StringBuilder sb = new StringBuilder();
for (int i = 0; i < arrList.size(); i++) {
sb.append(((Attribute) arrList.get(i)).getValue());
if(i < arrList.size() - 1){
sb.append(",");
}
}
//response向客戶端輸出內容
response.getWriter().print(sb);
} catch(Exception e) {
throw new RuntimeException(e);
}
}
}
CityServlet
@WebServlet("/CityServlet")
public class CityServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/*
* 獲取省份名稱，載入該省對應的<province>元素！
* 把元素轉換成字串傳送給客戶端
*/
/*
* 1. 獲取省份的名稱
* 2. 使用省份名稱查詢到對應的<province>元素
* 3. 把<province>元素轉換成字串，傳送！
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
//設定text/xml
response.setContentType("text/xml;charset=utf-8");
//得到省份名稱
String pname = request.getParameter("pname");
try{
//得到解析器,得到資源流，得到document
SAXReader saxReader = new SAXReader();
InputStream input = this.getClass().getResourceAsStream("/china.xml");
Document document = saxReader.read(input);
//得到name屬性為pname的元素
Element proEle = (Element) document.selectSingleNode("//province[@name='" + pname + "']");
//把proEle元素轉換為字串
String proStr = proEle.asXML();
//將字串傳送給客戶端
response.getWriter().print(proStr);
}catch(Exception e){
throw new RuntimeException(e);
}
}
}