|
1.1 案例三：使用JQuery完成仿百度的信息提示:1.1.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();
}
});
});
完成省市联动的效果.市的信息从后台服务器端获得.通过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
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);
}
Ø 设计页面:
Ø 为第一个下拉列表绑定事件: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);
});
});
});
});
完成省市联动的效果.市的信息从后台服务器端获得.通过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 代码实现：
|