您的位置：首页 > Web前端 > JavaScript

学习aiax(javascript)--省份-城市二级下拉联动（POST方式）

2016-01-24 18:49 841 查看

1.jsp代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>省份-城市二级下拉联动（POST方式）</title>
<script type="text/javascript">
function createAJAX() {
var ajax = null;
try {
ajax = new ActiveXObject("microsoft.xmlhttp");
//alert("你的浏览器支持ajax,是IE");
} catch (e1) {
ajax = new XMLHttpRequest();
//alert("你的浏览器支持ajax,是非IE");
}
return ajax;
}
</script>
</head>
<body>
<select id="province">
<option>选择省份</option>
<option>江苏省</option>
<option>陕西省</option>
</select>    
<select id="city">
<option>选择城市</option>
</select>
</body>

<script type="text/javascript">
window.document.getElementById("province").onchange = function() {
//清除城市下拉框中的内容除第一项外
var citySelectElement = document.getElementById("city");
citySelectElement.options.length = 1;
//获取选中的省份
//获取选中option标签的索引号，从0开始
var i = this.selectedIndex;
//定位选中的option标签
var optionElement = this[i];
//获取选中的option标签中的内容，即省份
var province = optionElement.innerHTML;
//如果选中的内容不是"选择省份"
if ("选择省份" != province) {
//1.创建一部对象
var ajax = createAJAX();
//2.异步对象准备发送请求
var method = "post";
var url = "${pageContext.request.contextPath}/ProvinceCityAjaxServlet?time= "
+ new Date().getTime();
ajax.open(method, url);
//设置AJAX请求头为POST，他会将请求体中的汉字自动进行UTF-8的编码
ajax.setRequestHeader("content-type",
"application/x-www-form-urlencoded");
//3.AJAX异步对象真正发送请求体的数据到服务器，如果请求体无数据的话，用null表示,如果有值，用键值对
var content = "province=" + province;
ajax.send(content);
//---------------------------------等待-------------------------
//4. AJAX异步对象不断监听服务端状态的变化，只有状态码变化了，方可触发函数
//0-1-2-3-4,这些是可以触发函数的
//4-4-4-4-4，这些是不可以触发函数的
//以下这个函数是服务器来触发的，不是程序员触发的，这和onclick是不一样的
//4.
ajax.onreadystatechange = function() {
if (ajax.readyState == 4) {
if (ajax.status == 200) {
//5.从AJAX异步对象中获取服务器响应的xml文档
var xmlDocument = ajax.responseXML;
//6. 按照dom规则，解析xml文件中的所有内容
var cityElementArray = xmlDocument
.getElementsByTagName("city");
var size = cityElementArray.length;
for (var i = 0; i < size; i++) {
var cityElement = cityElementArray[i];
//innerHTML只能用于html和jsp页面，不能用于xml页面
//在xml页面我们通常用firstChild.nodeValue去替代innerHTML
var city = cityElement.firstChild.nodeValue;
//<option></option>
var optionElement = document
.createElement("option")
//<option>南京市</option>
optionElement.innerHTML = city;
//<select><option>南京市</option></select>
citySelectElement.appendChild(optionElement)
}
}
}
}
}

}
</script>
</html>

2.servlet代码

package com.buaa.ajax;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/ProvinceCityAjaxServlet")
public class ProvinceCityAjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/xml;charset=UTF-8");
String province = request.getParameter("province");
System.out.println(province);
PrintWriter pw = response.getWriter();
pw.write("<?xml version='1.0' encoding='UTF-8'?>");
pw.write("<root>");
if("江苏省".equals(province)){
pw.write("<city>南京市</city>");
pw.write("<city>无锡市</city>");
pw.write("<city>苏州市</city>");
pw.write("<city>南通市</city>");
}else if("陕西省".equals(province)){
pw.write("<city>西安市</city>");
pw.write("<city>咸阳市</city>");
pw.write("<city>渭南市</city>");
}
pw.write("</root>");
pw.flush();
pw.close();

}

}

注意：xml文档的接收方式

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航