使用Ajax实现三级联动
2024-09-07 16:06:15
首先准备数据库只有一张表
分析数据库根据 parentid来查
jsp代码 servlet代码
<%--
Created by IntelliJ IDEA.
User: 60590
Date: 2019/12/4
Time: 20:26
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<base href=<%= request.getContextPath()%>/>
<script src="js/jquery-1.9.1.js"></script>
<script>
//当页面加载时执行change1方法来获取省 使用jq中的ajax 简洁方式
function change1() {
$.post("servlet/AreaServlet","id=0",function (result) {
//遍历集合
for (var i in result){
//获取标签 append 可以识别标签
$("#pro").append("<option value='"+result[i].areaid+"'>"+result[i].areaname+"</option>")
}
},"json");
}
//当省改变时 执行此方法 并且把当前省的value传进来
function change2(val) {
$.post("servlet/AreaServlet","id="+val,function (result) {
$("#city").html("<option>--请选择--</option>");
for (var i in result){
$("#city").append("<option value='"+result[i].areaid+"'>"+result[i].areaname+"</option>")
}
},"json");
}
//当市改变时 执行此方法
function change3(val) {
$.post("servlet/AreaServlet","id="+val,function (result) {
$("#con").html("<option>--请选择--</option>");
for (var i in result){
$("#con").append("<option value='"+result[i].areaid+"'>"+result[i].areaname+"</option>")
}
},"json");
}
</script>
</head>
<body onload="change1()">
省:<select id="pro" onchange="change2(this.value)">
<option>---请选择---</option>
</select>
市:<select id="city" onchange="change3(this.value)">
<option>---请选择---</option>
</select>
县:<select id="con">
<option>---请选择---</option>
</select>
</body>
</html>
package com.bjsxt.servlet; import com.bjsxt.entity.Area;
import com.bjsxt.serviceIml.AreaServiceIml;
import com.google.gson.Gson;
import org.apache.ibatis.annotations.Select; import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List; /**
* @program: JavaEE
* @description
* @author: wuhao
* @create: 2019-12-04 20:22
**/
@WebServlet("/servlet/AreaServlet")
public class AreaServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=UTF-8");
//接受参数
String id = req.getParameter("id");
int i = Integer.parseInt(id);
//处理参数
AreaServiceIml areaServiceIml = new AreaServiceIml();
List<Area> list = areaServiceIml.findAll(i); //转换为json 格式 需要导入Gson的jar包
Gson gson = new Gson();
String s = gson.toJson(list);
resp.getWriter().print(s); }
}
最新文章
- JavaScript高级程序设计--表单脚本
- 项目vue2.0仿外卖APP(五)
- 基础的jdbc连接数据库操作
- android 底层入门开发(二)
- HBase配置性能调优(转)
- Emit学习(3) - OpCodes - 循环和异常
- TfS+强制删除签出锁定项
- Uploadify v3.2.1 上传图片并预览
- 关闭VS实时调试器
- 乘号在python中的用法,用乘号将元素重复在列表中
- Clojure学习资料
- wordpress教程之WP_Query()类
- 基于Https协议返回Jason字符串
- 【PHP篇】面向对象基础
- vue better-scroll用法
- LINQ to Entities 比较日期
- JS 中document.URL 和 windows.location.href 的区别
- HTML(二):表格元素
- Java进阶知识点:并发容器背后的设计理念
- 根据wsdl文件生成WebService客户端代码