首页 / AJAX / Ajax+mysq实现省市区三级联动列表

Ajax+mysq实现省市区三级联动列表

内容导读

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

内容图文

这次给大家带来Ajax+mysq实现省市区三级联动列表，Ajax+mysq实现省市区三级联动列表的注意事项有哪些，下面就是实战案例，一起来看一下。

实现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;
 }
}

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

内容总结

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

内容备注

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

内容手机端

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

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

来源：【匿名】

【上一篇】Ajax提交form表单的实例详解（附代码）【下一篇】AJAX for PHP简单表数据查询实例

更多 ►

【Ajax+mysq实现省市区三级联动列表】教程文章相关的互联网学习教程文章

jquery实现ajax传递【图】

在请求的php页面中从数据库取得数据；对数据进行json_encode在申请的页面进行jquery.$.ajax();650) this.width=650;" src="/upload/getfiles/default/2022/11/9/20221109041053680.jpg" title="捕获.PNG" />650) this.width=650;" src="/upload/getfiles/default/2022/11/9/20221109041053961.jpg" title="1111111.PNG" />4.返回的若是2维的数组，jquery可以用each遍历650) this.width=650;" src="/upload/getfiles/default/2022/1...

Ajax json jquery实现菜单案例【代码】【图】

需求：运用AJAX请求文件menu.json，配置菜单栏，并实现以下功能点： 1. 点击向左箭头，菜单向左移动，隐藏 2. 点击向右箭头，菜单向右移动，显示3. 点击一级菜单，被点击菜单的子菜单显示，其他兄弟节点的子菜单隐藏页面显示：ajaxTest\WebRoot\nav.html 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html xmlns="http://www.w3.org/1999/xht...

Jsonp实现跨域请求Ajax【代码】【图】

客户端#!/usr/bin/env pythonimport tornado.ioloop import tornado.webclass MainHandler(tornado.web.RequestHandler):def get(self, *args, **kwargs):self.render(‘index.html‘)def post(self, *args, **kwargs):self.render(‘index.html‘)settings ={‘template_path‘:‘views‘,#html文件模板路径配置‘static_path‘:‘statics‘,#css,js文件路径配置‘static_url_prefix‘:‘/sss/‘, } application = tornado.web.Ap...

不使用回调函数的ajax请求实现（async和await简化回调函数嵌套）【代码】【图】

在常规的服务器端程序设计中，比如说爬虫程序，发送http请求的过程会使整个执行过程阻塞，直到http请求响应完成代码才会继续执行，以php为例子$url = "http://www.google.com.hk"; $result = file_get_contents($url); echo$result;当代码执行到第二行时，程序便陷入了等待，直到请求完成，程序才会继续往下跑将抓取到的html输出。这种做法的好处是代码简洁明了，运行流程清晰，容易维护。缺点就是程序的运行速度依赖于http请...

三种实现Ajax的方式【代码】

本文主要是比较三种实现Ajax的方式 1、 prototype.js 2、 jquery1.3.2.min.js 3、 json2.js Java代码收藏代码后台处理程序(Servlet),访问路径servlet/testAjax: package ajax.servlet; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.Ht...

ajax传输数据的业务实现

ajax传输数据的业务实现： 1.创建xmlHttpRequest对象；作用：服务器与浏览器完成数据交互。 if（window.XMLHttpRequest）{//IE7及以上版本 xmlHttpRequest=new xmlHttpRequest(); }else{ xmlHttpRequest=new activeObject("Micrisoft.XMLHTTP"); } 2.设置返回参数； xmlHttpRequest.onreadystatechange="函数名"; 3.初始化xmlHttpRequest对象； get、post。 get： ...

Ajax--JavaScript实现【代码】

Ajax：一种不用刷新整个页面便可与服务器通讯的办法　　Ajax实现的步骤：　　　　1、创建XMLHttpRequest对象　　　　2、服务器向浏览器响应请求(注册监听)　　　　3、浏览器与服务器建立连接　　　　4、浏览器向服务器发送请求　　　　readyState 属性表示Ajax请求的当前状态。它的值用数字代表。 0 代表未初始化。还没有调用 open 方法 1 代表正在加载。 open 方法已被调用，但 send 方法还没有被...

基于Jquery ajax技术实现间隔N秒向某页面传值【代码】

有时候我们需要每隔一段时间向某页面传值，比如说聊天室，每隔几秒就像数据库处理页面传值并取回，然后显示在聊天窗口。又或者是每隔一段时间就查询用户最后发言时间到现在是否间隔2分钟，如果是则将用户退出。这个时候我们就要用到HTML DOM setInterval() 方法。setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInt...

spring mvc 第二天【注解实现springmvc Handler处理ajax简单请求的配置】【代码】【图】

这里使用的是在前台发起ajax请求Handler，后台伪造数据响应给前台，配置对应ajax请求的Handler信息如下 1@Controller2publicclass MyController {3//处理器方法 4 @RequestMapping(value="/first.do",produces="text/html;charset=utf-8")5publicvoid doFirst(HttpServletResponse response) throws IOException{6//伪造数据 7 8 Map<String, UserInfo> map=new HashMap<String,UserInfo>();9 UserInfo u1=ne...

AJAX实现导航式多条件搜索【代码】【图】

导航式搜索在实际网站开发中有很多应用，其实现原理也不复杂，关键是如何记忆所选的条件。常见的方式有存入session、存入数组等。本文采用的是AJAX+数组的方式，在不跳转，不刷新整个页面的条件下动态返回查询结果。效果图如下：650) this.width=650;" src="/upload/getfiles/default/2022/11/16/20221116114542765.jpg" title="22.jpg" />1.search.jsp 通过将所选的查询条件存入数组，通过AJAX传到后台，这样在后台利用所得到的...

jsp+ajax实现无刷新鼠标离开文本框即验证用户名

欢迎大牛提意见jsp+ajax实现无刷新,鼠标离开文本框即验证用户名，操作如下：新建一个输入页面，起名为input.jsp,[java] <%@ page contentType="text/html; charset=utf-8"%> <html> <head> <title>jsp+ajax实现无刷新_鼠标离开文本框即验证用户名</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> .style1 { color: #FF3333; font-weight: bold; } .style14 { ...

利用Ajax实现异步请求【代码】

Ajax1.课程引入静态网站和动态网站都是同步的，但同步方式有缺点：页面请求响应式阻塞，影响用户体验为了解决这个问题，可以通过变通的手段实现页面的局部更新（隐藏帧），由于隐藏帧不方便就有了Ajax 2.隐藏帧实现局部更新<form action="./11inner.php" method="post" target="abc">用户名：<input type="text" name="username">密码：<input type="password" name="password"><input type="submit" value="提交"></f...

Ajax简单案例（实现提交值到服务器值不刷新页面）

以下是Ajax简单案例，实现点击aaa.jsp中按钮，通过Ajax提交到服务器的 bbb.jsp页面。aaa.jsp?1234567891011121314151617181920212223242526272829303132333435<%@ page language="java"pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><SCRIPT LANGUAGE = "JavaScript">var tmp = "testing";<br>functiontest(){ var xmlHttp; // 处理Ajax浏览器兼容 if (windo...

浅析Ajax跨域原理及JQuery中的实现分析【代码】【图】

AJAX 的出现使得网页可以通过在后台与服务器进行少量数据交换，实现网页的局部刷新。但是出于安全的考虑，ajax不允许跨域通信。如果尝试从不同的域请求数据，就会出现错误。如果能控制数据驻留的远程服务器并且每个请求都前往同一域，就可以避免这些安全错误。但是，如果仅停留在自己的服务器上，Web 应用程序还有什么用处呢？如果需要从多个第三方服务器收集数据时，又该怎么办？一、关于ajax跨域的思考　　1、Ajax为什么不能跨...

SSH项目下，AJAX的实现【代码】

第一次尝试ajax，第一次尝试SSH。收货颇丰。最主要还是发现javascript还是比较严谨的语言，一个字母的错误，一个大小写的错误，都能让自己抓狂。比如：.readyState==4-------》.readystate==4。XML、和json格式待续。。。。。把自己的主要代码贴一下：ajax：<script type="text/javascript" language="javascript" charset="utf-8">var http_request;function sendRequest(){var u=document.getElementById("username").value;//va...

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+mysq实现省市区三级联动列表

Ajax+mysq实现省市区三级联动列表

内容导读

内容图文

内容总结

内容备注

内容手机端

【Ajax+mysq实现省市区三级联动列表】教程文章相关的互联网学习教程文章

jquery实现ajax传递【图】

Ajax json jquery实现菜单案例【代码】【图】

Jsonp实现跨域请求Ajax【代码】【图】

不使用回调函数的ajax请求实现（async和await简化回调函数嵌套）【代码】【图】

三种实现Ajax的方式【代码】

ajax传输数据的业务实现

Ajax--JavaScript实现【代码】

基于Jquery ajax技术实现间隔N秒向某页面传值【代码】

spring mvc 第二天【注解实现springmvc Handler处理ajax简单请求的配置】【代码】【图】

AJAX实现导航式多条件搜索【代码】【图】

jsp+ajax实现无刷新鼠标离开文本框即验证用户名

利用Ajax实现异步请求【代码】

Ajax简单案例（实现提交值到服务器值不刷新页面）

浅析Ajax跨域原理及JQuery中的实现分析【代码】【图】

SSH项目下，AJAX的实现【代码】

AJAX - 相关标签

AJAX - 技术教程分类

AJAX - 最新教程

AJAX - 最热教程