AJAX二级下拉联动【XML方式】

AJAX二级下拉联动案例

我们在购物的时候,常常需要我们来选择自己的收货地址,先选择省份,再选择城市

有没有发现:当我们选择完省份的时候,出现的城市全部都是根据省份来给我们选择的。这是怎么做到的呢???其实就是通过AJAX来完成的。使用AJAX技术让我们看起来网页非常“智能”,会根据省份来给出对应的城市信息。

AJAX二级下拉联动【XML方式】

我们这里就不读取数据库了,直接在Servlet写死数据来进行模拟测试


分析

我们知道AJAX与服务器之间的交互常用的传输载体格式有三种:

  • HTML
  • XML
  • JSON

由于省份与城市是有层级关系的,因此我们只能用XML或者JSON

我们这里首先就用XML来进行,后面会使用JSON,来看看他俩有什么不同的地方。。

前台分析

当用户选择了某个省份之后,就使用AJAX与服务器进行交互,那么在选择城市的时候就出现对应的城市信息。

  • 监听下拉框值变化事件
  • 只要下拉框值变化了,就与服务器进行交互
  • 得到服务器返回的值,解析XML
  • 使用DOM把数据写到城市下拉框列表中

后台分析

  • 得到前台带过来的数据
  • 判断该数据是什么,返回对应的的XML文件

写JSP页面


<%--
Created by IntelliJ IDEA.
User: ozc
Date: 2017/5/17
Time: 19:38
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>多级联动</title>
<script type="text/javascript" src="js/ajax.js"></script>
</head>
<body> <%--############前台页面###################--%>
<select name="province" id="provinceId">
<option value="-1">请选择省份</option>
<option>广东</option>
<option>湖南</option>
</select>
<select name="city" id="cityId">
<option>请选择城市</option>
</select> <%--############AJAX###################--%> <script type="text/javascript"> document.getElementById("provinceId").onchange = function () { /**********定位到下拉框,获取下拉框的值***************/
// 获取选中的下拉框索引值
var index = this.selectedIndex;
// 得到下拉框的值
var province = this.options[index].innerHTML; //下拉框的值要是“请选择”,那么我们是不会访问服务器的
if ("请选择省份" != province) { /********由于每次都会自动添加,因此每次在调用的时候清除***********/
var citySelect = document.getElementById("cityId"); //每次都将option变成长度只有1的
citySelect.options.length = 1; /*************ajax代码*********************/
//创建AJAX对象
var ajax = createAJAX();
//准备发送请求
var method = "post";
var url = "${pageContext.request.contextPath}/ProvinceServlet?time=" + new Date().getTime();
ajax.open(method, url);
//由于是POST方式,因此要设置头
ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded"); ajax.send("province=" + province); /************ajax回调函数*********************/
ajax.onreadystatechange = function () { if (ajax.readyState == 4) {
if (ajax.status == 200) { //得到服务器端带过来的XML
var XMLDocument = ajax.responseXML; /**********解析XML文档,使用DOM写到下拉框中****************/
var cities = XMLDocument.getElementsByTagName("city"); //得到每一个cities节点的值,动态生成下拉框,添加到下拉框中
for (var i = 0; i < cities.length; i++) {
var value = cities[i].firstChild.nodeValue;
//动态生成下拉框
var optionElement = document.createElement("option");
optionElement.innerHTML = value; //添加到下拉框中
citySelect.appendChild(optionElement); }
}
}
}; } }; </script> </body>
</html>

Servlet


import java.io.IOException;
import java.io.PrintWriter; /**
* Created by ozc on 2017/5/17.
*/
@javax.servlet.annotation.WebServlet(name = "ProvinceServlet",urlPatterns = "/ProvinceServlet")
public class ProvinceServlet extends javax.servlet.http.HttpServlet {
protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException { //设置中文编码
request.setCharacterEncoding("UTF-8");
String province = request.getParameter("province"); //这里是返回的是XML,因此指定XML数据!
response.setContentType("text/xml;charset=UTF-8"); PrintWriter printWriter = response.getWriter(); /****************返回XML文件给前台**************/
printWriter.write("<?xml version='1.0' encoding='UTF-8'?>");
printWriter.write("<root>");
if("广东".equals(province)){
printWriter.write("<city>广州</city>");
printWriter.write("<city>深圳</city>");
printWriter.write("<city>中山</city>");
}else if("湖南".equals(province)){
printWriter.write("<city>长沙</city>");
printWriter.write("<city>株洲</city>");
printWriter.write("<city>湘潭</city>");
printWriter.write("<city>岳阳</city>");
}
printWriter.write("</root>"); System.out.println("1111"); /*******事后操作*******/
printWriter.flush();
printWriter.close(); } protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException { this.doPost(request, response);
}
}

效果:

AJAX二级下拉联动【XML方式】

XML方式总结

  • 监听下拉框的变化,如果变化了,那么就使用异步操作去访问服务器,得到对应的数据返回给异步对象
  • 异步对象解析服务器带过来的数据,使用DOM编程把数据动态添加到页面上
    • 在Servlet上记得要指定返回的是XML的数据!
    • 在前台解析XML文档的时候,不能直接使用innerHtml来得到节点的值,只能通过firstChild.nodeValue的方式获取。
    • 由于每次append到下拉框都会连续append,因此在响应事件的时候,把下拉框清零
    • 把下拉框options的长度赋值为1,那么就是清零的操作了
上一篇:学以致用一 安装centos7.2虚拟机


下一篇:读书笔记_Effective_C++_条款二十五: 考虑写出一个不抛出异常的swap函数