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

AJAX二级下拉联动案例

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

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

我们这里就不读取数据库了，直接在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" %>


    
    



<%--############前台页面###################--%>
"province" id="provinceId">
    "-1">请选择省份
    广东
    湖南

"city" id="cityId">
    请选择城市


<%--############AJAX###################--%>

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("");
        printWriter.write("");
        if("广东".equals(province)){
            printWriter.write("广州");
            printWriter.write("深圳");
            printWriter.write("中山");
        }else if("湖南".equals(province)){
            printWriter.write("长沙");
            printWriter.write("株洲");
            printWriter.write("湘潭");
            printWriter.write("岳阳");
        }
        printWriter.write("");

        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);
    }
}

效果：

XML方式总结

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