實現Ajax實現省市區三級級聯，需要Java解析json技術
整體Demo下載地址如下: 點我下載
address.html
!DOCTYPE html>
html>
head>
meta charset="UTF-8">
title>Insert title here/title>
/head>
script type="text/javascript">
/**
* 得到XMLHttpRequest對象
*/
function getajaxHttp() {
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("您的瀏覽器不支持AJAX！");
return false;
}
}
}
return xmlHttp;
}
/**
* 發送ajax請求
* url--請求到服務器的URL
* methodtype(post/get)
* con (true(異步)|false(同步))
* functionName(回調方法名，不需要引號,這里只有成功的時候才調用)
* (注意：這方法有二個參數，一個就是xmlhttp,一個就是要處理的對象)
*/
function ajaxrequest(url, methodtype, con, functionName) {
//獲取XMLHTTPRequest對象
var xmlhttp = getajaxHttp();
//設置回調函數（響應的時候調用的函數）
xmlhttp.onreadystatechange = function() {
//這個函數中的代碼在什么時候被XMLHTTPRequest對象調用？
//當服務器響應時，XMLHTTPRequest對象會自動調用該回調方法
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
functionName(xmlhttp.responseText);
}
}
};
//創建請求
xmlhttp.open(methodtype, url, con);
//發送請求
xmlhttp.send();
}
window.onload=function(){
ajaxrequest("addressSerlvet?method=provincial","POST",true,addrResponse);
}
//動態獲取省的信息
function addrResponse(responseContents){
var jsonObj = new Function("return" + responseContents)();
for(var i = 0; i jsonObj.addrList.length;i++){
document.getElementById('select').innerHTML +=
"option value='"+jsonObj.addrList[i].id+"'>"
+jsonObj.addrList[i].address+
"/option>"
}
}
//選中省后
function pChange(){
//先將市的之前的信息清除
document.getElementById('selectCity').innerHTML="option value='-1'>請選擇市/option>";
//再將區的信息清除
document.getElementById('selectArea').innerHTML="option value='-1'>請選擇區/option>";
//再將用戶的輸入清楚
document.getElementById("addr").innerHTML="";
var val = document.getElementById('select').value;
if(val == -1){
document.getElementById('selectCity')[0].selected = true;
return;
}
//開始執行獲取市
ajaxrequest("addressSerlvet?method=cityprovincial="+val,"POST",true,cityResponse);
}
//獲取市的動態數據
function cityResponse(responseContents){
var jsonObj = new Function("return" + responseContents)();
for(var i = 0; i jsonObj.cityList.length;i++){
document.getElementById('selectCity').innerHTML +=
"option value='"+jsonObj.cityList[i].id+"'>"
+jsonObj.cityList[i].address+
"/option>"
}
}
//選中市以后
function cChange(){
var val = document.getElementById('selectCity').value;
//開始執行獲取區
ajaxrequest("addressSerlvet?method=areacityId="+val,"POST",true,areaResponse);
}
//獲取區的動態數據
function areaResponse(responseContents){
var jsonObj = new Function("return" + responseContents)();
for(var i = 0; i jsonObj.areaList.length;i++){
document.getElementById('selectArea').innerHTML +=
"option value='"+jsonObj.areaList[i].id+"'>"
+jsonObj.areaList[i].address+
"/option>"
}
}
//點擊提交按鈕
function confirM(){
//獲取省的文本值
var p = document.getElementById("select");
var pTex = p.options[p.options.selectedIndex].text;
if(p.value=-1){
alert("請選擇省");
return;
}
//獲取市的文本值
var city = document.getElementById("selectCity");
var cityTex = city.options[city.options.selectedIndex].text;
if(city.value=-1){
alert("請選擇市");
return;
}
//獲取區的文本值
var area = document.getElementById("selectArea");
var areaTex = area.options[area.options.selectedIndex].text;
if(area.value=-1){
alert("請選擇區");
return;
}
//獲取具體位置id文本值
var addr = document.getElementById("addr").value;
//打印
document.getElementById("show").innerHTML = "您選擇的地址為 " + pTex + " " + cityTex + " " + areaTex + " " + addr;
}
/script>
body>
select id="select" onchange="pChange()">
option value="-1">請選擇省/option>
/select>
select id="selectCity" onchange="cChange()">
option value='-1'>請選擇市/option>
/select>
select id="selectArea" onchange="aChange()">
option value='-1'>請選擇市/option>
/select>
input type="text" id="addr" />
button onclick="confirM();">確定/button>
div id="show">/div>
/body>
/html>
AddressServlet.java
package cn.bestchance.servlet;
import java.io.IOException;
import java.util.ArrayList;
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 cn.bestchance.dao.AddressDao;
import cn.bestchance.dao.impl.AddressDaoImpl;
import cn.bestchance.entity.Address;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
@WebServlet("/addressSerlvet")
public class AddressSerlvet extends HttpServlet {
private static final long serialVersionUID = 1L;
private AddressDao dao = new AddressDaoImpl();
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String method=request.getParameter("method");
if("provincial".equals(method)){
getProvincial(request, response);
}
if("city".equals(method)){
getCity(request, response);
}
if("area".equals(method)){
getArea(request, response);
}
}
/**
* 根據市id獲取該市下的區的全部信息
* @param request
* @param response
* @throws ServletException
* @throws IOException
*/
protected void getArea(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
String cityId = request.getParameter("cityId");
// 從數據庫中查詢省的信息
ArrayListAddress> areaList = dao.getAreaByCityId(Integer.parseInt(cityId));
// 將集合轉成json字符串
JSONObject jsonObj = new JSONObject();
JSONArray jsonArray = JSONArray.fromObject(areaList);
jsonObj.put("areaList", jsonArray);
String jsonDataStr = jsonObj.toString();
response.getWriter().print(jsonDataStr);
}
/**
* 獲取省的信息 并相應
* @param request
* @param response
* @throws ServletException
* @throws IOException
*/
protected void getProvincial(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// 從數據庫中查詢省的信息
ArrayListAddress> addrList = dao.getProvince();
// 將集合轉成json字符串
JSONObject jsonObj = new JSONObject();
JSONArray jsonArray = JSONArray.fromObject(addrList);
jsonObj.put("addrList", jsonArray);
String jsonDataStr = jsonObj.toString();
response.getWriter().print(jsonDataStr);
}
/**
* 獲取市的信息并相應
* @param request
* @param response
* @throws ServletException
* @throws IOException
*/
protected void getCity(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
String provinceId = request.getParameter("provincial");
// 從數據庫中查詢省的信息
ArrayListAddress> addrList = dao.getCityByProvinceId(Integer.parseInt(provinceId));
// 將集合轉成json字符串
JSONObject jsonObj = new JSONObject();
JSONArray jsonArray = JSONArray.fromObject(addrList);
jsonObj.put("cityList", jsonArray);
String jsonDataStr = jsonObj.toString();
response.getWriter().print(jsonDataStr);
}
}
AddressDao.java
package cn.bestchance.dao;
import java.util.ArrayList;
import cn.bestchance.entity.Address;
public interface AddressDao {
/**
* 獲取省的id和名稱
* @return
*/
ArrayListAddress> getProvince();
/**
* 根據省的id獲取市的信息
* @param provinceId
* @return
*/
ArrayListAddress> getCityByProvinceId(int provinceId);
/**
* 根據市的id獲取區的信息
* @param cityId
* @return
*/
ArrayListAddress> getAreaByCityId(int cityId);
}
AddressDaoImpl.java
package cn.bestchance.dao.impl;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import cn.bestchance.dao.AddressDao;
import cn.bestchance.entity.Address;
import cn.bestchance.util.DBUtil;
public class AddressDaoImpl implements AddressDao {
private DBUtil db = new DBUtil();
@Override
public ArrayListAddress> getProvince() {
ArrayListAddress> addrList = new ArrayListAddress>();
db.openConnection();
String sql = "select * from province";
ResultSet rs = db.excuteQuery(sql);
try {
while(rs.next()){
Address addr = new Address();
addr.setId(rs.getInt(2));
addr.setAddress(rs.getString(3));
addrList.add(addr);
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally{
if(rs != null){
try {
rs.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
db.closeResoure();
}
return addrList;
}
@Override
public ArrayListAddress> getCityByProvinceId(int provinceId) {
ArrayListAddress> addrList = new ArrayListAddress>();
db.openConnection();
String sql = "select * from city where fatherID = " + provinceId; //431200
ResultSet rs = db.excuteQuery(sql);
try {
while(rs.next()){
Address addr = new Address();
addr.setId(rs.getInt(2));
addr.setAddress(rs.getString(3));
addrList.add(addr);
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally{
if(rs != null){
try {
rs.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
db.closeResoure();
}
return addrList;
}
@Override
public ArrayListAddress> getAreaByCityId(int cityId) {
ArrayListAddress> addrList = new ArrayListAddress>();
db.openConnection();
String sql = "select * from area where fatherID = " + cityId; //431200
ResultSet rs = db.excuteQuery(sql);
try {
while(rs.next()){
Address addr = new Address();
addr.setId(rs.getInt(2));
addr.setAddress(rs.getString(3));
addrList.add(addr);
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally{
if(rs != null){
try {
rs.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
db.closeResoure();
}
return addrList;
}
}
實體類Address.java
package cn.bestchance.entity;
public class Address {
@Override
public String toString() {
return "Address [id=" + id + ", address=" + address + "]";
}
private int id;
private String address;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
public Address() {
super();
// TODO Auto-generated constructor stub
}
public Address(int id, String address) {
super();
this.id = id;
this.address = address;
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:- PHP+Mysql+Ajax+JS實現省市區三級聯動
- java AJAX實現級聯下拉框
- ThinkPHP使用心得分享-ThinkPHP + Ajax 實現2級聯動下拉菜單
- Ajax二級聯動菜單實現原理及代碼
- ASP.NET Ajax級聯DropDownList實現代碼
- 一個強健 實用的asp+ajax二級聯動菜單(有演示和附源程序打包下載)
- asp.net省市三級聯動的DropDownList+Ajax的三種框架(aspnet/Jquery/ExtJs)示例
- 前臺JS(jquery ajax)調用后臺方法實現無刷新級聯菜單示例
- 落伍首發 php+mysql 采用ajax技術的 省 市 地 3級聯動無刷新菜單 源碼
- Ajax+Json 級聯菜單實現代碼
