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;
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。