这个例子是实现省、市二级联动，当选择某一省时，改省下面的市就会在另一个下拉框显示出来。在本例中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();
}
}
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();
}
}
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
桃源资源网 Design By www.nqtax.com
暂无“AJAX解析XML实例之下拉框省、市二级联动”评论...
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。