Ajax实现省市区三级级联详解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Ajax实现省市区三级级联详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含10530字，纯文字阅读大概需要16分钟。

内容图文

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

实现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=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 += 
     "<option value='"+jsonObj.cityList[i].id+"'>"
      +jsonObj.cityList[i].address+
     "</option>"
   }
  }
  //选中市以后
  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 += 
     "<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>
 <p id="show"></p>
</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");
  // 从数据库中查询省的信息
  ArrayList<Address> 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<Address> 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<Address> 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<Address> getProvince();
 /**
  * 根据省的id获取市的信息
  * @param provinceId
  * @return
  */
 ArrayList<Address> getCityByProvinceId(int provinceId);
 /**
  * 根据市的id获取区的信息
  * @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;
 }

}

内容总结

以上是互联网集市为您收集整理的Ajax实现省市区三级级联详解全部内容，希望文章能够帮你解决Ajax实现省市区三级级联详解所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/140043.html

来源：【匿名】

【上一篇】Ajax轮询请求状态【下一篇】AJAX for PHP简单表数据查询实例

更多 ►

【Ajax实现省市区三级级联详解】教程文章相关的互联网学习教程文章

前言以前一直以为当$.ajax()的 dataType设置为jsonp时，其method（请求方法）无论怎么设置，都会变成get，直到前两天遇到了一个坑。下面来一起看看详细的介绍：关于跨域请求与jsonp跨域：由于受到同源策略（协议、域名、端口三者必须全部相同）的影响，ajax请求会受到限制，要突破这种限制，跨域便产生了。跨域的解决方案有多种，这里不展开阐述，只是针对GET请求中的jsonp跨域解决方案做一下说明。jsonp，本质上jsonp不是xhr异步请...

转:AJAX中xhr对象详解

XJAX ,并不是一种新技术的诞生.它实际上代表的是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用. 它包括：使用XHTML和CSS标准化呈现；使用DOM实现动态显示和交互；使用XML和XSLT进行数据交换与处理；使用XMLHttpR XJAX ,并不是一种新技术的诞生.它实际上代表的是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用. 它包括：使用XHTML和CSS标准化呈现；使用DOM实现动态显示和交互；使用XML和XSLT进行数...

JQuery中$.ajax()方法参数详解 (转)

url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和 delete也可以使用，但仅部分浏览器支持。timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。async：要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送...

Ajax中解析Json的两种方法详解

eval(); //此方法不推荐JSON.parse(); //推荐方法一、两种方法的区别我们先初始化一个json格式的对象：　　var jsonDate = ‘{ "name":"周星驰","age":23 }‘　　var jsonObj = eval( ‘(‘ + jsonDate + ‘)‘ ); // eval();方法　　var jsonObj = JSON.parse( jsonDate ); // JSON.parse(); 方法然后在控制台调用：　　console.log( jsonObj.name ); // 两种方法都可以正确输入周星驰那么问题来了两种方法有什么区别呢？（...

JQuery中$.ajax()方法参数详解

AJAX详解【代码】

关于AJAXAJAX是asynchronous javascript + XML的简写，它是一种能够向服务器请求数据而无需刷新页面的技术。AJAX能够提供更加友好的用户体验，彻底改变了传统的‘点击、等待‘的交互模式。AJAX技术的核心是XMLHttpRequest对象。XHR对象中的名字虽然有XML，但是AJAX通信与数据格式无关。XMLHttpRequest对象IE7+和标准浏览器都支持XMLHttpReuqest对象。在IE6-中是通过ActiveXObject对象以插件的形式实现的。 1function fnGetXHR(){ 2...

JQuery中$.ajax()方法参数详解

$.ajax()方法详解【代码】【图】

jquery中的ajax方法参数总是记不住，这里记录一下。 1.url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。2.type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。3.timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。4.async: 要求为Boolean类型的参数，默认设置为true，...

ajax详解

1.ajax是一种在无需重新加载整个网页（刷新页面）的情况下，能够更新部分网页的技术 ajax的优势1.无刷新更新数据更为迅捷地响应用户交互，减少用户等待时间2.异步与服务器通信ajax使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力，优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量3.前端和后端负载平衡ajax可以把以前一些服务器负担的工作转嫁到客户端，减轻服务器和带...

对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解

虽然jquery的较新的api已经很好用了，但是在实际工作还是有做二次封装的必要，好处有：1，二次封装后的API更加简洁，更符合个人的使用习惯；2，可以对ajax操作做一些统一处理，比如追加随机数或其它参数。同时在工作中，我们还会发现，有一些ajax请求的数据，对实时性要求不高，即使我们把第一次请求到的这些数据缓存起来，然后当相同请求再次发起时直接拿之前缓存的数据返回也不会对相关功能有影响，通过这种手工的缓存控制，减少...

对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解_jquery

Ajax与浏览器缓存的使用详解

这次给大家带来Ajax与浏览器缓存的使用详解，Ajax与浏览器缓存使用的注意事项有哪些，下面就是实战案例，一起来看一下。在现代Web应用程序中，前端代码充斥着大量的Ajax请求，如果对于Ajax请求可以使用浏览器缓存，那么可以显著地减少网络请求，提高程序响应速度。1. Ajax Request使用jQuery框架可以很方便的进行Ajax请求，示例代码如下：$.ajax({url : url,dataType : "xml",cache: true,success : function(xml, status){ } });...

详解使用Vue.Js结合Jquery Ajax加载数据的两种方式【图】

整理文档，搜刮出一个使用Vue.Js结合Jquery Ajax加载数据的两种方式的代码，稍微整理精简一下做下分享。废话不多说，直接上代码 html代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>demo</title><script src="js/jquery.js"></script><script src="js/vue.js"></script></head> <body><div id="app">{{message }}<br><button v-on:click="showData">测试jquery加载数据</button><table border="1"><t...

JQueryAJAX参数详解补充附示例

本节主要对JQuery AJAX参数介绍进行补充另附示例,对ajax感兴趣的朋友可以参考下JQuery AJAX参数详解补充附示例context类型：Object这个对象用于设置 Ajax 相关回调函数的上下文。也就是说，让回调函数内 this 指向这个对象（如果不设定这个参数，那么 this 就指向调用本次 AJAX 请求时传递的 options 参数）。比如指定一个 DOM 元素作为 context 参数，这样就设置了 success 回调函数的上下文为这个 DOM 元素。就像这样：$.ajax({ ...

PHP+Ajax实现博客文章添加类别功能步骤详解

这次给大家带来PHP+Ajax实现博客文章添加类别功能步骤详解，PHP+Ajax实现博客文章添加类别功能的注意事项有哪些，下面就是实战案例，一起来看一下。一. 代码fun.jsfunction saveType(typename, username){if(typename==){ //判断博客类别是否为空alert(请输入类别名称！);}else if(username==){ //判断用户名是否为空alert(请输入用户名！);}else{var xmlObj; //定义XMLHttpRequest对象var urlData = "typename="+typename+"...

AJAX - 技术教程分类

AJAX 教程 AJAX 简介 AJAX 实例 XHR 请求 XHR 响应 AJAX ASP/PHP AJAX 数据库 AJAX XML AJAX 实例 ajax 全部

AJAX - 最热教程

JS实现定时任务，每隔N秒请求后台setIn...jQuery取消ajax请求的方法 JavaScript通信之Ajax的详细介绍（代码...Ajax请求中的async:false/true(同步/异...jQuery和ajax实现鼠标单击修改内容的方...node.js+Ajax实现获取HTTP服务器返回数...Vue form 表单提交+ajax异步请求+分页效...Ajax清除浏览器js、css、图片缓存的方法 jquery+ajax+C#实现无刷新操作数据库数...利用AjaxSubmit()方法实现Form提交表单...

首页 / AJAX / Ajax实现省市区三级级联详解

Ajax实现省市区三级级联详解

内容导读

内容图文

内容总结

内容备注

内容手机端

【Ajax实现省市区三级级联详解】教程文章相关的互联网学习教程文章

关于jQuery.ajax()的jsonp碰上post详解

转:AJAX中xhr对象详解

JQuery中$.ajax()方法参数详解 (转)

Ajax中解析Json的两种方法详解

JQuery中$.ajax()方法参数详解

AJAX详解【代码】

JQuery中$.ajax()方法参数详解

$.ajax()方法详解【代码】【图】

ajax详解

对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解

对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解_jquery

Ajax与浏览器缓存的使用详解

详解使用Vue.Js结合Jquery Ajax加载数据的两种方式【图】

JQueryAJAX参数详解补充附示例

PHP+Ajax实现博客文章添加类别功能步骤详解

AJAX - 相关标签

AJAX - 技术教程分类

AJAX - 最新教程

AJAX - 最热教程