j2ee之AJAX二级联动效果
程序员文章站
2024-02-21 17:30:04
本文实例为大家分享了ajax二级联动效果的具体代码，供大家参考，具体内容如下
ajax.js
var createajax = function(){
v...
本文实例为大家分享了ajax二级联动效果的具体代码，供大家参考，具体内容如下
ajax.js
var createajax = function(){
var ajax = null;
try{
ajax = new activexobject("microsoft.xmlhttp");
}catch(e1){
try{
ajax = new xmlhttprequest();
}catch(e2){
alert("请换掉你的浏览器");
}
}
return ajax;
}
test3.xml
<%@ page language="java" contenttype="text/html; charset=utf-8"
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>
<script type="text/javascript" src="js/ajax.js"></script>
<base href="<%=basepath%>" rel="external nofollow" >
<title>??</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
</head>
<body>
<select id="province">
<option>请选择省份</option>
<option>江苏</option>
<option>江西</option>
</select>
<select id="city">
<option>请选择城市</option>
</select>
<script type="text/javascript">
document.getelementbyid("province").onchange = function(){
var cityelement = document.getelementbyid("city");
cityelement.options.length = 1;
/* 拿到第一个下拉框中选中的值 */
var index = this.selectedindex;
var optionelement = this[index];
var optionvalue = optionelement.innerhtml;
/* 把这个值发送给服务器 */
var ajax = createajax();
var url = "${pagecontext.request.contextpath }/selectservlet?time="+new date().gettime();
var method = "post";
ajax.open(method , url);
ajax.setrequestheader("content-type" , "application/x-www-form-urlencoded");
var content = "province=" + optionvalue;
ajax.send(content);
/* -----接收相应的数据----- */
ajax.onreadystatechange = function(){
if(ajax.readystate == 4 && ajax.status == 200){
/* 拿到xml */
var xmldocument = ajax.responsexml;
/* 用xml的解析方式拿到城市根据标签名称 */
var cityarray = xmldocument.getelementsbytagname("cityoption");
for (var i = 0; i < cityarray.length; i++){
/* 用xml的解析方式拿到城市的值 */
var city = cityarray[i].firstchild.nodevalue;
var option = document.createelement("option");
option.innerhtml = city;
cityelement.appendchild(option);
}
}
}
}
</script>
</body>
</html>
selectservlet.java
package com.newtouch.servlet;
import java.io.ioexception;
import javax.servlet.servletexception;
import javax.servlet.annotation.webservlet;
import javax.servlet.http.httpservlet;
import javax.servlet.http.httpservletrequest;
import javax.servlet.http.httpservletresponse;
/**
* servlet implementation class selectservlet
*/
@webservlet("/selectservlet")
public class selectservlet extends httpservlet {
private static final long serialversionuid = 1l;
/**
* @see httpservlet#httpservlet()
*/
public selectservlet() {
super();
// todo auto-generated constructor stub
}
/**
* @see httpservlet#doget(httpservletrequest request, httpservletresponse
* response)
*/
protected void doget(httpservletrequest request, httpservletresponse response)
throws servletexception, ioexception {
// todo auto-generated method stub
response.getwriter().append("served at: ").append(request.getcontextpath());
}
/**
* @see httpservlet#dopost(httpservletrequest request, httpservletresponse
* response)
*/
protected void dopost(httpservletrequest request, httpservletresponse response)
throws servletexception, ioexception {
request.setcharacterencoding("utf-8");
// 这里是text/xml是把数据放到了xml中
response.setcontenttype("text/xml;charset=utf-8");
string province = request.getparameter("province");
response.getwriter().write("<?xml version='1.0' encoding='utf-8' ?>");
response.getwriter().write("<root>");
if ("江苏".equals(province)) {
response.getwriter().write("<cityoption>1</cityoption>");
response.getwriter().write("<cityoption>2</cityoption>");
response.getwriter().write("<cityoption>3</cityoption>");
response.getwriter().write("<cityoption>4</cityoption>");
} else if ("江西".equals(province)) {
response.getwriter().write("<cityoption>一</cityoption>");
response.getwriter().write("<cityoption>二</cityoption>");
response.getwriter().write("<cityoption>三</cityoption>");
response.getwriter().write("<cityoption>四</cityoption>");
}
response.getwriter().write("</root>");
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。