ajax省市联动 java_java ajax二级省市联动

省市二级联动实现，网上找了好多，终于实现了。这里用的是数据库链接查询并用XML方式返回。(用的数据池)

1.、编写的index.jsp。

Java代码

UserDao ud=newUserDao();

ArrayList list=(ArrayList)ud.seclect();

%>

My JSP 'index.jsp'starting page

请选择省份

Sheng sheng=null;

for(inti=0;i

{

sheng=(Sheng)list.get(i);

%>

">

}

%>

请选择地市

UserDao ud=new UserDao();

ArrayList list=(ArrayList)ud.seclect();

%>

My JSP 'index.jsp' starting page

请选择省份

Sheng sheng=null;

for(int i=0;i

{

sheng=(Sheng)list.get(i);

%>

}

%>

请选择地市

2、编写js代码。

Java代码

function getXmlHttpRequestObject() {

if(window.XMLHttpRequest) {

returnnewXMLHttpRequest();

} else{

if(window.ActiveXObject) {

returnnewActiveXObject("Microsoft.XMLHTTP");

} else{

}

}

}

function createAjaxObj() {

var httprequest = false;

if(window.XMLHttpRequest) {

httprequest = newXMLHttpRequest();

if(httprequest.overrideMimeType) {

httprequest.overrideMimeType("text/xml");

}

} else{

if(window.ActiveXObject) {

try{

httprequest = newActiveXObject("Msxml2.XMLHTTP");

}

catch(e) {

try{

httprequest = newActiveXObject("Microsoft.XMLHTTP");

}

catch(e) {

}

}

}

}

returnhttprequest;

}

var httpReq = createAjaxObj();

//上边的代码是固定的。

function updateSelect(){

var selected = document.all.slt1.value;

httpReq.open("GET","testU?tid="+selected,false);

httpReq.onreadystatechange=function(){

checkReqCallBack();

};

httpReq.send(null);

}

function checkReqCallBack(){

if(httpReq.readyState ==4) {

if(httpReq.status ==200){

var xmlDoc = httpReq.responseXML.documentElement;//获得返回的XML文档

var xSel = xmlDoc.getElementsByTagName('select');

//获得XML文档中的所有标记

var select_root = document.getElementById('slt2');

//获得网页中的第二个下拉框

select_root.options.length=0;

//每次获得新的数据的时候先把每二个下拉框架的长度清0

for(var i=0;i

var xValue = xSel[i].childNodes[0].firstChild.nodeValue;

//获得每个标记中的第一个标记的值,也就是标记的值

var xText = xSel[i].childNodes[1].firstChild.nodeValue;

//获得每个标记中的第二个标记的值,也就是标记的值

var option = newOption(xText, xValue);

//根据每组value和text标记的值创建一个option对象

try{

select_root.add(option);//将option对象添加到第二个下拉框中

}catch(e){

}

}

}else{

alert("不能得到描述信息:"+ req.statusText);

}

}

}

function getXmlHttpRequestObject() {

if (window.XMLHttpRequest) {

return new XMLHttpRequest();

} else {

if (window.ActiveXObject) {

return new ActiveXObject("Microsoft.XMLHTTP");

} else {

}

}

}

function createAjaxObj() {

var httprequest = false;

if (window.XMLHttpRequest) {

httprequest = new XMLHttpRequest();

if (httprequest.overrideMimeType) {

httprequest.overrideMimeType("text/xml");

}

} else {

if (window.ActiveXObject) {

try {

httprequest = new ActiveXObject("Msxml2.XMLHTTP");

}

catch (e) {

try {

httprequest = new ActiveXObject("Microsoft.XMLHTTP");

}

catch (e) {

}

}

}

}

return httprequest;

}

var httpReq = createAjaxObj();

//上边的代码是固定的。

function updateSelect(){

var selected = document.all.slt1.value;

httpReq.open("GET","testU?tid="+selected,false);

httpReq.onreadystatechange=function(){

checkReqCallBack();

};

httpReq.send(null);

}

function checkReqCallBack(){

if(httpReq.readyState == 4) {

if(httpReq.status ==200){

var xmlDoc = httpReq.responseXML.documentElement;//获得返回的XML文档

var xSel = xmlDoc.getElementsByTagName('select');

//获得XML文档中的所有标记

var select_root = document.getElementById('slt2');

//获得网页中的第二个下拉框

select_root.options.length=0;

//每次获得新的数据的时候先把每二个下拉框架的长度清0

for(var i=0;i

var xValue = xSel[i].childNodes[0].firstChild.nodeValue;

//获得每个标记中的第一个标记的值,也就是标记的值

var xText = xSel[i].childNodes[1].firstChild.nodeValue;

//获得每个标记中的第二个标记的值,也就是标记的值

var option = new Option(xText, xValue);

//根据每组value和text标记的值创建一个option对象

try{

select_root.add(option);//将option对象添加到第二个下拉框中

}catch(e){

}

}

}else{

alert("不能得到描述信息:" + req.statusText);

}

}

}

3、编写的servlet。

Java代码

packagecom.servlet;

importjava.io.IOException;

importjava.util.ArrayList;

importjavax.servlet.ServletException;

importjavax.servlet.http.HttpServlet;

importjavax.servlet.http.HttpServletRequest;

importjavax.servlet.http.HttpServletResponse;

importcom.dao.UserDao;

importcom.vo.Shi;

publicclassTestUextendsHttpServlet {

publicString tid;

privatestaticfinallongserialVersionUID = 1L;

publicvoiddoGet(HttpServletRequest request, HttpServletResponse response)

throwsServletException, IOException {

UserDao ud=newUserDao();

try{

response.setCharacterEncoding("GBK");

response.setContentType("text/xml");

response.setHeader("Cache-Control","no-cache");

request.setCharacterEncoding("GBK");

response.setCharacterEncoding("UTF-8");

tid=request.getParameter("tid").toString();

ArrayList> list=ud.check(tid);

String xml_start = "";

String xml_end = "";

String xml = "";

Shi shi=null;

for(inti=0;i

shi=newShi();

shi=(Shi) list.get(i);

xml+=""+shi.getId()+""+shi.getName()+"";

}

String last_xml = xml_start + xml + xml_end;

response.getWriter().write(last_xml);

} catch(Exception e) {

e.printStackTrace();

}

}

publicvoiddoPost(HttpServletRequest request, HttpServletResponse response)

throwsServletException, IOException {

doGet(request,response);

}

}

package com.servlet;

import java.io.IOException;

import java.util.ArrayList;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.dao.UserDao;

import com.vo.Shi;

public class TestU extends HttpServlet {

public String tid;

private static final long serialVersionUID = 1L;

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

UserDao ud=new UserDao();

try {

response.setCharacterEncoding("GBK");

response.setContentType("text/xml");

response.setHeader("Cache-Control", "no-cache");

request.setCharacterEncoding("GBK");

response.setCharacterEncoding("UTF-8");

tid=request.getParameter("tid").toString();

ArrayList> list=ud.check(tid);

String xml_start = "";

String xml_end = "";

String xml = "";

Shi shi=null;

for(int i=0;i

shi=new Shi();

shi=(Shi) list.get(i);

xml+=""+shi.getId()+""+shi.getName()+"";

}

String last_xml = xml_start + xml + xml_end;

response.getWriter().write(last_xml);

} catch (Exception e) {

e.printStackTrace();

}

}

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

doGet(request,response);

}

}

总结：当一级省select改变时出发ajax，调用servlet并在servlet中调用dao层返回查找到的市级表，用ArrayList返回给servlet，在servlet中生成XML代码。

在js中用XML方式解析，(1、取得获得XML文档中的所有标记，为以后的迭代准备。2、取得页面的市节点，创建一个option对象，将option对象添加到第二个下拉框中。)。