Ajax+mysq實現(xiàn)省市區(qū)三級聯(lián)動列表

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 19:56:43

Ajax+mysq實現(xiàn)省市區(qū)三級聯(lián)動列表

Ajax+mysq實現(xiàn)省市區(qū)三級聯(lián)動列表:這次給大家?guī)鞟jax+mysq實現(xiàn)省市區(qū)三級聯(lián)動列表，Ajax+mysq實現(xiàn)省市區(qū)三級聯(lián)動列表的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。實現(xiàn)Ajax實現(xiàn)省市區(qū)三級級聯(lián)，需要Java解析json技術(shù) 整體Demo下載地址如下: 點我下載address.html<

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀Ajax+mysq實現(xiàn)省市區(qū)三級聯(lián)動列表:這次給大家?guī)鞟jax+mysq實現(xiàn)省市區(qū)三級聯(lián)動列表，Ajax+mysq實現(xiàn)省市區(qū)三級聯(lián)動列表的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。實現(xiàn)Ajax實現(xiàn)省市區(qū)三級級聯(lián)，需要Java解析json技術(shù) 整體Demo下載地址如下: 點我下載address.html<

這次給大家?guī)鞟jax+mysq實現(xiàn)省市區(qū)三級聯(lián)動列表，Ajax+mysq實現(xiàn)省市區(qū)三級聯(lián)動列表的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。

實現(xiàn)Ajax實現(xiàn)省市區(qū)三級級聯(lián)，需要Java解析json技術(shù)
整體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;
 }
 /** 
 * 發(fā)送ajax請求 
 * url--請求到服務(wù)器的URL 
 * methodtype(post/get) 
 * con (true(異步)|false(同步)) 
 * functionName(回調(diào)方法名，不需要引號,這里只有成功的時候才調(diào)用) 
 * (注意：這方法有二個參數(shù)，一個就是xmlhttp,一個就是要處理的對象) 
 */
 function ajaxrequest(url, methodtype, con, functionName) {
 //獲取XMLHTTPRequest對象
 var xmlhttp = getajaxHttp();
 //設(shè)置回調(diào)函數(shù)（響應(yīng)的時候調(diào)用的函數(shù)）
 xmlhttp.onreadystatechange = function() {
 //這個函數(shù)中的代碼在什么時候被XMLHTTPRequest對象調(diào)用？
 //當(dāng)服務(wù)器響應(yīng)時，XMLHTTPRequest對象會自動調(diào)用該回調(diào)方法
 if (xmlhttp.readyState == 4) {
 if (xmlhttp.status == 200) {
 functionName(xmlhttp.responseText);
 }
 }
 };
 //創(chuàng)建請求
 xmlhttp.open(methodtype, url, con);
 //發(fā)送請求
 xmlhttp.send();
 }
 window.onload=function(){
 ajaxrequest("addressSerlvet?method=provincial","POST",true,addrResponse);
 }
 //動態(tài)獲取省的信息
 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>";
 //再將區(qū)的信息清除
 document.getElementById('selectArea').innerHTML="<option value='-1'>請選擇區(qū)</option>";
 //再將用戶的輸入清楚
 document.getElementById("addr").innerHTML="";
 var val = document.getElementById('select').value;
 if(val == -1){
 document.getElementById('selectCity')[0].selected = true;
 return;
 }
 //開始執(zhí)行獲取市
 ajaxrequest("addressSerlvet?method=city&provincial="+val,"POST",true,cityResponse);
 }
 //獲取市的動態(tài)數(shù)據(jù)
 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;
 //開始執(zhí)行獲取區(qū)
 ajaxrequest("addressSerlvet?method=area&cityId="+val,"POST",true,areaResponse);
 }
 //獲取區(qū)的動態(tài)數(shù)據(jù)
 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;
 }
 //獲取區(qū)的文本值
 var area = document.getElementById("selectArea");
 var areaTex = area.options[area.options.selectedIndex].text;
 if(area.value=-1){
 alert("請選擇區(qū)");
 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);
 }
 }
 /**
 * 根據(jù)市id獲取該市下的區(qū)的全部信息
 * @param request
 * @param response
 * @throws ServletException
 * @throws IOException
 */
 protected void getArea(HttpServletRequest request,
 HttpServletResponse response) throws ServletException, IOException {
 String cityId = request.getParameter("cityId");
 // 從數(shù)據(jù)庫中查詢省的信息
 ArrayList<Address> areaList = dao.getAreaByCityId(Integer.parseInt(cityId));
 // 將集合轉(zhuǎn)成json字符串
 JSONObject jsonObj = new JSONObject();
 JSONArray jsonArray = JSONArray.fromObject(areaList);
 jsonObj.put("areaList", jsonArray);
 String jsonDataStr = jsonObj.toString();
 response.getWriter().print(jsonDataStr);
 }
 /**
 * 獲取省的信息 并相應(yīng)
 * @param request
 * @param response
 * @throws ServletException
 * @throws IOException
 */
 protected void getProvincial(HttpServletRequest request,
 HttpServletResponse response) throws ServletException, IOException {
 // 從數(shù)據(jù)庫中查詢省的信息
 ArrayList<Address> addrList = dao.getProvince();
 // 將集合轉(zhuǎn)成json字符串
 JSONObject jsonObj = new JSONObject();
 JSONArray jsonArray = JSONArray.fromObject(addrList);
 jsonObj.put("addrList", jsonArray);
 String jsonDataStr = jsonObj.toString();
 response.getWriter().print(jsonDataStr);
 }
 /**
 * 獲取市的信息并相應(yīng)
 * @param request
 * @param response
 * @throws ServletException
 * @throws IOException
 */
 protected void getCity(HttpServletRequest request,
 HttpServletResponse response) throws ServletException, IOException {
 String provinceId = request.getParameter("provincial");
 // 從數(shù)據(jù)庫中查詢省的信息
 ArrayList<Address> addrList = dao.getCityByProvinceId(Integer.parseInt(provinceId));
 // 將集合轉(zhuǎn)成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();
 /**
 * 根據(jù)省的id獲取市的信息
 * @param provinceId
 * @return
 */
 ArrayList<Address> getCityByProvinceId(int provinceId);
 /**
 * 根據(jù)市的id獲取區(qū)的信息
 * @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;
 }
}

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注Gxl網(wǎng)其它相關(guān)文章！

Ajax+mysq實現(xiàn)省市區(qū)三級聯(lián)動列表

推薦度：

點擊下載本文 文檔為doc格式

標(biāo)簽： ajax 省市區(qū)三級聯(lián)動三級聯(lián)動

熱門焦點

Ajax+mysq實現(xiàn)省市區(qū)三級聯(lián)動列表

Ajax+mysq實現(xiàn)省市區(qū)三級聯(lián)動列表

Ajax+mysq實現(xiàn)省市區(qū)三級聯(lián)動列表

最新推薦

猜你喜歡

熱門推薦