本文主要为大家详细介绍了Ajax实现省市区三级级联,数据来自mysql数据库,具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

实现Ajax实现省市区三级级联，需要Java解析json技术

整体Demo下载地址如下: 点我下载

address.html

Insert title here

/**

* 得到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.οnlοad=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 +=

""

+jsonObj.addrList[i].address+

""

}

}

//选中省后

function pChange(){

//先将市的之前的信息清除

document.getElementById('selectCity').innerHTML="请选择市";

//再将区的信息清除

document.getElementById('selectArea').innerHTML="请选择区";

//再将用户的输入清楚

document.getElementById("addr").innerHTML="";

var val = document.getElementById('select').value;

if(val == -1){

document.getElementById('selectCity')[0].selected = true;

return;

}

//开始执行获取市

ajaxrequest("addressSerlvet?method=city&provincial="+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 +=

""

+jsonObj.cityList[i].address+

""

}

}

//选中市以后

function cChange(){

var val = document.getElementById('selectCity').value;

//开始执行获取区

ajaxrequest("addressSerlvet?method=area&cityId="+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 +=

""

+jsonObj.areaList[i].address+

""

}

}

//点击提交按钮

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;

}

请选择省

请选择市

请选择市

确定

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");

// 从数据库中查询省的信息

ArrayList

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 {

// 从数据库中查询省的信息

ArrayList

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");

// 从数据库中查询省的信息

ArrayList

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

*/

ArrayList

getProvince();

/**

* 根据省的id获取市的信息

* @param provinceId

* @return

*/

ArrayList

getCityByProvinceId(int provinceId);

/**

* 根据市的id获取区的信息

* @param cityId

* @return

*/

ArrayList

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

getProvince() {

ArrayList

addrList = new ArrayList

();

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

getCityByProvinceId(int provinceId) {

ArrayList

addrList = new ArrayList

();

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

getAreaByCityId(int cityId) {

ArrayList

addrList = new ArrayList

();

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;

}

}

相关推荐：