使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例

2020-05-24 21:41:43易采站长站整理

pros.add(province);
}

} catch (SQLException e) {
throw new RuntimeException(e);
}

return pros;
}

将查到的数据放到后台,建立一个SelectedServlet类,用于接收查询到的所有省份的信息


response.setContentType("application/json;charset=utf-8");
response.setCharacterEncoding("utf-8");
request.setCharacterEncoding("utf-8");
//创建一个Place对象
ArrayList<Province> pros= new Place().findAllPro();
PrintWriter out = response.getWriter();
//将集合直接转换为Json对象
out.write(JSONArray.fromObject(pros).toString());

在这里会用到集合转换Json对象,我们需要导入以下几个包

然后我们开始写前台页面:


<body>
省份:<select id="province">
<option>--请选择省份--</option>
</select>

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

然后jQuery(由于我导入的jQuery版本比较低,所以使用的方法是getJSON,而不是getJson)


$.getJSON("SelectedServlet",function(data,textStatus){
var provinces = data;

var res = "";
for(var i =0;i<provinces.length;i++){
<span style="white-space:pre"> </span>res += "<option>"+provinces[i].place+"</option>";
}
$("#province").append(res);
});

这样就能在页面加载的时候获取到数据

然后我们再来做联动,首先给下拉框添加一个change事件,然后获取选中的信息,将选中的信息发送到另一个CityServlet中


//下拉框改变时触发的事件
$("#province").change(function(){
var seled = $("option:selected").html();

$("span").html(seled);
$.getJSON("CityServlet",{
"province":encodeURI(encodeURI(seled))
},function(data){
$("#city").html("");
var citys = data;
var res = "";
for(var i = 0;i<citys.length;i++){
res += "<option>"+citys[i].place+"</option>";
}
$("#city").append(res);
});

});

服务器通过获得的信息通过sql语句查询出来,SQL代码如下:


public ArrayList<City> findAllCityByPro(String name) {
ResultSet rs = null;
ArrayList<City> citys = null;