Java

1.1 案例三：使用JQuery完成仿百度的信息提示:1.1.1 需求:
在一個搜索頁面中,鍵盤輸入一些信息,在文本框下面給出一些提示信息(需要從服務器端進行查詢的).

1.1.2 分析：1.1.2.1 步驟分析：
? 創建一個數據庫和表:
? 設計一個頁面
? 文本框綁定一個事件.keyup
? 在keyup所觸發函數中:
n 獲得文本框的值.
n 將這個值異步提交到服務器.$.post();
n 提交到Servlet：
u 接收參數:
u 調用業務層--調用DAO: select * from .. Where xx like ?;
u 查詢之後頁面跳轉把數據顯示到一個表格中.
1.1.3 代碼實現:

創建數據庫和表:
CREATE TABLE words(
id INT PRIMARY KEY AUTO_INCREMENT,
word VARCHAR(20)
);
設計一個頁面：
<center><h1>黑馬一下</h1></center>
<center><input type="text" name="word" id="word" style="width:300px"/><input type="button" value="黑馬一下"><center>
<div id="d1" style="display:none;position:absolute;top:110px;left:494px;border:1px solid blue;width:300px;height:200px;"></div>
為文本框綁定事件:編寫jquery代碼
$(function(){
        // 為文本框綁定事件:
        $("#word").keyup(function(){
                // 獲得文本框的值:
                var val = $(this).val();
                if(val != ""){
                        // 異步將這個值提交給服務器:
                        $.post("/WEB15/ServletDemo5",{"val":val},function(data){
                                $("#d1").show();
                                $("#d1").html(data);
                        });
                }else{
                        $("#d1").hide();
                }
        });
});
 

1.2 使用JQuery完成一個省市聯動的案例:使用XML作為響應內容:1.2.1 需求:
2.

完成省市聯動的效果.市的信息從後臺服務器端獲得.通過AJAX使用這樣的功能!!!
1.2.2 分析:1.2.2.1 技術分析:
【XML作為響應文本】
List<City> list = new ArrayList<City>();
list.add(new City(1,”哈爾濱”));
list.add(new City(2,”齊齊哈爾”));
list.add(new City(3,”牡丹江”));
將list集合轉出XML：
<list>
<city>
<name>哈爾濱</name>

</city>
...
</list>
使用XStream工具:將Java對象轉成XML.
【XStream的概述】
Xstream是一種OXMapping 技術，是用來處理XML文件序列化的框架,在將javaBean序列化，或將XML文件反序列化的時候，不需要其它輔助類和映射文件，使得XML序列化不再繁瑣。【XStream的入門】
引入xstream需要的jar包:
入門:
@Test
br/>【XStream的入門】
引入xstream需要的jar包:
入門:
@Test
List<City> list = new ArrayList<City>();
list.add(new City(1,"哈爾濱"));
list.add(new City(2,"齊齊哈爾"));
list.add(new City(3,"牡丹江"));

            XStream stream = new XStream();

            // 設置標簽的別名：
            stream.alias("city", City.class);

            // 設置子標簽作為屬性進行顯示:
            stream.useAttributeFor(City.class, "id");

            String xml = stream.toXML(list);

            System.out.println(xml);
    }

1.2.2.2 步驟分析：
? 設計頁面:
? 為第一個下拉列表綁定事件:change
? 在change事件觸發的函數中:提交數據到Servlet.
? 在Servlet中:
n 接收數據:接收提交的省份的信息.
n Map<String,List<City>>
n 將集合轉成XML，將XML寫回到瀏覽器.
? 在回調函數中獲得XML中的市的信息.
? 生成一個option元素,將option元素添加到第二個下拉列表中。
1.2.3 代碼實現:
設計一個頁面:
<h1>省市聯動的案例</h1>
<select id="province">
<option value="">--請選擇--</option>
<option value="黑龍江">黑龍江</option>
<option value="吉林">吉林</option>
<option value="遼寧">遼寧</option>
</select>
<select id="city">
<option value="">--請選擇--</option>
</select>
為第一個列表綁定事件:
$(function(){
// 為第一個列表綁定事件:
$("#province").change(function(){
// 獲得下拉列表選中的值
var val = $(this).val();
// alert(val);
$.post("/WEB15/ServletDemo6",{"province":val},function(data){
// alert(data);
$("#city").html("<option>--請選擇--</option>");

                    $(data).find("city").each(function(){
                            var id = $(this).children("id").text();
                            var name = $(this).children("name").text();
                            // alert(name);
                            var op = "<option>"+name+"</option>";
                            $("#city").append(op);
                    });
            });
    });

});
1.3 使用Jquery完成省市聯動的案例:使用JSON作為響應數據:1.3.1 需求:

完成省市聯動的效果.市的信息從後臺服務器端獲得.通過AJAX使用這樣的功能!!!
1.3.2 分析:1.3.2.1 技術分析:
【JSON的概述】
JSON的概念:

JSON的案例:

• {key:value,key:value}
  • {id:1,name:aaa}
• [{key:value,key:value},{key:value,key:value}]
  • [{id:1,name:aaa},{id:2,name:bbb}]
    將對象轉成JSON:
    使用JSONLIB將Java中對象或集合轉成JSON.
• JSONArray :將數組或List集合轉成JSON的.
• JSONObject :將對象或Map集合轉成JSON的.
  1.3.3 代碼實現：

JavaWeb15-HTML篇筆記（三）