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://scyanting.com/article/jsjeje.html

其他资讯