JQuery省市联动

一、搭建环境(在仿百度的环境下)

1.在之前仿百度的数据库中新建city表

2.准备jsp页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>

省份: <select name="province" id ="province">
<option value="" >-请选择 -
<option value="1" >广东
<option value="2" >湖南
<option value="3" >湖北
<option value="4" >四川
</select>

城市: <select name="city" id="city">
<option value="" >-请选择 -
</select>

</body>

页面结果:

最终框架:


二、dao和impl层实现(需要添加CityBean和list集合)

dao接口写方法:

1
2
3
public interface CityDao {
List<CityBean> findCity(int pid) throws SQLException;
}

daoImpl具体实现接口方法:

1
2
3
4
5
6
7
8
9
10
public class CityDaoImpl implements CityDao{
@Override
public List<CityBean> findCity(int pid) throws SQLException {
//1.使用DBUtils的对象
QueryRunner runner=new QueryRunner(JDBCUtil02.getDataSource());
//2.调用方法
String sql="select * from city where pid=?";
return runner.query(sql, new BeanListHandler<CityBean>(CityBean.class),pid);
}
}

三、Servlet实现(使用XStream框架)

Servlet三步骤:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//1.获取省份id  (pid)
int pid=Integer.parseInt(request.getParameter("pid"));

//2.dao实现 找到所有符合的城市
CityDao dao=new CityDaoImpl();
List<CityBean> list = dao.findCity(pid);

//3.返回数据 手动拼 ---> XStream转bean对象成xml
XStream xStream=new XStream();

//想把id做成属性
// xStream.useAttributeFor(CityBean.class,"id");

//设置别名
xStream.alias("city",CityBean.class);

//一个对象 ---> xml字符串
String xml=xStream.toXML(list);

response.setContentType("text/xml;charset=utf-8"); //返回的是一份有中文的xml文件(小心坑)!!!!!!!
response.getWriter().write(xml);

第三步需要用Xstream–将bean对象为xml(导入jar包)

尝试手动添加pid,然后看看转换出来的样子:


四、 完善jsp页面和功能#

city.jsp页面引入jq的包和功能实现文件city.js(单独写)

city.jsp页面:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <!-- 调用jq包 -->
<script type="text/javascript" src="js/city.js"></script> <!-- 具体的jq代码去city.js找 -->
</head>
<body>

省份: <select name="province" id ="province">
<option value="" >-请选择 -
<option value="1" >广东
<option value="2" >湖南
<option value="3" >湖北
<option value="4" >四川
</select>

城市: <select name="city" id="city">
<option value="" >-请选择 -
</select>
</body>

完成功能的city.js文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(function(){
//1.找到省份元素
$("#province").change(function(){

//2.一旦里面的值改变---去找城市数据
//获取值
var pid=$(this).val();

$.post("CityServlet",{pid:pid},function(data,status){ //pid:pid(省份id值)
//先清空以前的值
$("#city").html("<option value=''> -请选择-");

//遍历:
$(data).find("city").each(function(){ // 从data里面使用find找到xml文件所有city标签---each迭代
//取city的孩子chidren
var id=$(this).children("id").text(); //val是取值 text是转成文本
var cname=$(this).children("cname").text(); //val是取值 text是转成文本

$("#city").append("<option value='"+id+"'>"+cname);
});
});
});
});

city.js文件步骤分析:

1
2
3
4
5
6
7
1. 先要通过province的id值change获取省份元素
2. 获取pid的值
2.1 使用post来响应
2.1.1 通过html()来赋值为0(清空)
2.1.2 循环取出xml文件内的cname值
通过find()来找到所有的cname标---然后each迭代--通过children找到所属的cname值
找到之后通过append()添加

五、代码框架

代码框架:


六、Json

服务器和客户端数据传输方式:

  • xml
1
2
3
4
5
6
7
8
9
10
11
12
<list>
<city>
<id>1<id>
<pid>1</pid>
<cname>深圳</cname>
</city>
<city >
<id>2<id>
<pid>1</pid>
<cname>东莞</cname>
</city>
</list>
  • json
1
2
3
4
5
6
7
8
9
10
11
12
13
 [
{
"cname": "深圳",
"id": 1,
"pid": 1
},
{
"cname": "东莞",
"id": 2,
"pid": 1
}
...
]

使用json格式数据显示省市联动效果

1. 导入jar包

2. 编写servlet代码(第三步不同)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

//1. 获取参数
int pid = Integer.parseInt(request.getParameter("pid"));

//2 dao实现--找出所有的城市
CityDao dao = new CityDaoImpl();
List<CityBean> list = dao.findCity(pid);

//3. 把list ---> json数据
//JSONArray ---> 变成数组 , 集合 []
//JSONObject ---> 变成简单的数据 { name : zhangsan , age:18}

JSONArray jsonArray = JSONArray.fromObject(list); //转成对象
String json = jsonArray.toString(); //弄成字符串

response.setContentType("text/html;charset=utf-8");
response.getWriter().write(json);

3. 编写页面

还是原来的主页面只不过跳转现在的json.js代码:

1
2
3
4
5
6
7
8
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <!-- 调用jq包 -->
<!-- <script type="text/javascript" src="js/city.js"></script> 具体的jq代码去city.js找 -->
<script type="text/javascript" src="js/json.js"></script> <!-- 具体的jq代码去json.js找 -->
</head>

json.js代码(只是each不同)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(function() {
//1.找到省份的元素
$("#province").change(function() {
//2. 一旦里面的值发生了改变,那么就去请求该省份的城市数据
//$("#province").varl();
var pid = $(this).val();

$.post( "CityServlet02",{pid:pid} ,function(data,status){

//先清空
$("#city").html("<option value='' >-请选择-");
//再遍历,追加
$(data).each(function(index , c) {
$("#city").append("<option value='"+c.id+"' >"+c.cname)
});
},"json" );

});
});

两者展示的js文件区别(each迭代方式不同)


×

纯属好玩

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

文章目录
  1. 1. 一、搭建环境(在仿百度的环境下)
  2. 2. 二、dao和impl层实现(需要添加CityBean和list集合)
  3. 3. 三、Servlet实现(使用XStream框架)
  4. 4. 四、 完善jsp页面和功能#
  5. 5. 五、代码框架
  6. 6. 六、Json
    1. 6.1. 服务器和客户端数据传输方式:
    2. 6.2. 使用json格式数据显示省市联动效果
,