JavaWeb15-HTML篇笔记（三）

1.1 案例三：使用JQuery完成仿百度的信息提示:1.1.1 需求:
在一个搜索页面中,键盘输入一些信息,在文本框下面给出一些提示信息(需要从服务器端进行查询的).
JavaWeb15-HTML篇笔记（三）
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. JavaWeb15-HTML篇笔记（三）

完成省市联动的效果.市的信息从后台服务器端获得.通过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序列化不再繁琐。br/>【XStream的入门】
引入xstream需要的jar包:
![](http://i2.51cto.com/images/blog/201806/01/7cccddcfc73877db577778bfa100c38f.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
入门:
@Test
public void demo1(){
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篇笔记（三）

猜你喜欢