Ajax如何实现省市区三级级联
这篇文章主要介绍Ajax如何实现省市区三级级联，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
创新互联公司专注于铁西企业网站建设,响应式网站设计,商城网站制作。铁西网站建设公司,为铁西等地区提供建站服务。全流程专业公司，专业设计，全程项目跟踪，创新互联公司专业和态度为您提供的服务
实现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.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 +=
""
+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;
}
}什么是ajax
ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，可以通过在后台与服务器进行少量数据交换，使网页实现异步更新。
以上是“Ajax如何实现省市区三级级联”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！
名称栏目：Ajax如何实现省市区三级级联
浏览地址：
http://jkwzsj.com/article/jsjeje.html
