创建数据库和表:
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序列化不再繁琐。br/>【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);
}
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的案例:
原文:http://blog.51cto.com/13517854/2123051