• <nav id="wkkge"><strong id="wkkge"></strong></nav>
  • <menu id="wkkge"></menu>
  • AJAX教程

    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

     

    <servlet>
            <servlet-name>SearchServlet</servlet-name>
            <servlet-class>com.bjpowernode.controller.SearchServlet</servlet-class>
        </servlet>
        <servlet-mapping>
            <servlet-name>SearchServlet</servlet-name>
            <url-pattern>/searchProvince</url-pattern>
        </servlet-mapping>

     

    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>, 這叫做級聯查詢。

     

    全部教程
  • <nav id="wkkge"><strong id="wkkge"></strong></nav>
  • <menu id="wkkge"></menu>
  • 面对面棋牌游戏