Ajax實現(xiàn)省市區(qū)三級級聯(lián)(數(shù)據(jù)來自mysql數(shù)據(jù)庫)
更新時間：2016年09月09日 09:34:00 作者：chance2015
這篇文章主要為大家詳細介紹了Ajax實現(xiàn)省市區(qū)三級級聯(lián),數(shù)據(jù)來自mysql數(shù)據(jù)庫,具有一定的參考價值，感興趣的小伙伴們可以參考一下
實現(xiàn)Ajax實現(xiàn)省市區(qū)三級級聯(lián)，需要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;
}
/**
* 發(fā)送ajax請求
* url--請求到服務器的URL
* methodtype(post/get)
* con (true(異步)|false(同步))
* functionName(回調(diào)方法名，不需要引號,這里只有成功的時候才調(diào)用)
* (注意：這方法有二個參數(shù)，一個就是xmlhttp,一個就是要處理的對象)
*/
function ajaxrequest(url, methodtype, con, functionName) {
//獲取XMLHTTPRequest對象
var xmlhttp = getajaxHttp();
//設置回調(diào)函數(shù)（響應的時候調(diào)用的函數(shù)）
xmlhttp.onreadystatechange = function() {
//這個函數(shù)中的代碼在什么時候被XMLHTTPRequest對象調(diào)用？
//當服務器響應時，XMLHTTPRequest對象會自動調(diào)用該回調(diào)方法
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
functionName(xmlhttp.responseText);
}
}
};
//創(chuàng)建請求
xmlhttp.open(methodtype, url, con);
//發(fā)送請求
xmlhttp.send();
}
window.onload=function(){
ajaxrequest("addressSerlvet?method=provincial","POST",true,addrResponse);
}
//動態(tài)獲取省的信息
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>";
//再將區(qū)的信息清除
document.getElementById('selectArea').innerHTML="<option value='-1'>請選擇區(qū)</option>";
//再將用戶的輸入清楚
document.getElementById("addr").innerHTML="";
var val = document.getElementById('select').value;
if(val == -1){
document.getElementById('selectCity')[0].selected = true;
return;
}
//開始執(zhí)行獲取市
ajaxrequest("addressSerlvet?method=city&provincial="+val,"POST",true,cityResponse);
}
//獲取市的動態(tài)數(shù)據(jù)
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;
//開始執(zhí)行獲取區(qū)
ajaxrequest("addressSerlvet?method=area&cityId="+val,"POST",true,areaResponse);
}
//獲取區(qū)的動態(tài)數(shù)據(jù)
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;
}
//獲取區(qū)的文本值
var area = document.getElementById("selectArea");
var areaTex = area.options[area.options.selectedIndex].text;
if(area.value=-1){
alert("請選擇區(qū)");
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);
}
}
/**
* 根據(jù)市id獲取該市下的區(qū)的全部信息
* @param request
* @param response
* @throws ServletException
* @throws IOException
*/
protected void getArea(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
String cityId = request.getParameter("cityId");
// 從數(shù)據(jù)庫中查詢省的信息
ArrayList<Address> areaList = dao.getAreaByCityId(Integer.parseInt(cityId));
// 將集合轉(zhuǎn)成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 {
// 從數(shù)據(jù)庫中查詢省的信息
ArrayList<Address> addrList = dao.getProvince();
// 將集合轉(zhuǎn)成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");
// 從數(shù)據(jù)庫中查詢省的信息
ArrayList<Address> addrList = dao.getCityByProvinceId(Integer.parseInt(provinceId));
// 將集合轉(zhuǎn)成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
*/
ArrayList<Address> getProvince();
/**
* 根據(jù)省的id獲取市的信息
* @param provinceId
* @return
*/
ArrayList<Address> getCityByProvinceId(int provinceId);
/**
* 根據(jù)市的id獲取區(qū)的信息
* @param cityId
* @return
*/
ArrayList<Address> 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 ArrayList<Address> getProvince() {
ArrayList<Address> addrList = new ArrayList<Address>();
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 ArrayList<Address> getCityByProvinceId(int provinceId) {
ArrayList<Address> addrList = new ArrayList<Address>();
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 ArrayList<Address> getAreaByCityId(int cityId) {
ArrayList<Address> addrList = new ArrayList<Address>();
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;
}
}
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- PHP+Mysql+Ajax+JS實現(xiàn)省市區(qū)三級聯(lián)動
- java AJAX實現(xiàn)級聯(lián)下拉框
- ThinkPHP使用心得分享-ThinkPHP + Ajax 實現(xiàn)2級聯(lián)動下拉菜單
- Ajax二級聯(lián)動菜單實現(xiàn)原理及代碼
- ASP.NET Ajax級聯(lián)DropDownList實現(xiàn)代碼
- 一個強健 實用的asp+ajax二級聯(lián)動菜單(有演示和附源程序打包下載)
- asp.net省市三級聯(lián)動的DropDownList+Ajax的三種框架(aspnet/Jquery/ExtJs)示例
- 前臺JS(jquery ajax)調(diào)用后臺方法實現(xiàn)無刷新級聯(lián)菜單示例
- 落伍首發(fā) php+mysql 采用ajax技術的 省 市 地 3級聯(lián)動無刷新菜單 源碼
- Ajax+Json 級聯(lián)菜單實現(xiàn)代碼
相關文章
ajax本身實際上是通過XMLHttpRequest對象來進行數(shù)據(jù)的交互，而瀏覽器出于安全考慮，不允許js代碼進行跨域操作，會警告，所以才出現(xiàn)ajax跨域的問題。2015-10-10
比較實用的js拖動效果代碼。類的寫法不錯，是個不錯的應用2008-06-06
Asynchronous javascript and xml(ajax)，實現(xiàn)了客戶端與服務器進行數(shù)據(jù)交流過程。使用技術的好處是：不用頁面刷新，并且在等待頁面?zhèn)鬏敂?shù)據(jù)的同時可以進行其他操作2015-11-11
最近的項目用了到AJAX同步。這個同步的意思是當JS代碼加載到當前AJAX的時候會把頁面里所有的代碼停止加載2014-04-04
這篇文章主要介紹了解決ajax返回驗證的時候總是彈出error錯誤的方法，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要為大家詳細介紹了ajax傳遞多個參數(shù)的實現(xiàn)代碼，簡單實用，感興趣的小伙伴們可以參考一下2016-05-05
PPJOKE 0.1 (網(wǎng)頁嵌入聊天)提供下載...2006-10-10
這篇文章主要介紹了ajax詳解，詳細的介紹了Ajax 簡史以及 基本用法，有興趣的可以了解一下2017-07-07
這篇文章主要介紹了Ajax請求和Filter配合案例解析的,本文給大家介紹的非常詳細，具有參考借鑒加載，需要的朋友可以參考下2016-12-12
這篇文章主要介紹了Ajax 入門之 GET 與 POST 的不同處詳解,需要的朋友可以參考下2017-02-02