如何实现省市区三级联动的效果

如题所述

1、在做这个小项目前的准备工作:
1.1、分析:
由于省、市、县城(区)这些数据是存储到了MySQL数据库中的,我们要通过后台servlet获取数据库中的数据,然后再通过转发或者重定向的方式将数据呈现到前台页面中。
1.2、需要导入的jar包有:
mysql驱动包:mysql-connector-Java-5.1.7-bin.jar
c3p0数据库连接池:c3p0-0.9.2.1.jar、mysql-connector-java-5.1.7-bin.jar(c3p0依赖包)
前台c标签(需要通过遍历的方式呈现——c:forEach):jstl-1.0.2.jar、standard-1.0.1.jar(jstl依赖包)
将集合或者数组转换成json数据格式(Jackson包):jackson-annotations-2.2.1.jar、jackson-core-2.2.1.jar、jackson-databind-2.2.1.jar
前台页面需要用到jQuery,故还需要导入jquery-1.7.2.js库文件
1.3、该小项目用到的技术:
jdbc的知识、servlet的知识、jquery的知识、Ajax的知识(局部刷新)、标签的知识、EL表达式的知识、JSP的知识
2、开发过程:
2.1、准备数据源
创建一个数据库,命名为thereaction并创建三个表——province(省)、city(市)、county(县/区)
2.2后台开发
创建三个Javabean分别是Province、City、County。(由于太过简单,这里就不粘代码了)
创建Java类和c3p0连接池实现与数据库的连接:DAO.java(实现获取数据库数据的功能)、jdbctools.java(实现获取数据库连接、释放连接的功能)、c3p0-config.xml
jdbctools.java代码如下:
[java] view plain copy
package com.xiaojie.dao;

import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import javax.sql.DataSource;

import com.mchange.v2.c3p0.ComboPooledDataSource;

public class Jdbctools {
private static DataSource ds=null;
//数据库连接池应只被初始化一次
static{
ds=new ComboPooledDataSource("helloc3p0");
}
//获取数据库连接
public static Connection getConnection() throws ClassNotFoundException, SQLException, IOException{
return ds.getConnection();
}
public static void shifanglianjie(Connection ct, PreparedStatement ps,ResultSet rs) {
if(rs!=null){
try {
rs.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
if(ps!=null){
try {
ps.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
if(ct!=null){
try {
ct.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}

}

DAO.java的代码如下
[java] view plain copy
package com.xiaojie.dao;

import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import com.xiaojie.beans.City;
import com.xiaojie.beans.County;
import com.xiaojie.beans.Province;

public class DAO {
public List<Province> getprovince(String sql ,Object...args) throws ClassNotFoundException, SQLException, IOException{
List<Province> provinces=new ArrayList<Province>();
//准备去查数据库
Connection ct=null;
ct=Jdbctools.getConnection();
System.out.println("获取到数据库的连接了");
PreparedStatement ps=null;
ResultSet rs=null;
ps=ct.prepareStatement(sql);
for(int i=0;i<args.length;i++){
ps.setObject(i+1, args[i]);
}
rs=ps.executeQuery();
while(rs.next()){
provinces.add(new Province(rs.getInt("province_id"),rs.getString("province_name")));
}
Jdbctools.shifanglianjie(ct, ps, rs);
return provinces;

}
public List<City> getcity(String sql ,Object...args) throws SQLException, ClassNotFoundException, IOException{
List<City> cities=new ArrayList<City>();
//准备去查数据库
Jdbctools jt=new Jdbctools();
Connection ct=null;
ct=jt.getConnection();
PreparedStatement ps=null;
ResultSet rs=null;
ps=ct.prepareStatement(sql);
for(int i=0;i<args.length;i++){
ps.setObject(i+1, args[i]);
}
rs=ps.executeQuery();
while(rs.next()){
cities.add(new City(rs.getInt("city_id"),rs.getString("city_name")));
}
jt.shifanglianjie(ct, ps, rs);
return cities;

}
public List<County> getcounty(String sql,Object...args ) throws SQLException, ClassNotFoundException, IOException{
List<County> counties=new ArrayList<County>();
//准备去查数据库
Jdbctools jt=new Jdbctools();
Connection ct=null;
ct=jt.getConnection();
PreparedStatement ps=null;
ResultSet rs=null;
ps=ct.prepareStatement(sql);
for(int i=0;i<args.length;i++){
ps.setObject(i+1, args[i]);
}
rs=ps.executeQuery();
while(rs.next()){
counties.add(new County(rs.getInt("county_id"),rs.getString("county_name")));
}
jt.shifanglianjie(ct, ps, rs);
return counties;

}
}
c3p0-config.xml的代码如下:
[html] view plain copy
<?xml version="1.0" encoding="UTF-8"?>
<c3p0-config>
<named-config name="helloc3p0">
<!-- 连接数据源的基本属性 -->
<property name="user">root</property>
<property name="password"></property>
<property name="driverClass">com.mysql.jdbc.Driver</property>
<property name="jdbcUrl">jdbc:mysql:///thereaction</property>

<!-- 若数据库中连接数不足时,一次向数据库服务器申请多少个连接 -->
<property name="acquireIncrement">5</property>
<!-- 初始化数据库连接池时连接的数量 -->
<property name="initialPoolSize">5</property>
<!-- 数据库连接池中的最小的数据库连接数 -->
<property name="minPoolSize">5</property>
<!-- 数据库连接池中的最大的数据库连接数 -->
<property name="maxPoolSize">10</property>
<!-- c3p0数据库连接可以维护的statement的个数 -->
<property name="maxStatements">20</property>
<!-- 每个连接同时可以使用的statement对象的个数 -->
<property name="maxStatementsPerConnection">5</property>
</named-config>
</c3p0-config>

创建servlet.java 文件
[java] view plain copy
package com.xiaojie.servlet;

import java.io.IOException;
import java.lang.reflect.Method;
import java.sql.SQLException;
import java.util.List;

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 com.fasterxml.jackson.databind.ObjectMapper;
import com.xiaojie.beans.City;
import com.xiaojie.beans.County;
import com.xiaojie.beans.Province;
import com.xiaojie.dao.DAO;
/**
* Servlet implementation class ThreeactiondServlet
*/
@WebServlet("/threeactiondServlet")
public class ThreeactiondServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String methodname=request.getParameter("method");
try {
Method method=getClass().getDeclaredMethod(methodname,HttpServletRequest.class,HttpServletResponse.class);
method.invoke(this, request,response);//调用各自的方法
} catch (Exception e) {
e.printStackTrace();
}
}
private DAO dao=new DAO();
protected void province(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException, ClassNotFoundException, SQLException {
System.out.println("province的servlet进入了");
String sql="select province_id,province_name from province";
List<Province> provinces=dao.getprovince(sql);
request.setAttribute("provinces", provinces);
System.out.println(provinces);
//注意:这里不能用重定向的形式,因为我们好不容易在request请求域中存储了省的信息,目的是在前台页面中能够从请求域中获取到我们存在数据库中的值
//故这里只能用转发的方式
request.getRequestDispatcher("/index2.jsp").forward(request, response);
}
protected void city(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException, ClassNotFoundException, SQLException {
System.out.println("city的servlet进入了");
String province_id=request.getParameter("province_id");
String sql="select city_id,city_name from city where province_id=?";
List<City> cities=dao.getcity(sql,Integer.parseInt(province_id));
ObjectMapper mapper=new ObjectMapper();
String result=mapper.writeValueAsString(cities);
System.out.println(result);
response.setContentType("text/javascript");
response.getWriter().print(result);
}
protected void county(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException, ClassNotFoundException, SQLException {
System.out.println("county的servlet进入了");
String city_id=request.getParameter("city_id");
String sql="select county_id,county_name from county where city_id=?";
List<County> counties=dao.getcounty(sql,Integer.parseInt(city_id));
ObjectMapper mapper=new ObjectMapper();
String result=mapper.writeValueAsString(counties);
System.out.println(result);
response.setContentType("text/javascript");
response.getWriter().print(result);
}
}
温馨提示:内容为网友见解,仅供参考
无其他回答

vue 省市区 三级联动 element-china-area-data
为了在Vue项目中实现省市区三级联动功能,我们首先需要安装相应的插件。使用npm进行安装:npm install element-china-area-data -S 接下来,我们引入此插件并将其整合至项目中,特别是在需要多选省份、城市、区县的场景下,可利用element UI中的多选框来实现汉字传输功能。为了提升代码的重用性,我们可以使用...

WPSExcel三级联动下拉菜单怎么做
 三级菜单与二级菜单的设置方法想通,在输入公式=indirect(),选择前一个单元格即可。最后,我们来看一下最终的效果吧: 至此,Excel三级联动下拉菜单就设置完成。同样,对于四五级菜单也是使用同样的方法,一是将关系进行对应命名,二是通过=indirect()建立联动关系。以上就是我们今天学到...

一张表 怎么 jquery省市区三级联动
4 西城区 2 5 廊坊 1 6 河南省 0 接下来使用 jquery + ajax来实现联动 第一级:parentid = 0 的所有菜单 第二级: 一级菜单的onchange()事件根据选中的value 比如:value=1 使用ajax获取 parentid=1的菜单,前台代码: 河北省 河南省 石家庄 廊坊 ...

网站开发中怎么实现省市区三级联动
省市区三级联动代码

excel表格怎么做一二三级?下拉菜单制作技巧~
首先,准备两个包含层次结构的数据表。以省市区三级联动菜单为例,我们可以将数据分别保存在三个工作表中,便于管理和设置。当然,您也可以将数据存放在同一个工作表中,并做好区分。接下来,为数据定义名称。选中数据范围,点击【公式】—【根据所选内容创建】,勾选首行,确定即可。这有助于在制作下拉...

使用AJAX实现省份和城市的级联显示
你后台把json数组转字符串之后不输出放进request对象中干嘛呢?我用的另一种方法实现的三级联动,省市区的: jQuery(document).ready(function($){ $("#province").change(function(){ var pid=$("#province").val(); var sectionObj=document.getElementById("section"); sectionO...

省市区三级联动下拉菜单应该怎么写
JS 省市区三级联动: <!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd">JS 省市区三级联动 var temp;var P = new Array();var C = new Array()...

c# 求WPF省市区三级联动代码,是从xml中得到省市区数据后添加到三个...
使用MVVM 数据绑定, 实现ICommand 接口与INotifyPropertyChanged接口

我在做asp.net全国省市区三级联动,用三个下拉框,但是不知道怎么用Ajax或...
如果你想ajax无刷新,就不能这样绑定 初始化或父级改变的时候,通过ajax请求数据,转换成json格式,然后遍历这个json,清空下拉框的option之后,增加到这个下拉框的option,即可 这个东西我做过

怎么实现HTML省市区
由于字数限制,只写了三个省,望采纳 <!DOCTYPE html> 三级联动 window.onload = function() { console.log(city) var oDiv = document.getElementById("div"); var sheng = document.createElement("select"); var shi = document.createElement("select"...

相似回答