学习aiax(javascript)--省份-城市二级下拉联动（POST方式）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习aiax(javascript)--省份-城市二级下拉联动（POST方式）相关的知识，希望对你有一定的参考价值。
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文档的接收方式
以上是关于学习aiax(javascript)--省份-城市二级下拉联动（POST方式）的主要内容，如果未能解决你的问题，请参考以下文章
学习aiax(javascript)--页面无刷新用ajax检查用户名是否已注册（POST方式）