欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

ajax获取服务器以xml模式输出省市数据,并获取数据绑定前台下拉框和实现联动

更新时间: 2014-01-05 02:01:29 责任编辑: Author_N1

 

ajax获取服务器以xml形式输出省市数据,并获取数据绑定前台下拉框和实现联动
1、利用servlet作为服务器,以xml形式输出省市的、数据,代码如下:
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

response.setCharacterEncoding("utf-8");
response.setContentType("text/xml,charset=utf-8");//表示以xml形式输出数据
PrintWriter out = response.getWriter();

out.println("<china>");
out.println("<province name='广东省'>");
out.println("<city>广州市</city>");
out.println("<city>佛山市</city>");
out.println("<city>深圳市</city>");
out.println("<city>湛江市</city>");
out.println("</province>");

out.println("<province name='江苏省'>");
out.println("<city>徐州市</city>");
out.println("<city>无锡市</city>");
out.println("<city>常州市</city>");
out.println("</province>");

out.println("<province name='广西省'>");
out.println("<city>桂林市</city>");
out.println("<city>北海市</city>");
out.println("<city>南宁市</city>");
out.println("</province>");
out.println("</china>");
out.close();
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}



2、test.js文件,在这个文件会模拟ajax连接servlet服务器,并获取服务器输出的xml数据,并绑定前台下拉框和实现联动  代码如下:

//创建XmlHttpRequest对象
function getXmlHttpRequest(){
var xmlHttpRequest;
try {
xmlHttpRequest = new XMLHttpRequest();
} catch (e) {
try {
              // Internet  Explorer
              xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTp");
         }catch(e){
              try{
                   // Internet  Explorer
                   xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
              }catch(e){
              }
         }
}
return xmlHttpRequest;
}
window.onload = function(){
var data;
var xmlHttpRequest = getXmlHttpRequest();
xmlHttpRequest.onreadystatechange = function(){
if(xmlHttpRequest.readyState==4){
if(xmlHttpRequest.status==200){
data = xmlHttpRequest.responseXML;
//获取所有标签province元素
var provinceElements = data.getElementsByTagName("province");
for(var i = 0 ;i < provinceElements.length ; i++){
//得到每个province元素
var provinceElement = provinceElements[i];

//获取元素中name的属性值
var value = provinceElement.getAttribute("name");
//创建option元素
var optionElement = document.createElement("option");
    //给option设置value属性值
optionElement.setAttribute("value",value);
//创建文本节点
var textElement = document.createTextNode(value);
//给option元素追加文本
optionElement.appendChild(textElement);
//获取id为province的元素
var province = document.getElementById("province");
//给province元素追加option
province.appendChild(optionElement);

}
}
}
}
//xmlHttpRequest.open("GET","./servlet/HtmlServlet?a=8",true);
xmlHttpRequest.open("POST","./servlet/XmlServlet",true);
xmlHttpRequest.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");//使用get可以不设置,使用post必须设置,告知服务器正在发送数据,并通过url编码
xmlHttpRequest.send(null);
//xmlHttpRequest.send("b=9&c=10");

document.getElementById("province").onchange = function(){
//获取id为province的元素
var city = document.getElementById("city");
var optionConut = city.options.length;//获取城市中页面显示的选择数目
for(var j = 0; optionConut>1&&j < optionConut-1; j++){
city.options.remove(1);//删除除了请选择这个选项的之前所有选项
} //city.sel.selectindex=1;
var selectValue = this.options[this.selectedIndex].value;
//alert(selectValue);
var provinceElements = data.getElementsByTagName("province");
for (var i = 0; i < provinceElements.length; i++) {
//得到每个province元素
var provinceElement = provinceElements[i];

//获取元素中name的属性值
if (provinceElement.getAttribute("name") == selectValue) {
var cityElements = provinceElement.getElementsByTagName("city");
for (var j = 0; j < cityElements.length; j++){
//cityElements[i].childNodes[0].nodeValue
var cityElement = cityElements[j].childNodes[0];
//获取city元素文本值
var text = cityElement.nodeValue;
//创建option元素
var optionElement = document.createElement("option");
//给option设置value属性值
optionElement.setAttribute("value", text);
//创建文本节点
var textElement = document.createTextNode(text);
//给option元素追加文本
optionElement.appendChild(textElement);
//给province元素追加option
city.appendChild(optionElement);
}
}
}
}

}




3、前台jsp页面


<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
<script type="text/javascript"  src="${pageContext.request.contextPath }/scripts/test.js"></script>
  </head>
 
  <body>
  <form action="" enctype="application/x-www-form-urlencoded" >
    <div>
          省份:<select id="province">
          <option value="请选择">请选择</option>
          </select>
          市区:<select id="city">
              <option value="请选择">请选择</option>
          </select>
    </div>
    </form>
  </body>
</html>



上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-01-05 02:01:29
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/4637/
本文WWW.DOC100.NET DOC100.NET版权所有。