jsp页面
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'select.jsp' starting page</title>
<!--
Ajax案例之三级联动：
功能需求：
页面中有三个下拉框选项，分别为省下拉框，市下拉框，区/县下拉框
选择省，则市下拉框中出现对应的该省下的市信息，选择市，则区/县下拉框中
出现对应的该市下面的区/县信息
技术分析:
ajax技术+jsp+servlet+jdbc
需求分析(思路):
1、创建页面：页面中有三个下拉框，分别为省、市、区/县
2、页面加载成功发起ajax请求，请求省的信息，并将响应结果
填充到省下拉框中
3、选择省触发一个新的js函数 的执行，该函数中发起新的ajax请求
请求该省下的市信息，并将响应数据填充到市下拉框
4、选择市信息触发一个新的js函数的执行，该函数中发起新的ajax请求
请求该市下的区/县信息，并将数据填充到区/县下拉框中
数据库设计：
创建表(area)：存储了省、市、区/县信息
设计表实现一：只存储了数据，但是数据之间的层级关系没有存储。
地区id:areaid
地区名:areaname
设计表实现二：
地区id:areaid
地区名:areaname
地区上级id：parentid
sql语句设计:
查询所有的省信息:
select * from area where parentid=0;
查询选择的省的市信息(假如：选择的山东省的areaid为110000,)
select * from area where parentid=110000;
查询选择的市的区/县信息(假如：选择的山东省的济南市areaid为110001)
select * from area where parentid =110001;
代码中
select * from area where parentid=?;
数据库实现:将资料中提供的area.sql文件导入到数据库中即可
功能实现：参照源码即可
代码缺陷：
发现请求省，市，县的代码中基本上是一致的。代码的冗余量有点大
解决:
考虑使用封装
实现:形同的保留，不同的传参。具体参照源码
-->
<!--引入jQuery文件 -->
<script type="text/javascript" src="js/j.js"></script>
<!--声明js代码域 -->
<script type="text/javascript">
//页面加载成功请求省的信息
$(function(){
//发起ajax请求，请求所有的省信息
getData(0,"pre");
//页面加载成功给省下拉框添加onchange事件:请求选择的省下的市信息
$("#pre").change(function(){
//获取当前选择的省的areaid
var areaid=$("#pre").val();
//发起ajax请求，请求当前省的市信息
getData(areaid, "city");
});
//页面加载成功给市下拉框添加onchange事件
$("#city").change(function(){
//获取当前选择的市的areaid
var areaid=$("#city").val();
getData(areaid,"town");
})
//封装公共方法
function getData(areaid,sid){
//发起ajax请求，请求当前省的市信息
$.get("area",{parentid:areaid},function(data){
//使用eval方法将数据转换为js对象
eval("var areas="+data);
//获取下拉框对象
var sel=$("#"+sid);
//清空原有内容
sel.empty();
//遍历
for(var i=0;i<areas.length;i++){
sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>")
}
//触发省下拉框的change事件
$("#"+sid).trigger("change");
})
}
})
</script>
</head>
<body style="background-color: gray;">
<div style="margin: auto;width: 750px;margin-top: 200px;">
省: <select name="" id="pre" style="width: 200px;height: 30px;"></select>
市: <select name="" id="city" style="width: 200px;height: 30px;"></select>
区\县: <select name="" id="town" style="width: 200px;height: 30px;"></select>
</div>
</body>
</html>
servlet(将数据查询结果以json格式传递给ajax)
package com.servlet;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.pojo.Area;
import com.service.AreaService;
import com.service.impl.AreaServiceImpl;
import com.google.gson.Gson;
public class AreaServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
//设置请求编码格式
req.setCharacterEncoding("utf-8");
//设置响应编码格式
resp.setContentType("text/html;charset=utf-8");
//获取请求信息
String pid=req.getParameter("parentid");
//处理请求
//获取业务层对象
AreaService as=new AreaServiceImpl();
List<Area> la=as.getAreaInfoService(pid);
//响应处理结果
//直接响应
resp.getWriter().write(new Gson().toJson(la));
}
}
service(将查询结果提供给servlet)
public class AreaServiceImpl implements AreaService{
//创建Dao层对象
AreaDao ad=new AreaDaoImpl();
//根据pid查询地区信息
@Override
public List<Area> getAreaInfoService(String pid) {
return ad.getAreaInfoDao(pid);
}
}
dao(进行数据查询)
package com.dao.impl;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;
import com.dao.AreaDao;
import com.pojo.Area;
import com.util.DBUtil;
public class AreaDaoImpl implements AreaDao{
//根据pid查询地区信息
@Override
public List<Area> getAreaInfoDao(String pid) {
//声明jdbc变量
Connection conn=null;
PreparedStatement ps=null;
ResultSet rs=null;
//声明变量
ArrayList<Area> la=null;
try {
//获取连接
conn=DBUtil.getConnection();
//创建SQL命令
String sql="select * from area where parentid=?";
//创建SQL命名对象
ps=conn.prepareStatement(sql);
//给占位符赋值
ps.setString(1,pid);
//执行sql
rs=ps.executeQuery();
la=new ArrayList<>();
//遍历结果
while (rs.next()) {
//创建实体类对象
Area a=new Area();
a.setAreaid(rs.getInt("areaid"));
a.setAreaname(rs.getString("areaname"));
a.setParentid(rs.getInt("parentid"));
a.setArealevel(rs.getInt("arealevel"));
a.setStatus(rs.getInt("status"));
la.add(a);
}
//关闭资源
} catch (Exception e) {
e.printStackTrace();
}finally{
DBUtil.closeAll(rs, ps, conn);
}
//返回
return la;
}
}
DButil(连接数据库工具类)
package com.bjsxt.util;
import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Properties;
public class DBUtil {
//声明全局变量记录jdbc参数
private static String driver;
private static String url;
private static String username;
private static String password;
//使用静态代码块，在类加载时即完成对属性文件的读取
static{
//动态获取属性配置文件的流对象
InputStream in=DBUtil.class.getResourceAsStream("/db.properties");
//创建Properties对象
Properties p=new Properties();
//加载
try {
p.load(in);//会将属性配置文件的所有数据存储到Properties对象中
//将读取的jdbc参数赋值给全局变量
driver=p.getProperty("driver");
url=p.getProperty("url");
username=p.getProperty("username");
password=p.getProperty("password");
//加载驱动
Class.forName(driver);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
//创建连接对象并返回
public static Connection getConnection(){
Connection conn=null;
try {
conn = DriverManager.getConnection(url, username, password);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return conn;
}
//关闭资源
public static void closeAll(ResultSet rs,Statement stmt,Connection conn){
try {
if(rs!=null){
rs.close();
}
} catch (SQLException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
try {
stmt.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
try {
conn.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
//封装增加删除修改的通用工具方法
/**
* @param sql SQL语句
* @param objs SQL语句占位符实参，如果没有参数则传入null
* @return 返回增删改的结果，类型为int
*/
public static int executeDML(String sql,Object...objs){
// 声明jdbc变量
Connection conn = null;
PreparedStatement ps = null;
int i = -1;
try {
// 获取连接对象
conn = DBUtil.getConnection();
// 开启事务管理
conn.setAutoCommit(false);
// 创建SQL命令对象
ps = conn.prepareStatement(sql);
// 给占位符赋值
if(objs!=null){
for(int j=0;j<objs.length;j++){
ps.setObject(j+1,objs[j]);
}
}
// 执行SQL
i = ps.executeUpdate();
conn.commit();
} catch (Exception e) {
try {
conn.rollback();
} catch (SQLException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
e.printStackTrace();
} finally {
DBUtil.closeAll(null, ps, conn);
}
return i;
}
}
db.properties
driver=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/project
username=root
password=1234
1256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
