这个例子是实现省、市二级联动,当选择某一省时,改省下面的市就会在另一个下拉框显示出来。在本例中ajax通过解析xml文件得到的数据传回到jsp页面,其中省市均是从数据库取到的值:
jsp页面代码:
<%@ page language="java" import="java.util.*" pageencoding="utf-8"%>
<%
string path = request.getcontextpath();
string basepath = request.getscheme()+"://"+request.getservername()+":"+request.getserverport()+path+"/";
%>
<!doctype html public "-//w3c//dtd html 4.01 transitional//en">
<html>
<head>
</head>
<script type="text/javascript">
var xmlhttp=null;
//创建xmlhttprequest对象
if(window.xmlhttprequest){
xmlhttp=new xmlhttprequest();
}else{
xmlhttp=new activeobject("microsoft.xmlhttp");
}
var url="getprovince?time="+new date().gettime();
function getsheng(){
xmlhttp.open("post",url,true);
xmlhttp.setrequestheader("content-type", "application/x-www-form-urlencoded");
xmlhttp.send();
xmlhttp.onreadystatechange=getprovince;
}
function getprovince(){
if(xmlhttp.readystate==4 && xmlhttp.status==200){
var xmlfile=xmlhttp.responsexml;
//获取省的节点
var province=xmlfile.getelementsbytagname("province");;
//获取select标签
var pselect=document.getelementbyid("sheng");
//循环取出xml文件省信息
for(var i=0;i<province.length;i++){
var shorter=province[i].getattribute("name");
var provincename=province[i].text;
//循环将省信息放入select中
pselect.options.add(new option(provincename,shorter));//(text,value)
}
}
}
function getcity(){
xmlhttp.open("post",url,true);
xmlhttp.setrequestheader("content-type", "application/x-www-form-urlencoded");
var province=document.getelementbyid("sheng").value;
alert("省:"+province);
xmlhttp.send("province="+province);
xmlhttp.onreadystatechange=setcity;
}
function setcity(){
if(xmlhttp.readystate==4 && xmlhttp.status==200){
var city=document.getelementbyid("city");
var cityxml=xmlhttp.responsexml;
city.options.length=0;
var citys=cityxml.getelementsbytagname("city");
for(var i=0;i<citys.length;i++){
var cityname=citys[i].text;
alert(cityname);
city.options.add(new option(cityname,cityname));
}
}
}
</script>
<body onload="getsheng()">
省:<select name="sheng" id="sheng" onchange="getcity()">
<option>请选择</option>
</select>
市:<select name="city" id="city">
</select>
</body>
</html>
servlet代码:
public void dopost(httpservletrequest request, httpservletresponse response)
throws servletexception, ioexception {
request.setcharacterencoding("utf-8");
string province=request.getparameter("province");
if(province!=null){
sendcity(request,response,province);
}else{
shengdao sd=new shengdao();
list<sheng> list=sd.selall();
response.setcharacterencoding("utf-8");
printwriter out=response.getwriter();
response.setcontenttype("text/xml");
out.println("<?xml version='1.0' encoding='utf-8'?>");
out.println("<china>");
for (sheng sheng : list) {
out.print("<province name='"+sheng.getshorter()+"'>"+sheng.getprovince()+"</province>");
out.println();
}
out.println("</china>");
}
}
public void sendcity(httpservletrequest request, httpservletresponse response,string shorter){
try {
request.setcharacterencoding("utf-8");
} catch (unsupportedencodingexception e1) {
e1.printstacktrace();
}
try {
response.setcharacterencoding("utf-8");
printwriter out=response.getwriter();
response.setcontenttype("text/xml");
shengdao sd=new shengdao();
list<city> list=sd.selall(shorter);
out.println("<?xml version='1.0' encoding='utf-8'?>");
out.println("<province>");
for (city city : list) {
out.println("<city name='"+city.getshorter()+"'>"+city.getcityname()+"</city>");
system.out.println("<city name='"+city.getshorter()+"'>"+city.getcityname()+"</city>");
}
out.println("</province>");
} catch (ioexception e) {
e.printstacktrace();
}
}
如对本文有疑问,
点击进行留言回复!!
相关文章:
-
-
-
-
7月15日笔试总结
测验项目:3C数码商城+简答题+选择题测验时间:3小时不足之处:简答题3道题留白,完全不懂,仍需复习,一道题简写...
[阅读全文]
-
-
-
-
-
原生AJAX
AJAXAJAX 是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部...
[阅读全文]
-
-
网友评论