本文实例为大家分享了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