實現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> <div id="show"></div> </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; } }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。