ajax简单例子（转）

最新推荐文章于 2022-05-12 19:09:33 发布

panshaobinSB

最新推荐文章于 2022-05-12 19:09:33 发布

阅读量106

点赞数

分类专栏： java web 文章标签： java web.xml javascript ViewUI

本文链接：https://blog.csdn.net/panshaobinSB/article/details/84340259

版权

java web 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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();
	}
}

这个例子是首先页面出现两个下拉框,然后选择了左边下拉框的省份就可以加载显示右边的城市。

panshaobinSB

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax简单例子（转）

web.xml[code="java"] SelectCityServlet com.stephen.servlet.SelectCityServlet SelectCityServlet /servlet/SelectCityServlet [/code]ajax.jsp[code="ja...
复制链接

扫一扫

专栏目录