您的位置：首页 > Web前端 > JQuery

【JavaScript&jQuery】省市区三级联动

2017-02-10 11:51 274 查看
HTML:

<%@page import="com.mysql.jdbc.Connection"%>
<%@ page language="java" import="java.util.*,com.ajax.connection.ConnectionUtil" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE HTML>
<html>
<head>
<title>ajax-省市区级联</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
*{padding:0px;margin:0px}
body{font-family: "微软雅黑";font-size:14px;}
fieldset{padding:80px;width: 485px;margin: 100px auto;border-radius:8px;}
#province,#city,#area{padding:6px;width:120px;}
</style>
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
</head>
<body>
<%
List<HashMap<String,Object>> maps = ConnectionUtil.findProvinces();
pageContext.setAttribute("provinces", maps);
%>

<fieldset>
<legend>省市区三级联动</legend>
省份:
<select id="province" onchange="select_citys(this)">
<option value="">-请选择-</option>
<!-- 循环显示所有省份 -->
<c:forEach var="pv" items="${provinces}">
<option value="${pv.id}">${pv.name}</option>
</c:forEach>
</select>
城市:
<select id="city" onchange="select_areas(this)">
<option value="">-请选择-</option>
</select>
区域:
<select id="area">
<option value="">-请选择-</option>
</select>
</fieldset>

<script type="text/javascript">
//通过省份ID查询查询所有的城市信息
function select_citys(obj){
var provinceId = $(obj).val();
if(!provinceId)return; // 声明变量就要判断是否为null
$.ajax({
type:"post",//请求方式get/post
url:"${ctx}/CityServlet",//请求对应的地址
data:{"provinceId":provinceId},//往服务器传递的参数，
success:function(data){//服务器交互成功调用的回调函数，data就是服务器端传递出来的数据
var jdata = data.trim(); // 去前后空格
if(jdata=="fail"){
alert("查询失败!");
}else{
var jsonData = eval(jdata);//将字符串的json对象转换成json
$("#area").html("<option>-请选择-</option>");
append_template(jsonData,"city");
}
}
});
};

//通过省份ID查询查询所有的城市信息
function select_areas(obj){
var cityId = $(obj).val();
if(!cityId)return;
$.ajax({
type:"post",
url:"${ctx}/AreaServlet",
data:{"cityId":cityId},
success:function(data){
var jdata = data.trim();
if(jdata=="fail"){
alert("查询失败!");
}else{
var jsonData = eval(jdata);
append_template(jsonData,"area");
}
}
});
};

//封装其通用内容
function append_template(jsonData,target){
var length = jsonData.length;
var html = "<option>-请选择-</option>";
for(var i=0;i<length;i++){
html +="<option value='"+jsonData[i].id+"'>"+jsonData[i].name+"</option>";
}
$("#"+target).html(html);
};
</script>
</body>
</html>


过滤器：

package com.ajax.filter;

import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class CharacterFilter implements Filter {

private FilterConfig config;

public void doFilter(ServletRequest req, ServletResponse resp,
FilterChain chain) throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest) req;
HttpServletResponse response = (HttpServletResponse) resp;

String encoding = config.getInitParameter("encoding");

if (encoding != null) {

response.setContentType("text/html ;charset=" + encoding);

request.setCharacterEncoding(encoding);

response.setCharacterEncoding(encoding);
}

chain.doFilter(request, response);
}

public void init(FilterConfig config) throws ServletException {
this.config = config;
}
public void destroy() {
}
}


web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>ajaxDemo</display-name>
<!-- 字符编码集拦截器 -->
<filter>
<filter-name>CharacterFilter</filter-name>
<filter-class>com.ajax.filter.CharacterFilter</filter-class>
<!-- 配置初始化参数 -->
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
</filter>
<!-- 映射路径 -->
<filter-mapping>
<filter-name>CharacterFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<welcome-file-list>
<welcome-file>pages/province.jsp</welcome-file>
</welcome-file-list>
</web-app>


控制层代码：

package com.ajax.dao;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
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 org.apache.struts2.json.JSONException;
import org.apache.struts2.json.JSONUtil;

import com.ajax.connection.ConnectionUtil;

@WebServlet("/AreaServlet")
public class AreaServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
}

protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
PrintWriter out=response.getWriter();
String cid = request.getParameter("cityId");
if (cid != null && !cid.equals("")) {
int cityId = Integer.parseInt(cid);
List<HashMap<String, Object>> areas = ConnectionUtil
.findAreas(cityId);
try {
out.print(JSONUtil.serialize(areas));
} catch (JSONException e) {
e.printStackTrace();
}
} else {
out.print("fail");
}
}

}


package com.ajax.dao;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
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 org.apache.struts2.json.JSONException;
import org.apache.struts2.json.JSONUtil;

import com.ajax.connection.ConnectionUtil;

@WebServlet("/CityServlet")
public class CityServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
}

protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
PrintWriter out=response.getWriter();

String pid = request.getParameter("provinceId");
if (pid != null && !pid.equals("")) {
int provinceId = Integer.parseInt(pid);
List<HashMap<String, Object>> citys = ConnectionUtil
.findCitys(provinceId);
try {

out.print(JSONUtil.serialize(citys));
} catch (JSONException e) {
e.printStackTrace();
}
} else {

out.print("fail");
}
}

}


持久层代码：

package com.ajax.connection;

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.ArrayList;
import java.util.HashMap;
import java.util.List;

public class ConnectionUtil {

private static String url = "jdbc:mysql://localhost:3306/estore";
private static String username = "root";
private static String password = "f111111";

public static Connection getConnection(){
Connection connection = null;
try{
Class.forName("com.mysql.jdbc.Driver");
connection = DriverManager.getConnection(url,username,password);
return connection;
}catch(Exception ex){
return null;
}
}

public static List<HashMap<String, Object>> findProvinces(){
Connection connection = null;
Statement statement = null;
ResultSet rs = null;
List<HashMap<String, Object>> maps = null;
try{
String sql = "SELECT id,province FROM tm_province order by sort asc";
connection = getConnection();
statement = connection.createStatement();
rs = statement.executeQuery(sql);
maps = new ArrayList<HashMap<String,Object>>();
HashMap<String, Object> map = null;
while(rs.next()){
map = new HashMap<String, Object>();
map.put("id", rs.getInt("id"));
map.put("name", rs.getString("province"));
maps.add(map);
}
return maps;
}catch(SQLException sql){
sql.printStackTrace();
return null;
}finally{
try{
if(rs!=null)rs.close();
if(statement!=null)statement.close();
if(connection!=null)connection.close();
}catch(SQLException sql){
sql.printStackTrace();
}
}
}

public static List<HashMap<String, Object>> findCitys(int provinceId){
Connection connection = null;
PreparedStatement statement = null;
ResultSet rs = null;
List<HashMap<String, Object>> maps = null;
try{
String sql = "SELECT id,city FROM tm_city WHERE province_id = ?";
connection = getConnection();
statement = connection.prepareStatement(sql);
statement.setInt(1, provinceId);
rs = statement.executeQuery();
maps = new ArrayList<HashMap<String,Object>>();
HashMap<String, Object> map = null;
while(rs.next()){
map = new HashMap<String, Object>();
map.put("id", rs.getInt("id"));
map.put("name", rs.getString("city"));
maps.add(map);
}
return maps;
}catch(SQLException sql){
sql.printStackTrace();
return null;
}finally{
try{
if(rs!=null)rs.close();
if(statement!=null)statement.close();
if(connection!=null)connection.close();
}catch(SQLException sql){
sql.printStackTrace();
}
}
}

public static List<HashMap<String, Object>> findAreas(int cityId){
Connection connection = null;
PreparedStatement statement = null;
ResultSet rs = null;
List<HashMap<String, Object>> maps = null;
try{
String sql = "SELECT id,area FROM tm_area WHERE city_id = ?";
connection = getConnection();
statement = connection.prepareStatement(sql);
statement.setInt(1, cityId);
rs = statement.executeQuery();
maps = new ArrayList<HashMap<String,Object>>();
HashMap<String, Object> map = null;
while(rs.next()){
map = new HashMap<String, Object>();
map.put("id", rs.getInt("id"));
map.put("name", rs.getString("area"));
maps.add(map);
}
return maps;
}catch(SQLException sql){
sql.printStackTrace();
return null;
}finally{
try{
if(rs!=null)rs.close();
if(statement!=null)statement.close();
if(connection!=null)connection.close();
}catch(SQLException sql){
sql.printStackTrace();
}
}
}

}




内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航