ajax省市联动案例,ajax省市联动

步骤

1、页面

===请选择省份===

===请选择城市===

2、ProvinceServlet

*当页面加载完毕后马上请求这个Servlet

*它需要加载china.xml文件，把所有的省的名称使用字符发送给客户端

3、页面

*获取这个字符串，使用逗号分割，得到数组

*循环遍历每个字符串(省份的名称)，使每个字符串创建一个元素添加到这个元素中

4、CityServlet

*当页面选择某个省时，发送请求

*得到省份的名称，加载china.xml文件，查询出该省份对应的元素对象，把这个元素对象转化为xml字符串，发送给客户端

5、页面

*得到中的所有子元素

*得到服务器的响应结果：doc

*获取所有的元素，循环遍历，得到的内容

*使用每个的内容，创建一个元素，添加到

ProvinceServlet

response.setContentType("text/html;charset=utf-8");

request.setCharacterEncoding("utf-8");

try {

//Dom解析，得到Document

SAXReader reader=new SAXReader();

InputStream input = this.getClass().getResourceAsStream("/china.xml");

Document doc=reader.read(input);

/**

* selectNodes使用该节点作为查询的根节点，

* 并且将结果作为一个 NodeList 返回数组

* 并且只能用于xml，而不能用于html

*/

List arrList=doc.selectNodes("//province/@name");

/*"//province/@name"----得到的nodeList是attribute集合

"//province[@name]"----得到的是有name属性的element集合

*/

StringBuilder sb=new StringBuilder();

//遍历所有省份的名称，list里面用size()表示数组长度，将其变为一个字符串

for(int i=0;i

sb.append(arrList.get(i).getValue());

if(i

//最后一个不加逗号

sb.append(",");

}

}

response.getWriter().print(sb);

} catch (Exception e) {

throw new RuntimeException(e);

}

CityServlet

response.setContentType("text/xml;charset=utf-8");

request.setCharacterEncoding("utf-8");

try {

SAXReader reader=new SAXReader();

InputStream input = this.getClass().getResourceAsStream("/china.xml");

Document doc=reader.read(input);

//获取pname的参数

String pname=request.getParameter("pname");

//selectSingleNode：查找和 XPath 查询匹配的一个节点。

Element proEle = (Element) doc.selectSingleNode("//province[@name='"+pname+"']");

String xmlStr=proEle.asXML();//将这个节点(元素)的开始到结束包含的内容组成String

response.getWriter().print(xmlStr);

} catch (Exception e) {

throw new RuntimeException(e);

}

页面

js部分

function createXMLHttpRequest() {

try {

return new XMLHttpRequest();//大多数浏览器

} catch (e) {

try {

return ActvieXObject("Msxml2.XMLHTTP");//IE6.0

} catch (e) {

try {

return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本

} catch (e) {

alert("哥们儿，您用的是什么浏览器啊？");

throw e;

}

}

}

}

window.οnlοad=function(){

var xmlHttp=createXMLHttpRequest();

xmlHttp.open("GET","",true);

xmlHttp.send(null);

xmlHttp.onreadystatechange=function(){

if(xmlHttp.readyState==4 && xmlHttp.status==200){

var text=xmlHttp.responseText;//此地响应的是一个字符串(province中)

var arr=text.split(",");

for(var i=0; i< arr.length;i++){

var op = document.createElement("option");//创建一个指名名称元素

op.value = arr[i];//设置op的实际值为当前的省份名称

var textNode = document.createTextNode(arr[i]);//创建文本节点

op.appendChild(textNode);//把文本子节点添加到op元素中，指定其显示值

document.getElementById("p").appendChild(op);

}

};

};

var proSelect=document.getElementById("p");

proSelect.οnchange=function(){

var xmlHttp = createXMLHttpRequest();

xmlHttp.open("POST", "", true);

xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xmlHttp.send("pname=" + proSelect.value);//把下拉列表中选择的值发送给服务器！

xmlHttp.onreadystatechange = function() {

if(xmlHttp.readyState==4 && xmlHttp.status==200){

/*

把select中的所有option移除(除了请选择)

*/

var citySelect = document.getElementById("c");

// 获取其所有子元素

var optionEleList = citySelect.getElementsByTagName("option");

// 循环遍历每个option元素，然后在citySelect中移除

while(optionEleList.length > 1) {//子元素的个数如果大于1就循环，等于1就不循环了！

citySelect.removeChild(optionEleList[1]);//总是删除1下标，因为1删除了，2就变成1了！

}

var doc = xmlHttp.responseXML;

// 得到china.xml中所有名为city的元素

/***

getElementsByTagName返回的是集合，一个dom对象，具有length属性

*/

var cityEleList = doc.getElementsByTagName("city");

// 循环遍历每个city元素

for(var i = 0; i < cityEleList.length; i++) {

var cityEle = cityEleList[i];//得到每个city元素

var cityName;

// 获取市名称

if(window.addEventListener) {//处理浏览器的差异

cityName = cityEle.textContent;//支持FireFox等浏览器

} else {

cityName = cityEle.text;//支持IE

}

// 使用市名称创建option元素，添加到中

var op = document.createElement("option");

op.value = cityName;

// 创建文本节点

var textNode = document.createTextNode(cityName);

op.appendChild(textNode);//把文本节点追加到op元素中

//把op添加到元素中

citySelect.appendChild(op);

}

}

};

};

};

html部分

===请选择省份===

===请选择城市===

标签：xml,省市,xmlHttp,元素,ajax,联动,var,document,op

来源： https://blog.csdn.net/qq_43501462/article/details/104857746