Java Web：AJAX二級(jí)下拉框聯(lián)動(dòng)，JSON【詩(shī)書(shū)畫(huà)唱】
SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for `addr`
-- ----------------------------
DROP TABLE IF EXISTS `addr`;
CREATE TABLE `addr` (
? `id` int(11) NOT NULL AUTO_INCREMENT,
? `pid` int(11) DEFAULT NULL,
? `name` varchar(20) DEFAULT NULL,
? PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=16 DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of addr
-- ----------------------------
中國(guó)共計(jì)34個(gè)省級(jí)行政區(qū)，包括23個(gè)省、5個(gè)自治區(qū)、4個(gè)直轄市、2個(gè)特別行政區(qū)。
23個(gè)省分別為：河北省、山西省、遼寧省、吉林省、黑龍江省、江蘇省、浙江省、安徽省、
福建省、江西省、山東省、河南省、湖北省、湖南省、廣東省、海南省、
四川省、貴州省、云南省、陜西省、甘肅省、青海省、臺(tái)灣省。
5個(gè)自治區(qū)分別為：內(nèi)蒙古自治區(qū)、廣西壯族自治區(qū)、西藏自治區(qū)、寧夏回族自治區(qū)、新疆維吾爾自治區(qū)。
4個(gè)直轄市分別為：北京市、天津市、上海市、重慶市。
2個(gè)特別行政區(qū)分別為：香港特別行政區(qū)、澳門(mén)特別行政區(qū)。
INSERT INTO `addr` VALUES ('1', '0', '河北省');
INSERT INTO `addr` VALUES ('2', '0', '山西省');
INSERT INTO `addr` VALUES ('3', '0', '遼寧省');
INSERT INTO `addr` VALUES ('4', '0', '吉林省');
INSERT INTO `addr` VALUES ('5', '0', '黑龍江省');
INSERT INTO `addr` VALUES ('6', '0', '江蘇省');
INSERT INTO `addr` VALUES ('7', '0', '浙江省');
INSERT INTO `addr` VALUES ('8', '0', '安徽省');
INSERT INTO `addr` VALUES ('9', '0', '福建省');
INSERT INTO `addr` VALUES ('10', '0', '江西省');
INSERT INTO `addr` VALUES ('11', '0', '山東省');
INSERT INTO `addr` VALUES ('12', '0', '河南省');
INSERT INTO `addr` VALUES ('13', '0', '湖北省');
INSERT INTO `addr` VALUES ('14', '0', '湖南省');
INSERT INTO `addr` VALUES ('15', '0', '海南省');
INSERT INTO `addr` VALUES ('16', '0', '四川省');
INSERT INTO `addr` VALUES ('17', '0', '貴州省');
INSERT INTO `addr` VALUES ('18', '0', '云南省');
INSERT INTO `addr` VALUES ('19', '0', '陜西省');
INSERT INTO `addr` VALUES ('20', '0', '甘肅省');
INSERT INTO `addr` VALUES ('21', '0', '青海省');
INSERT INTO `addr` VALUES ('22', '0', '臺(tái)灣省');
INSERT INTO `addr` VALUES ('23', '0', '內(nèi)蒙古自治區(qū)');
INSERT INTO `addr` VALUES ('24', '0', '廣西壯族自治區(qū)');
INSERT INTO `addr` VALUES ('25', '0', '西藏自治區(qū)');
INSERT INTO `addr` VALUES ('26', '0', '寧夏回族自治區(qū)');
INSERT INTO `addr` VALUES ('27', '0', '新疆維吾爾自治區(qū)');
INSERT INTO `addr` VALUES ('28', '0', '北京市');
INSERT INTO `addr` VALUES ('29', '0', '廣東省');
INSERT INTO `addr` VALUES ('30', '0', '天津市');
INSERT INTO `addr` VALUES ('31', '0', '上海市');
INSERT INTO `addr` VALUES ('32', '0', '重慶市');
INSERT INTO `addr` VALUES ('33', '0', '香港特別行政區(qū)');
INSERT INTO `addr` VALUES ('34', '0', '澳門(mén)特別行政區(qū)');
--石家莊市、唐山市、秦皇島市、邯鄲市、邢臺(tái)市、保定市、張家口市、
--承德市、滄州市、廊坊市、衡水市
insert into addr(pid,name) values ( '1', '石家莊市');
insert into addr(pid,name) values ( '1', '唐山市');
insert into addr(pid,name) values ( '1', '秦皇島市');
insert into addr(pid,name) values ( '1', '邯鄲市');
insert into addr(pid,name) values ( '1', '邢臺(tái)市');
insert into addr(pid,name) values ( '1', '保定市');
insert into addr(pid,name) values ( '1', '張家口市');
insert into addr(pid,name) values ( '1', '承德市');
insert into addr(pid,name) values ( '1', '滄州市');
insert into addr(pid,name) values ( '1', '廊坊市');
insert into addr(pid,name) values ( '1', '衡水市');
--11個(gè)地級(jí)市分別是太原市、大同市、陽(yáng)泉市、長(zhǎng)治市、晉城市、朔州市、
--晉中市、運(yùn)城市、忻州市、臨汾市、呂梁市。
insert into addr(pid,name) values ( '2', '太原市');
insert into addr(pid,name) values ( '2', '大同市');
insert into addr(pid,name) values ( '2', '陽(yáng)泉市');
insert into addr(pid,name) values ( '2', '長(zhǎng)治市');
insert into addr(pid,name) values ( '2', '晉城市');
insert into addr(pid,name) values ( '2', '朔州市');
insert into addr(pid,name) values ( '2', '晉中市');
insert into addr(pid,name) values ( '2', '運(yùn)城市');
insert into addr(pid,name) values ( '2', '忻州市');
insert into addr(pid,name) values ( '2', '臨汾市');
insert into addr(pid,name) values ( '2', '呂梁市');
select * from addr
drop? ?table? addr
個(gè)人理解：聯(lián)動(dòng)就是這里靠pid為0的省份的部分的id對(duì)應(yīng)的城市的pid相同來(lái)實(shí)現(xiàn)的。
package com.SSHC.bean;
public class Addr {
? ? private Integer id;
? ? private Integer pid;
? ? private String name;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public Integer getPid() {
return pid;
}
public void setPid(Integer pid) {
this.pid = pid;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
package com.SSHC.controller;
import java.io.IOException;
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.SSHC.bean.Addr;
import com.SSHC.dao.AddrDao;
/**
?* Servlet implementation class SelServlet
?*/
@WebServlet("/ss")
public class addressKuangServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
? ? ? ?
? ? /**
? ? ?* @see HttpServlet#HttpServlet()
? ? ?*/
? ? public addressKuangServlet() {
? ? ? ? super();
? ? ? ? // TODO Auto-generated constructor stub
? ? }
/**
* @see HttpServlet#doGet(HttpServletRequest request,
*? HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws
ServletException, IOException {
// TODO Auto-generated method stub
this.doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request,
*? HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request,
HttpServletResponse response)?
throws ServletException, IOException {
// TODO Auto-generated method stub
//獲取數(shù)據(jù)中的數(shù)據(jù)
String strPid = request.getParameter("pid");
Integer pid = -1;
if(strPid != null && strPid.length() > 0) {
pid = Integer.parseInt(strPid);
}
AddrDao ad = new AddrDao();
List<Addr>list = ad.selectByPid(pid);
//方法一：拼接html代碼（可能會(huì)有兼容性問(wèn)題）
// StringBuilder html = new StringBuilder
//("<option>請(qǐng)選擇省份</option>");
// //<option value="1">湖南</option>
// for(Addr addr : list) {
// html.append("<option value=\"");
// html.append(addr.getId());
// html.append("\">");
// html.append(addr.getName());
// html.append("</option>");
// }
// System.out.println(html);
//方法二：拼接JSON字符串{},[]
//[{"id":1,"name":"湖南"},{"id":2,"name":"湖北"},
//{"id":3,"name":"江西"}]
StringBuilder jsonStr = new StringBuilder("[");
String dot = "";
for(Addr addr : list) {
jsonStr.append(dot);
jsonStr.append("{\"id\":");
jsonStr.append(addr.getId());
jsonStr.append(",\"name\":\"");
jsonStr.append(addr.getName());
jsonStr.append("\"}");
dot = ",";
}
jsonStr.append("]");
System.out.println(jsonStr);
response.setCharacterEncoding("utf-8");
//將數(shù)據(jù)傳送到回調(diào)函數(shù)中
//response.getWriter().write(html.toString());
response.getWriter().write(jsonStr.toString());
}
}
package com.SSHC.dao;
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.SSHC.bean.Addr;
import com.SSHC.util.DbUtil;
public class AddrDao {
? ? public List<Addr>selectByPid(Integer pid){
? ? Connection conn = null;
? ? PreparedStatement pstm = null;
? ? ResultSet rs = null;
? ?
? ? List<Addr>list = new ArrayList<Addr>();
? ? String sql = "select * from addr where pid = ?";
? ?
? ? try {
? ? conn = DbUtil.getConn();
pstm = conn.prepareStatement(sql);
pstm.setInt(1, pid);
rs = pstm.executeQuery();
while(rs.next()) {
Integer id = rs.getInt("id");
String name = rs.getString("name");
Addr a = new Addr();
a.setId(id);
a.setName(name);
list.add(a);
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} finally {
DbUtil.close(rs, pstm, conn);
}
? ? return list;
? ? }
}
package com.SSHC.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.util.Properties;
public class DbUtil {
private static String driverName;
? ? private static String url;
? ? private static String user;
? ? private static String pwd;
? ??
? ? static {
? ? //讀取properties文件
? ? Properties prop = new Properties();
? ? //將db.properties文件讀取到內(nèi)存中去
? ? InputStream is = DbUtil.class.getClassLoader()
? ? .getResourceAsStream("db.properties");
? ? //加載內(nèi)容
? ? try {
prop.load(is);
//讀取內(nèi)容
driverName = prop.getProperty("dn");
url = prop.getProperty("url");
user = prop.getProperty("un");
pwd = prop.getProperty("up");
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
? ? }
? ??
? ? //獲取數(shù)據(jù)庫(kù)連接對(duì)象的方法
? ? public static Connection getConn(){
? ? Connection conn = null;
? ? try {
Class.forName(driverName);
conn = DriverManager.getConnection(url,user,pwd);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}? ?
? ? return conn;
? ? }
? ??
? ? public static void close(ResultSet rs,PreparedStatement pstm
? ? ,Connection conn){
? ? ? ? try {
? ? ? ? if(rs != null) {
? ? ? ? ? ? rs.close();
? ? ? ? ? ? }
? ? ? ? ? ? if(pstm != null) {
? ? ? ? ? ? pstm.close();
? ? ? ? ? ? }
? ? ? ? ? ? if(conn != null) {
? ? ? ? ? ? conn.close();
? ? ? ? ? ? }
? ? ? ? } catch(Exception e) {
? ? ? ? e.printStackTrace();
? ? ? ? }
? ? }
}
dn=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/firstjsp?useUnicode=true&characterEncoding=UTF-8
un=root
up=root
<%@ page language="java" contentType="text/html;?
charset=UTF-8" 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 hreff="<%=basePath%>">
? ? ? ? <title></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">
? ? ? ? ? ? * {
? ? ? ? ? ? ? ? font-size: 50px;
? ? ? ? ? ? }
? ? ? ? </style>
? ? ? ? <script type="text/javascript">
? ? ? ? ? ? //頁(yè)面中的所有的Html標(biāo)簽都被解析出來(lái)以后，就會(huì)運(yùn)行下面的函數(shù)
? ? ? ? ? ? window.onload = function(){
? ? ? ? ? ? //獲取省份下拉框
? ? ? ? ? ? var prov = document.getElementById('province');
? ? ? ? ? ? //獲取省份下拉框中的數(shù)據(jù)（我現(xiàn)在執(zhí)行了）
? ? ? ? ? ? //從js代碼跳轉(zhuǎn)到j(luò)ava代碼怎么實(shí)現(xiàn)呢？ajax
? ? ? ? ? ? /*var xhr = createXhr();
? ? ? ? ? ? if(xhr) {
? ? ? ? ? ? //設(shè)置提交方式是POST提交和執(zhí)行的servlet的url路徑
? ? ? ? ? ? xhr.open('POST','ss');
? ? ? ? ? ? //設(shè)置ajax請(qǐng)求頭
? ? ? ? ? ? xhr.setRequestHeader("content-type",?
? ? ? ? ? ? "application/x-www-form-urlencoded");
? ? ? ? ? ? //設(shè)置回調(diào)函數(shù)
? ? ? ? ? ? xhr.onreadystatechange = function(){
? ? ? ? ? ? if (xhr.readyState == 4 && xhr.status == 200){
? ? ? ? ? ? ? ? //alert(xhr.responseText);
? ? ? ? ? ? //有的瀏覽器不支持下拉框的innerHTML屬性，所以會(huì)有兼容性問(wèn)題。
? ? ? ? ? ? ? ? //prov.innerHTML = xhr.responseText;
? ? ? ? ? ? ? ? //alert(xhr.responseText);
? ? ? ? ? ? ? ? //將json字符串轉(zhuǎn)換成js數(shù)組
? ? ? ? ? ? ? ? var arr = JSON.parse(xhr.responseText);
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? //對(duì)arr數(shù)組進(jìn)行循環(huán)遍歷
? ? ? ? ? ? ? ? for(var i = 0;i < arr.length;i ++) {
? ? ? ? ? ? ? ? var opt = arr[i];
? ? ? ? ? ? ? ? //取出對(duì)象中的屬性值
? ? ? ? ? ? ? ? var id = opt.id;
? ? ? ? ? ? ? ? var name = opt.name;
? ? ? ? ? ? ? ? //創(chuàng)建一個(gè)option對(duì)象
? ? ? ? ? ? ? ? var option = new Option(name,id);
? ? ? ? ? ? ? ? //將option對(duì)象放到省份下拉框中
? ? ? ? ? ? ? ? prov.add(option);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? //提交ajax請(qǐng)求
? ? ? ? ? ? xhr.send('pid=0');? ? ? ? ? ?
? ? ? ? ? ? }*/
? ? ? ? ? ? ajax('ss',{pid:0},function(xhr){
? ? ? ? ? ? //將json字符串轉(zhuǎn)換成js數(shù)組
? ? ? ? var arr = JSON.parse(xhr.responseText);
? ? ? ??
? ? ? ? //對(duì)arr數(shù)組進(jìn)行循環(huán)遍歷
? ? ? ? for(var i = 0;i < arr.length;i ++) {
? ? ? ? var opt = arr[i];
? ? ? ? //取出對(duì)象中的屬性值
? ? ? ? var id = opt.id;
? ? ? ? var name = opt.name;
? ? ? ? //創(chuàng)建一個(gè)option對(duì)象
? ? ? ? var option = new Option(name,id);
? ? ? ? //將option對(duì)象放到省份下拉框中
? ? ? ? prov.add(option);
? ? ? ? }
? ? ? ? ? ? });
? ? ? ? ? ? }? ?
? ? ? ? ? ??
? ? ? ? ? ? //將創(chuàng)建XMLHttpRequest對(duì)象的方法封裝起來(lái)
? ? ? ? ? ? function createXhr(){
? ? ? ? ? ? var xhr = null;
? ? ? ? ? ? if(window.XMLHttpRequest) {
? ? ? ? ? ? //判斷window對(duì)象中是否有XMLHttpRequest屬性
? ? ? ? ? ? xhr = new XMLHttpRequest();
? ? ? ? ? ? } else {
? ? ? ? ? ? //如果沒(méi)有XMLHttpRequest屬性，就使用ActiveXObject創(chuàng)建
? ? ? ? ? ? xhr = new ActiveXObject("Microsoft.XMLHTTP");
? ? ? ? ? ? }
? ? ? ? ? ? return xhr;
? ? ? ? ? ? }
? ? ? ? ? ? //conf={"pid":0,pwd:1}
? ? ? ? ? ? function ajax(url,conf,fn){
? ? ? ? ? ? var xhr = createXhr();
? ? ? ? ? ? if(xhr) {
? ? ? ? ? ? xhr.open('POST',url);
? ? ? ? ? ? xhr.setRequestHeader("content-type",?
? ? ? ? ? ? ? ? ? ? "application/x-www-form-urlencoded");
? ? ? ? ? ? xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200){
? ? ? ? ? ? fn(xhr);
? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? var str = '';
? ? ? ? ? ? var dot = '';
? ? ? ? ? ? for(var attr in conf){
? ? ? ? ? ? str += dot;
? ? ? ? ? ? str += attr;
? ? ? ? ? ? str += '=';
? ? ? ? ? ? str += conf[attr];
? ? ? ? ? ? dot = '&';
? ? ? ? ? ? }
? ? ? ? ? ? xhr.send(str);
? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? ? function loadCity(){
? ? ? ? ? ? //獲取選中的省份的id
? ? ? ? ? ? var pid = document.getElementById('province').value;
? ? ? ? ? ? /*//獲取城市下拉框
? ? ? ? ? ? var citySel = document.getElementById('city');
? ? ? ? ? ? //清空城市下拉框中的數(shù)據(jù)
? ? ? ? ? ? citySel.length = 0;
? ? ? ? ? ? //alert('你選中的省份id是：' + pid);
? ? ? ? ? ? var xhr = createXhr();
? ? ? ? ? ? if(xhr) {//提交ajax請(qǐng)求
? ? ? ? ? ? xhr.open('POST','ss');
? ? ? ? ? ? xhr.setRequestHeader("content-type",?
? ? ? ? ? ? ? ? "application/x-www-form-urlencoded");
? ? ? ? ? ? xhr.onreadystatechange = function(){
? ? ? ? ? ? if (xhr.readyState == 4 && xhr.status == 200){
? ? ? ? ? ? //arr數(shù)組中全部都是選中省份下面的城市
? ? ? ? ? ? ? ? var arr = JSON.parse(xhr.responseText);
? ? ? ? ? ? ? ? for(var i = 0;i < arr.length;i ++) {
? ? ? ? ? ? ? ? var city = arr[i];
? ? ? ? ? ? ? ? var id = city.id;
? ? ? ? ? ? ? ? var name = city.name;
? ? ? ? ? ? ? ? //創(chuàng)建下拉框中的option標(biāo)簽
? ? ? ? ? ? ? ? var opt = new Option(name,id);
? ? ? ? ? ? ? ? //將option標(biāo)簽放到城市下拉框中去
? ? ? ? ? ? ? ? citySel.add(opt);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? xhr.send('pid=' + pid);
? ? ? ? ? ? }*/
? ? ? ? ? ? ajax('ss',{pid:pid},function(xhr){
? ? ? ? ? ? //arr數(shù)組中全部都是選中省份下面的城市
? ? ? ? var arr = JSON.parse(xhr.responseText);
? ? ? ? var citySel = document.getElementById('city');
? ? ? ? citySel.length = 0;
? ? ? ? for(var i = 0;i < arr.length;i ++) {
? ? ? ? var city = arr[i];
? ? ? ? var id = city.id;
? ? ? ? var name = city.name;
? ? ? ? //創(chuàng)建下拉框中的option標(biāo)簽
? ? ? ? var opt = new Option(name,id);
? ? ? ? //將option標(biāo)簽放到城市下拉框中去
? ? ? ? citySel.add(opt);
? ? ? ? }
? ? ? ? ? ? });
? ? ? ? ? ? }
? ? ? ? </script>
? ? </head>
? ? <body>
? ? ? ? <select id="province" onchange="loadCity();">
? ? ? ? ? ? <option value='-1'>請(qǐng)選擇省份</option>
? ? ? ? </select>
? ? ? ? <select id="city">
? ? ? ? ? ? <option value='-1'>請(qǐng)選擇城市</option>
? ? ? ? </select>
? ? </body>
</html>
