AJAX實例

用戶頁面發起一個請求， 使用servlet輸出數據到jsp

練習使用HttpServletResposne輸出。pint

使用servlet輸出一個字符串響應ajax請求

根據省份id查詢省份名稱

需求：用戶在文本框架輸入省份的編號id，在其他文本框顯示省份名稱

● 項目環境準備：

數據庫：springdb

數據表：

● 省份信息表：

CREATE TABLE `province` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`name` varchar(255) DEFAULT NULL COMMENT '省份名稱',

`jiancheng` varchar(255) DEFAULT NULL COMMENT '簡稱',

`shenghui` varchar(255) DEFAULT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT

CHARSET=utf8;

● 城市信息表：

CREATE TABLE `city` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`name` varchar(255) DEFAULT NULL,

`provinceid` int(11) DEFAULT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=17 DEFAULT

CHARSET=utf8;

表數據在課件資源目錄\數據庫文件\xxx.sql文件

● 項目結構：

項目是一個web應用， index.jsp發送請求， SearchServlet接收請求， 調用ProvinceDao從數據庫獲取指定id的省份名稱。

實現步驟：

1.在idea新建 web application : 項目名稱 ajaxweb

   2. 配置tomcat服務器

3. 創建library

項目中需要訪問數據庫，需要加入myql驅動

第一步：點擊“Project Structure”按鈕

第二步：添加jar

第三步：Modules添加依賴庫

在彈出的窗口選擇上面創建的庫mylib ，同時把tomcat庫也加入到當前項目

4. 在index.jsp中創建XMLHttpRequest對象

定義表單：

創建XMLHttpRequest對象

5. 創建ProvinceDao訪問數據庫

方法定義：

定義變量：

訪問數據庫：

finally 關閉資源

返回結果：

6. 創建Servlet 處理請求，返回結果給XMLHttpRequest對象

7. web.xml文件注冊SearchServlet

8. 部署項目，在瀏覽器訪問應用

 

---

使用json作為數據交換格式

需求：根據省份編號id，查詢省份的全部數據，數據格式json。

• 項目結構：

 

• 實現步驟：

1. 添加處理json的工具庫

jackson：是非常有名的處理json的工具庫。使用jackson可以實現java對象到json格式字符串的轉換，也可以實現json字符串轉為json對象。

添加jackson后

2.創建實體類Province

3.在ProvinceDao中增加方法，返回對象

方法定義：

數據庫操作：

其他代碼同selectProvinceName()方法。

4.創建新的Servlet對象

5.創建searchJson.jsp，獲取json數據

表單定義：

AJAX請求處理：

6. 部署應用，瀏覽器訪問

 

練習

1. 在文本框內輸入省份名稱中的某幾個字，把符合條件的省份名稱顯示一個

2.在html中加入一個<select>內容是省份名稱， 通過onchange()事件，把所有省份名稱添加到中。 把這個省份下的所有市名稱添加到另一個<select>, 這叫做級聯查詢。