Ajax实现省市区三级级联(数据来自mysql数据库)
实现Ajax实现省市区三级级联,需要Java解析json技术
整体Demo下载地址如下:点我下载
address.html
<!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title>Inserttitlehere</title> </head> <scripttype="text/javascript"> /** *得到XMLHttpRequest对象 */ functiongetajaxHttp(){ varxmlHttp; try{ //Firefox,Opera8.0+,Safari xmlHttp=newXMLHttpRequest(); }catch(e){ //InternetExplorer try{ xmlHttp=newActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ xmlHttp=newActiveXObject("Microsoft.XMLHTTP"); }catch(e){ alert("您的浏览器不支持AJAX!"); returnfalse; } } } returnxmlHttp; } /** *发送ajax请求 *url--请求到服务器的URL *methodtype(post/get) *con(true(异步)|false(同步)) *functionName(回调方法名,不需要引号,这里只有成功的时候才调用) *(注意:这方法有二个参数,一个就是xmlhttp,一个就是要处理的对象) */ functionajaxrequest(url,methodtype,con,functionName){ //获取XMLHTTPRequest对象 varxmlhttp=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); } //动态获取省的信息 functionaddrResponse(responseContents){ varjsonObj=newFunction("return"+responseContents)(); for(vari=0;i<jsonObj.addrList.length;i++){ document.getElementById('select').innerHTML+= "<optionvalue='"+jsonObj.addrList[i].id+"'>" +jsonObj.addrList[i].address+ "</option>" } } //选中省后 functionpChange(){ //先将市的之前的信息清除 document.getElementById('selectCity').innerHTML="<optionvalue='-1'>请选择市</option>"; //再将区的信息清除 document.getElementById('selectArea').innerHTML="<optionvalue='-1'>请选择区</option>"; //再将用户的输入清楚 document.getElementById("addr").innerHTML=""; varval=document.getElementById('select').value; if(val==-1){ document.getElementById('selectCity')[0].selected=true; return; } //开始执行获取市 ajaxrequest("addressSerlvet?method=city&provincial="+val,"POST",true,cityResponse); } //获取市的动态数据 functioncityResponse(responseContents){ varjsonObj=newFunction("return"+responseContents)(); for(vari=0;i<jsonObj.cityList.length;i++){ document.getElementById('selectCity').innerHTML+= "<optionvalue='"+jsonObj.cityList[i].id+"'>" +jsonObj.cityList[i].address+ "</option>" } } //选中市以后 functioncChange(){ varval=document.getElementById('selectCity').value; //开始执行获取区 ajaxrequest("addressSerlvet?method=area&cityId="+val,"POST",true,areaResponse); } //获取区的动态数据 functionareaResponse(responseContents){ varjsonObj=newFunction("return"+responseContents)(); for(vari=0;i<jsonObj.areaList.length;i++){ document.getElementById('selectArea').innerHTML+= "<optionvalue='"+jsonObj.areaList[i].id+"'>" +jsonObj.areaList[i].address+ "</option>" } } //点击提交按钮 functionconfirM(){ //获取省的文本值 varp=document.getElementById("select"); varpTex=p.options[p.options.selectedIndex].text; if(p.value=-1){ alert("请选择省"); return; } //获取市的文本值 varcity=document.getElementById("selectCity"); varcityTex=city.options[city.options.selectedIndex].text; if(city.value=-1){ alert("请选择市"); return; } //获取区的文本值 vararea=document.getElementById("selectArea"); varareaTex=area.options[area.options.selectedIndex].text; if(area.value=-1){ alert("请选择区"); return; } //获取具体位置id文本值 varaddr=document.getElementById("addr").value; //打印 document.getElementById("show").innerHTML="您选择的地址为"+pTex+""+cityTex+""+areaTex+""+addr; } </script> <body> <selectid="select"onchange="pChange()"> <optionvalue="-1">请选择省</option> </select> <selectid="selectCity"onchange="cChange()"> <optionvalue='-1'>请选择市</option> </select> <selectid="selectArea"onchange="aChange()"> <optionvalue='-1'>请选择市</option> </select> <inputtype="text"id="addr"/> <buttononclick="confirM();">确定</button> <divid="show"></div> </body> </html>
AddressServlet.java
packagecn.bestchance.servlet; importjava.io.IOException; importjava.util.ArrayList; importjavax.servlet.ServletException; importjavax.servlet.annotation.WebServlet; importjavax.servlet.http.HttpServlet; importjavax.servlet.http.HttpServletRequest; importjavax.servlet.http.HttpServletResponse; importcn.bestchance.dao.AddressDao; importcn.bestchance.dao.impl.AddressDaoImpl; importcn.bestchance.entity.Address; importnet.sf.json.JSONArray; importnet.sf.json.JSONObject; @WebServlet("/addressSerlvet") publicclassAddressSerlvetextendsHttpServlet{ privatestaticfinallongserialVersionUID=1L; privateAddressDaodao=newAddressDaoImpl(); protectedvoiddoGet(HttpServletRequestrequest, HttpServletResponseresponse)throwsServletException,IOException{ doPost(request,response); } /** *@seeHttpServlet#doPost(HttpServletRequestrequest,HttpServletResponse *response) */ protectedvoiddoPost(HttpServletRequestrequest, HttpServletResponseresponse)throwsServletException,IOException{ response.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); Stringmethod=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获取该市下的区的全部信息 *@paramrequest *@paramresponse *@throwsServletException *@throwsIOException */ protectedvoidgetArea(HttpServletRequestrequest, HttpServletResponseresponse)throwsServletException,IOException{ StringcityId=request.getParameter("cityId"); //从数据库中查询省的信息 ArrayList<Address>areaList=dao.getAreaByCityId(Integer.parseInt(cityId)); //将集合转成json字符串 JSONObjectjsonObj=newJSONObject(); JSONArrayjsonArray=JSONArray.fromObject(areaList); jsonObj.put("areaList",jsonArray); StringjsonDataStr=jsonObj.toString(); response.getWriter().print(jsonDataStr); } /** *获取省的信息并相应 *@paramrequest *@paramresponse *@throwsServletException *@throwsIOException */ protectedvoidgetProvincial(HttpServletRequestrequest, HttpServletResponseresponse)throwsServletException,IOException{ //从数据库中查询省的信息 ArrayList<Address>addrList=dao.getProvince(); //将集合转成json字符串 JSONObjectjsonObj=newJSONObject(); JSONArrayjsonArray=JSONArray.fromObject(addrList); jsonObj.put("addrList",jsonArray); StringjsonDataStr=jsonObj.toString(); response.getWriter().print(jsonDataStr); } /** *获取市的信息并相应 *@paramrequest *@paramresponse *@throwsServletException *@throwsIOException */ protectedvoidgetCity(HttpServletRequestrequest, HttpServletResponseresponse)throwsServletException,IOException{ StringprovinceId=request.getParameter("provincial"); //从数据库中查询省的信息 ArrayList<Address>addrList=dao.getCityByProvinceId(Integer.parseInt(provinceId)); //将集合转成json字符串 JSONObjectjsonObj=newJSONObject(); JSONArrayjsonArray=JSONArray.fromObject(addrList); jsonObj.put("cityList",jsonArray); StringjsonDataStr=jsonObj.toString(); response.getWriter().print(jsonDataStr); } }
AddressDao.java
packagecn.bestchance.dao; importjava.util.ArrayList; importcn.bestchance.entity.Address; publicinterfaceAddressDao{ /** *获取省的id和名称 *@return */ ArrayList<Address>getProvince(); /** *根据省的id获取市的信息 *@paramprovinceId *@return */ ArrayList<Address>getCityByProvinceId(intprovinceId); /** *根据市的id获取区的信息 *@paramcityId *@return */ ArrayList<Address>getAreaByCityId(intcityId); }
AddressDaoImpl.java
packagecn.bestchance.dao.impl; importjava.sql.ResultSet; importjava.sql.SQLException; importjava.util.ArrayList; importcn.bestchance.dao.AddressDao; importcn.bestchance.entity.Address; importcn.bestchance.util.DBUtil; publicclassAddressDaoImplimplementsAddressDao{ privateDBUtildb=newDBUtil(); @Override publicArrayList<Address>getProvince(){ ArrayList<Address>addrList=newArrayList<Address>(); db.openConnection(); Stringsql="select*fromprovince"; ResultSetrs=db.excuteQuery(sql); try{ while(rs.next()){ Addressaddr=newAddress(); addr.setId(rs.getInt(2)); addr.setAddress(rs.getString(3)); addrList.add(addr); } }catch(SQLExceptione){ //TODOAuto-generatedcatchblock e.printStackTrace(); }finally{ if(rs!=null){ try{ rs.close(); }catch(SQLExceptione){ //TODOAuto-generatedcatchblock e.printStackTrace(); } } db.closeResoure(); } returnaddrList; } @Override publicArrayList<Address>getCityByProvinceId(intprovinceId){ ArrayList<Address>addrList=newArrayList<Address>(); db.openConnection(); Stringsql="select*fromcitywherefatherID="+provinceId;//431200 ResultSetrs=db.excuteQuery(sql); try{ while(rs.next()){ Addressaddr=newAddress(); addr.setId(rs.getInt(2)); addr.setAddress(rs.getString(3)); addrList.add(addr); } }catch(SQLExceptione){ //TODOAuto-generatedcatchblock e.printStackTrace(); }finally{ if(rs!=null){ try{ rs.close(); }catch(SQLExceptione){ //TODOAuto-generatedcatchblock e.printStackTrace(); } } db.closeResoure(); } returnaddrList; } @Override publicArrayList<Address>getAreaByCityId(intcityId){ ArrayList<Address>addrList=newArrayList<Address>(); db.openConnection(); Stringsql="select*fromareawherefatherID="+cityId;//431200 ResultSetrs=db.excuteQuery(sql); try{ while(rs.next()){ Addressaddr=newAddress(); addr.setId(rs.getInt(2)); addr.setAddress(rs.getString(3)); addrList.add(addr); } }catch(SQLExceptione){ //TODOAuto-generatedcatchblock e.printStackTrace(); }finally{ if(rs!=null){ try{ rs.close(); }catch(SQLExceptione){ //TODOAuto-generatedcatchblock e.printStackTrace(); } } db.closeResoure(); } returnaddrList; } }
实体类Address.java
packagecn.bestchance.entity; publicclassAddress{ @Override publicStringtoString(){ return"Address[id="+id+",address="+address+"]"; } privateintid; privateStringaddress; publicintgetId(){ returnid; } publicvoidsetId(intid){ this.id=id; } publicStringgetAddress(){ returnaddress; } publicvoidsetAddress(Stringaddress){ this.address=address; } publicAddress(){ super(); //TODOAuto-generatedconstructorstub } publicAddress(intid,Stringaddress){ super(); this.id=id; this.address=address; } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。