web.xml
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>SelectCityServlet</servlet-name>
<servlet-class>com.stephen.servlet.SelectCityServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>SelectCityServlet</servlet-name>
<url-pattern>/servlet/SelectCityServlet</url-pattern>
</servlet-mapping>
</web-app>
ajax.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ 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>
<title>MyHtml.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<script type="text/javascript">
function getResult(stateVal) {
var url = "SelectCityServlet?state="+stateVal;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
}else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if(req){
req.open("GET",url, true);
req.onreadystatechange = complete;
req.send(null);
}
}
function complete(){
if (req.readyState == 4) {
if (req.status == 200) {
var city = req.responseXML.getElementsByTagName("city");
file://alert(city.length);
var str=new Array();
for(var i=0;i<city.length;i++){
str[i]=city[i].firstChild.data;
}
file://alert(document.getElementById("city"));
buildSelect(str,document.getElementById("city"));
}
}
}
function buildSelect(str,sel) {
sel.options.length=0;
for(var i=0;i<str.length;i++) {
sel.options[sel.options.length]=new Option(str[i],str[i])
}
}
</script>
<body>
<select name="state" onChange="getResult(this.value)">
<option value="">Select</option>
<option value="zj">ZEHJIANG</option>
<option value="zs">JIANGSU</option>
</select>
<select id="city">
<option value="">CITY</option>
</select>
</body>
</html>
SelectCityServlet.java
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* @author Administrator
*
* TODO To change the template for this generated type comment go to
* Window - Preferences - Java - Code Style - Code Templates
*/
public class SelectCityServlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
public SelectCityServlet() {
super();
}
public void destroy() {
super.destroy();
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
String state = request.getParameter("state");
StringBuffer sb = new StringBuffer("<state>");
if ("zj".equals(state)) {
sb.append("<city>hangzhou</city><city>huzhou</city>");
} else if ("zs".equals(state)) {
sb.append("<city>nanjing</city><city>yangzhou</city><city>suzhou</city>");
}
sb.append("</state>");
PrintWriter out = response.getWriter();
out.write(sb.toString());
out.close();
}
}
这个例子是首先页面出现两个下拉框,然后选择了左边下拉框的省份就可以加载显示右边的城市。
分享到:
相关推荐
msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子
ajax最简单例子,适合初学者看.
一个完整的用js写的ajax例子,模仿注册页面输入用户名,输入框失去焦点后,后台异步判断该用户名是否可用,并在页面显示判断结果
很简单的一个AJAX例子 .rar很简单的一个AJAX例子 .rar
我做的ajax简单例子!
一些ajax例子,ajax学习例子,ajax入门,简单ajax 公司erp模块 http://www.keatonfund.cn/solution/index.html
Ajax最简单例子,一个例子让你明白Ajax原理,XMLHttpRequest原理 var http_request = false; function createRequest(url) { http_request = false; if (window.XMLHttpRequest) { // Mozilla浏览器 ...
简单ajax登陆,servlet+ajax
php+jquery+ajax最简单例子
Ajax最简单的例子(1),通过它可以很快的知道Ajax 的工作原理!
php ajax 实现局部刷新简单例子(超简单化)
ajax简单例子有源码经典案例,提高大家的学习帮助
这是我写的一个很精简的Ajax例子里面对相关的Ajax的代码段有详细的描述,希望对正在学习Ajax的朋友有所帮助
ajax 简单例子 里面由我学习得例子
一个简单的Jsp中使用ajax例子,详细的代码
ajax简单例子 这个例子我已经运行过 里面有注释
ajax最简单例子之二,通过简单例子了解ajax的原理!
ajax的一个简单例子,这是一个小例子,可以仅供参考