后端写法
项目结构如下
1.我们需要先在bean包中创建一个
City对象 此对象与数据库中的表内容对应上
2.servlet中创建一个queryCity方法
接受前端页面传来的pid参数
String pid = req.getParameter("pid");调用service中的接口
service实现类中调用Dao中的方法
Dao中编写查询数据库的语句 并将其返回到servlet中的queryCity方法中
ArrayList<City> list =chService.queryCity(pid);将返回来的值转换成JSON
String s = JSON.toJSONString(list);并响应回前端
resp.getWriter().print(s);
前端页面写法
1.创建三个<select>标签 并给予id属性 以便后续调用
<select id="sheng">
</select>省
<select id="shi">
</select>市
<select id="qu">
</select>区2.在<head>内编写<script>内容
<script src="<%=request.getContextPath()%>/js/jquery-3.6.0.min.js"></script>
<script>
/**
*准备就绪函数
*当页面加载完毕之后加载此块内容
*/
$(function (){
getCityByPid(0,'#sheng') //传参(将pid和'#sheng'传过去)并调用getCityByPid方法 将市的内容回显到下拉菜单内
$("#sheng").change(function (){
let pid = $("#sheng").val(); //获取id="sheng"的标签的当前value值
getCityByPid(pid,'#shi'); //传参(将pid和'#shi'传过去)并调用getCityByPid方法 将市的内容回显到下拉菜单内
$("#shi").empty(); //当id="sheng"的标签发生改变时 将 id="shi"和id="qu"标签内的内容清空
$("#qu").empty();
});
$("#shi").change(function (){
let pid = $(this).val();
getCityByPid(pid,'#qu'); //传参(将pid和'#qu'传过去)并调用getCityByPid方法 将区的内容回显到下拉菜单内
$("#qu").empty(); //当id="shi"的标签发生改变时 将id="qu"标签内的内容清空
});
})
function getCityByPid(pid,area){
$.ajax({
/**
*url 将data发送到什么地方
*data 是将什么值传到url里面
*/
url:"<%=request.getContextPath()%>/Champion",
data:{pid:pid,m:"queryCity"},
type:"post",
dataType:"json",
success:function (obj){
$(area).append("<option>请选择</option>"); // 由于我们是用的.change(改变事件) 所以当我们点击一个 省或市或区的时候才能触发事件
// 如果不加个表头 会导致显示的第一个数据我们无法直接点击也就无法触发.change事件
for(let c of obj){
$(area).append("<option value="+c.id+">"+c.name+"</option>"); //将从后端返回的数据遍历添加进下拉菜单中
}
}
});
}
</script>标签：getCityByPid,qu,sheng,pid,Ajax,联动,shi,写法,id From： https://www.cnblogs.com/msy-2000/p/17088517.html