Ajax realizes three-level cascading of provinces and municipalities (data comes from mysql database)-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Ajax realizes three-level cascading of provinces and municipalities (data comes from mysql database)

韦小宝

Jan 08, 2018 am 10:49 AM

ajaxdataProvince City District

This article mainly introduces Ajax to realize the three-level cascade of provinces and municipalities in detail. The data comes from mysql database. It has certain reference and value for learning Ajax. Friends who are interested in ajax You can refer to

Implementing Ajax to realize three-level cascading of provinces and municipalities requires Java parsing json technology
The overall Demo download address is as follows: Click me to download

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(&#39;select&#39;).innerHTML += 
     "<option value=&#39;"+jsonObj.addrList[i].id+"&#39;>"
      +jsonObj.addrList[i].address+
     "</option>"
   }
  }
  //选中省后
  function pChange(){
   //先将市的之前的信息清除
   document.getElementById(&#39;selectCity&#39;).innerHTML="<option value=&#39;-1&#39;>请选择市</option>";
   //再将区的信息清除
   document.getElementById(&#39;selectArea&#39;).innerHTML="<option value=&#39;-1&#39;>请选择区</option>";
   //再将用户的输入清楚
   document.getElementById("addr").innerHTML="";
   var val = document.getElementById(&#39;select&#39;).value;
   if(val == -1){
    document.getElementById(&#39;selectCity&#39;)[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(&#39;selectCity&#39;).innerHTML += 
     "<option value=&#39;"+jsonObj.cityList[i].id+"&#39;>"
      +jsonObj.cityList[i].address+
     "</option>"
   }
  }
  //选中市以后
  function cChange(){
   var val = document.getElementById(&#39;selectCity&#39;).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(&#39;selectArea&#39;).innerHTML += 
     "<option value=&#39;"+jsonObj.areaList[i].id+"&#39;>"
      +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=&#39;-1&#39;>请选择市</option>
 </select>
 <select id="selectArea" onchange="aChange()">
  <option value=&#39;-1&#39;>请选择市</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;
 }

}

Entity class 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;
 }

}

The above is the entire content of this article. I hope it will be helpful to everyone's learning, and I also hope that everyone will support the PHP Chinese website.

Related recommendations:

jq, ajax, php, mysql to implement keyword fuzzy query

Simple implementation of Ajax without refresh Pagination effect

The perfect solution for Ajax cross-domain requests that COOKIE cannot bring

The above is the detailed content of Ajax realizes three-level cascading of provinces and municipalities (data comes from mysql database). For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Python vs. JavaScript: Which Language Should You Learn?May 03, 2025 am 12:10 AM

Choosing Python or JavaScript should be based on career development, learning curve and ecosystem: 1) Career development: Python is suitable for data science and back-end development, while JavaScript is suitable for front-end and full-stack development. 2) Learning curve: Python syntax is concise and suitable for beginners; JavaScript syntax is flexible. 3) Ecosystem: Python has rich scientific computing libraries, and JavaScript has a powerful front-end framework.

JavaScript Frameworks: Powering Modern Web DevelopmentMay 02, 2025 am 12:04 AM

The power of the JavaScript framework lies in simplifying development, improving user experience and application performance. When choosing a framework, consider: 1. Project size and complexity, 2. Team experience, 3. Ecosystem and community support.

The Relationship Between JavaScript, C , and BrowsersMay 01, 2025 am 12:06 AM

Introduction I know you may find it strange, what exactly does JavaScript, C and browser have to do? They seem to be unrelated, but in fact, they play a very important role in modern web development. Today we will discuss the close connection between these three. Through this article, you will learn how JavaScript runs in the browser, the role of C in the browser engine, and how they work together to drive rendering and interaction of web pages. We all know the relationship between JavaScript and browser. JavaScript is the core language of front-end development. It runs directly in the browser, making web pages vivid and interesting. Have you ever wondered why JavaScr

Node.js Streams with TypeScriptApr 30, 2025 am 08:22 AM

Node.js excels at efficient I/O, largely thanks to streams. Streams process data incrementally, avoiding memory overload—ideal for large files, network tasks, and real-time applications. Combining streams with TypeScript's type safety creates a powe

Python vs. JavaScript: Performance and Efficiency ConsiderationsApr 30, 2025 am 12:08 AM

The differences in performance and efficiency between Python and JavaScript are mainly reflected in: 1) As an interpreted language, Python runs slowly but has high development efficiency and is suitable for rapid prototype development; 2) JavaScript is limited to single thread in the browser, but multi-threading and asynchronous I/O can be used to improve performance in Node.js, and both have advantages in actual projects.

The Origins of JavaScript: Exploring Its Implementation LanguageApr 29, 2025 am 12:51 AM

JavaScript originated in 1995 and was created by Brandon Ike, and realized the language into C. 1.C language provides high performance and system-level programming capabilities for JavaScript. 2. JavaScript's memory management and performance optimization rely on C language. 3. The cross-platform feature of C language helps JavaScript run efficiently on different operating systems.

Behind the Scenes: What Language Powers JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript runs in browsers and Node.js environments and relies on the JavaScript engine to parse and execute code. 1) Generate abstract syntax tree (AST) in the parsing stage; 2) convert AST into bytecode or machine code in the compilation stage; 3) execute the compiled code in the execution stage.

The Future of Python and JavaScript: Trends and PredictionsApr 27, 2025 am 12:21 AM

The future trends of Python and JavaScript include: 1. Python will consolidate its position in the fields of scientific computing and AI, 2. JavaScript will promote the development of web technology, 3. Cross-platform development will become a hot topic, and 4. Performance optimization will be the focus. Both will continue to expand application scenarios in their respective fields and make more breakthroughs in performance.

See all articles