javaweb--json--ajax--mysql實現省市區三級聯動（附三級聯動數據庫）
阿新 • • 發佈：2018-05-05
知識點 request test div 對數 能說 面向對象 inf HA
在web中，實現三級聯動很常見，尤其是利用jquery+json。但是從根本上來說jquery並不是最能讓人容易理解的，接下來從最基本的javascript開始，實現由javascript+json+mysql實現三級聯動：
一、涉及到的知識點：
1.ajax：（異步的javascript and xml）
1.簡單來說就是不用刷新整個頁面實現局部頁面的動態改變：也就是不用重新發布工程而做到改變想要改變的數據。
2.實現異步的四個步驟：
1.得到核心對象
2.打開鏈接
3.發送
4.添加監聽
2.json ：用到的主要方法：
JSONArray.fromObject(object)；將list數組轉為json
JSONObject.fromObject(object)；將javabean轉為json
tostring（）；得到json串
3.javabean基於數據庫的設計(算不上什麽方法只能說是對數據庫以及java面向對象的理解)：
一對多，多對一，一對一表之間的設計關系，面向對象是關鍵：一個省有多個市，因此省bean中可以有list集合存市，但是市屬於哪個省，也應該設計省對象記住市
事例演示：
二，核心代碼：
首先是異步顯示省的javabean：
public class Province { private String provinceid; privateString province; private List<City> cityList; public String getProvinceid() { return provinceid; } public void setProvinceid(String provinceid) { this.provinceid = provinceid; } public String getProvince() { return province; } public voidsetProvince(String province) { this.province = province; } public List<City> getCityList() { return cityList; } public void setCityList(List<City> cityList) { this.cityList = cityList; } }
省servlet：==================================json轉換==============================
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); /* * 1.得到dao所有的省 * 2.將list<Province>轉換成json * 3.發送給客戶端 */ Dao dao=new Dao(); List<Province> plist=dao.getAllProvince(); String json=JSONArray.fromObject(plist).toString(); response.getWriter().print(json); }
異步顯示省：jsp==========這個只是ajax實現省份的代碼，全部代碼在後面：（重點：如何實現ajax+json銜接）
<script type="text/javascript"> function createXMLHttpRequest(){ try { return new XMLHttpRequest();//大多數瀏覽器 } catch (e) { try { return new ActiveXObject("msxml2.XMLHTTP");//IE6 } catch (e) { try { return new ActiveXObject("Micorsoft.XMLHTTP");//IE5甚至更早 } catch (e) { } } } } window.onload = function() { /* 一、發送異步請求，頁面加載完成，每個省份生成一個option添加到,<select id="province">下 */ //1.得到核心對象 var xmlHttp=createXMLHttpRequest(); //2.打開鏈接 xmlHttp.open("GET","<c:url value=‘/servlet/ProvinceServlet‘/>",true);//要實現這個必須導入taglib標簽體 //3.發送 xmlHttp.send(null); //4.添加監聽 xmlHttp.onreadystatechange=function(){ if (xmlHttp.readyState==4 && xmlHttp.status==200){ var proArry = eval("(" + xmlHttp.responseText + ")");//執行json字符串--得到數組 //遍歷數組 for ( var i = 0; i < proArry.length; i++) { var pro = proArry[i];//得到每個pro對象 var optionEle = document.createElement("option");//創建<option>元素 //給option的實際值賦pro.provinceid（省id） 而不是pro.province(省名稱) optionEle.value = pro.provinceid; var textNode = document.createTextNode(pro.province); optionEle.appendChild(textNode); //最後：把option元素添加到select元素中 document.getElementById("province").appendChild(optionEle); } } }; }; </script>
<!--body部分的設計-->
<body > <h1>省市區三級聯動</h1>${test} 省： <select name="province" id="province"> <option>===請選擇===</option> </select> 市： <select name="city" id="city"> <option>===請選擇===</option> </select> 區（縣）： <select name="area" id="area"> <option>===請選擇===</option> </select> </body>
三、省市區三級聯動數據庫：
https://files.cnblogs.com/files/wangsr-suc/Province_city_areas.zip
四、完整代碼
點擊下載
javaweb--json--ajax--mysql實現省市區三級聯動（附三級聯動數據庫）