本文实例为大家分享了AJAX二级联动效果的具体代码,供大家参考,具体内容如下
Ajax.js
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
<%@ 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
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>" );
}
}
|
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:http://www.cnblogs.com/ShaoXin/p/7412467.html