(1)准备标签
<!--准备select标签-->
<select id="province">
<option>选择省</option>
</select>
<select id="city">
<option>选择市</option>
</select>
<select id="county">
<option>选择区县</option>
</select>
(2)用ajax给服务器发送请求,获得省的数据
//发送请求
$.get('/ajax/area',//服务器访问路径
{pid: 0},//参数,根据数据库表可知省的pid等于0
function (data) {//服务器返回数据后执行的函数
for (var i = 0; i < data.length; i++) {
//拿到每一个对象
var obj = data[i];
//给省添加option标签
$("#province").append('<option value=' + obj.areaid + '>' + obj.areaname + '</option>');
}
}, "json");
(3)给省添加事件,每次选择后市都会出现对应的数据
$("#province").change(function () {
$("#city").empty();//如果没有清空,访问完后都会在下拉框中保留数据
var pid = $("#province").val();//获取省value的值
//给服务器发送请求,pid等于省的value的值
$.get('/ajax/area',
{pid: pid},
function (data) {
for (var i = 0; i < data.length; i++) {
//拿到每一个对象
var obj = data[i];
//给省添加option标签
$("#city").append('<option value=' + obj.areaid + '>' + obj.areaname + '</option>');
}
}, "json"
)
});
(4)给市添加事件,每次选择后县都会出现对应的数据
$("#city").change(function () {
$("#county").empty();
var pid = $("#city").val();
$.get('/ajax/area',
{pid: pid},
function (data) {
for (var i = 0; i < data.length; i++) {
//拿到每一个对象
var obj = data[i];
//给省添加option标签
$("#county").append('<option value=' + obj.areaid + '>' + obj.areaname + '</option>');
}
}, "json"
)
});
(5)结果展示
(6)controller层的servlet展示
@WebServlet("/area")
public class AreaServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取参数
String pid = request.getParameter("pid");
//调用service
AreaService areaService=new AreaServiceImpl();
List<Area> areas = areaService.selectList(Integer.valueOf(pid));
//响应数据
response.setContentType("text/html;charset=utf-8");
String str = JSON.toJSONString(areas);
response.getWriter().write(str);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}