Ajax实现省市区三级级联(数据来自mysql数据库)

来源：动视网责编：小OO 时间：2020-11-27 20:07:06

Ajax实现省市区三级级联(数据来自mysql数据库)

实现Ajax实现省市区三级级联，需要Java解析json技术。整体Demo下载地址如下：点我下载。address.html。<，不需要引号，这里只有成功的时候才调用)* (注意：这方法有二个参数，一个就是xmlhttp，一个就是要处理的对象)*/ function ajaxrequest(url.methodtype.con.functionName) { //获取XMLHTTPRequest对象 var xmlhttp = getajaxHttp()；//设置回调函数（响应的时候调用的函数） xmlhttp.onreadystatechange = function() { //这个函数中的代码在什么时候被XMLHTTPRequest对象调用？ //当服务器响应时，true。

推荐度：

点击下载本文 文档为doc格式

导读实现Ajax实现省市区三级级联，需要Java解析json技术。整体Demo下载地址如下：点我下载。address.html。<，不需要引号，这里只有成功的时候才调用)* (注意：这方法有二个参数，一个就是xmlhttp，一个就是要处理的对象)*/ function ajaxrequest(url.methodtype.con.functionName) { //获取XMLHTTPRequest对象 var xmlhttp = getajaxHttp()；//设置回调函数（响应的时候调用的函数） xmlhttp.onreadystatechange = function() { //这个函数中的代码在什么时候被XMLHTTPRequest对象调用？ //当服务器响应时，true。

这篇文章主要为大家详细介绍了Ajax实现省市区三级级联,数据来自mysql数据库,具有一定的参考和学习Ajax的价值，对ajax感兴趣的小伙伴们可以参考一下

实现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实现省市区三级级联(数据来自mysql数据库)

推荐度：

点击下载本文 文档为doc格式

标签： ajax实现省市区三级级联 ajax实现省市区三级级联(数据来自mysql数据库) 数据来自mysql数据库

热门焦点

Ajax实现省市区三级级联(数据来自mysql数据库)

Ajax实现省市区三级级联(数据来自mysql数据库)

Ajax实现省市区三级级联(数据来自mysql数据库)

最新推荐

猜你喜欢

热门推荐