二级联动-在数据库中读出数据并显示在页面上

本文介绍如何利用JQuery、Ajax和MySQL实现网页上的省市联动效果。通过数据库建立省市表,在页面加载时获取省份信息,并在选择省份后动态加载对应城市。

使用jquery+ajax+mysql完成

用到的jar包:

用到的jquery为:

jquery-3.2.1.js

 实现思想:

页面加载的时候,显示省的信息,从数据库中拿到所有的省份信息并返回servlet中,再由servlet中传递到到页面来。

当省份下拉列表发生改变的时候触发函数,从数据库中拿到该省份对应的城市信息并添加到页面上来。

1、首先在数据库中建表tbl_pro(只建立了部分省市用来练习)

2、在myeclipse中创建web项目(ajax_day01)

 导入需要的jar包以及jquery。

3、新建html页面test2.html,并导入jquery

4、页面加载的时候省份的下拉列表里有内容。

5、新建一个servlet(TestServlet,映射路径为test.do)

 web.xml配置如下:

重写service方法:

6、新建一个类TestDao,完成和数据库的交互

在此之前我创建了BaseDao用于数据库连接

TestDao的内容如下:

 

对结果集的处理,跟dbutil的原理一样,也可以直接在上面的代码中直接处理。

至此,页面加载的时候就可以把省份的信息加载到了下拉列表里面了。

7、在省的select中绑定了onchange()函数

8、查询城市信息就和查询省的差不多了,只需要将sql语句改变就可以了。

转载于:https://www.cnblogs.com/syq816/p/7659478.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值