j2ee之AJAX二级联动效果 - 快网idc优惠网

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

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持快网idc。

原文链接：http://www.cnblogs.com/ShaoXin/p/7412467.html

相关文章

微信

快网idc优惠网

QQ交流群