AJAX应用案例之省市联动

jsp

　　主要是要注意多Document的操作

<%--

  Created by IntelliJ IDEA.

  User: YuWenHui

  Date: 2017/4/23 0023

  Time: 19:00

  To change this template use File | Settings | File Templates.

--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>

<head>

    <title>省市联动</title>

    <script>

        function createXMLHttpRequest() {

            try {

                return new XMLHttpRequest();

            }catch (e){

                try {

                    return new ActiveXObject("Msxml2.XMLHTTP");

                }catch (e){

                    try {

                        return new ActiveXObject("Microsoft.XMLHTTP");

                    }catch (e){

                        throw e;

                    }

                }

            }

        };

        window.onload() = function () {

            var xmlHttp = createXMLHttpRequest();

            xmlHttp.open("GET","<c:url value='/ProvinceServlet'/>",true);

            xmlHttp.send(null);

            xmlHttp.onreadystatechange=function () {

                if(xmlHttp.readyState==4 && xmlHttp.status==200){

                    var text=xmlHttp.responseText;

                    var arr = text.split(",");

                    for(var i=0;i<arr.length;i++){

//                        创建一个指定名称的元素

                        var op =document.createElement("option");

//                        设置实际值

                        op.value=arr[i];

//                        创建文本节点

                        var textNode = document.createTextNode(arr[i]);

//                        把文本子节点添加到op元素总

                        op.appendChild(textNode);

                        document.getElementById("province").appendChild(op);

                    }

                }

            };

        };

        var provinceSelect = document.getElementById("province");

        provinceSelect.onchange=function () {

            var xmlHttp = createXMLHttpRequest();

            xmlHttp.open("POST","<c:url value='/CityServletServlet'/>",true);

            xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

            xmlHttp.send("pname="+provinceSelect.value);

            xmlHttp.onreadystatechange=function () {

                if(xmlHttp.readyState==4 && xmlHttp.status==200){

//                     把select中的所有option移除（除了请选择）

                    var citySelect = document.getElementById("city");

                    // 获取其所有子元素

                    var optionEleList = citySelect.getElementsByTagName("option");

                    // 循环遍历每个option元素，然后在citySelect中移除

                    while(optionEleList.length > 1) {//子元素的个数如果大于1就循环，等于1就不循环了！

                        citySelect.removeChild(optionEleList[1]);//总是删除1下标，因为1删除了，2就变成1了！

                    }

                    var doc = xmlHttp.responseXML;

                    // 得到所有名为city的元素

                    var cityEleList = doc.getElementsByTagName("city");

                    // 循环遍历每个city元素

                    for(var i = 0; i < cityEleList.length; i++) {

                        var cityEle = cityEleList[i];//得到每个city元素

                        var cityName;

                        // 获取市名称

                        if(window.addEventListener) {//处理浏览器的差异

                            cityName = cityEle.textContent;//支持FireFox等浏览器

                        } else {

                            cityName = cityEle.text;//支持IE

                        }

                        // 使用市名称创建option元素，添加到<select name="city">中

                        var op = document.createElement("option");

                        op.value = cityName;

                        // 创建文本节点

                        var textNode = document.createTextNode(cityName);

                        op.appendChild(textNode);//把文本节点追加到op元素中

                        //把op添加到<select>元素中

                        citySelect.appendChild(op);

                }

            };

        }

    </script>

</head>

<body>

<h1>省市联动AJAX</h1>

<select name="province" id="province">

    <option>请选择省份</option>

</select><br>

<select name="city" id="city">

    <option>请选择市</option>

</select>

</body>

</html>

web.xml

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"

         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"

         version="3.1">

    <servlet>

        <servlet-name>ValidateUsernameServlet</servlet-name>

        <servlet-class>servlet.ValidateUsernameServlet</servlet-class>

    </servlet>

    <servlet>

        <servlet-name>ProvinceServlet</servlet-name>

        <servlet-class>servlet.ProvinceServlet</servlet-class>

    </servlet>

    <servlet>

        <servlet-name>CityServlet</servlet-name>

        <servlet-class>servlet.CityServlet</servlet-class>

    </servlet>

    <servlet-mapping>

        <servlet-name>CityServlet</servlet-name>

        <url-pattern>/CityServlet</url-pattern>

    </servlet-mapping>

    <servlet-mapping>

        <servlet-name>ProvinceServlet</servlet-name>

        <url-pattern>/ProvinceServlet</url-pattern>

    </servlet-mapping>

    <servlet-mapping>

        <servlet-name>ValidateUsernameServlet</servlet-name>

        <url-pattern>/ValidateUsernameServlet</url-pattern>

    </servlet-mapping>

    <welcome-file-list>

        <welcome-file>index.jsp</welcome-file>

    </welcome-file-list>

</web-app>

servlet

　　provinceServlet

package servlet;

import org.dom4j.Attribute;

import org.dom4j.Document;

import org.dom4j.DocumentException;

import org.dom4j.io.SAXReader;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

import java.io.InputStream;

import java.util.List;

/**

 * Created by YuWenHui on 2017/4/23 0023.

 */

public class ProvinceServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("utf-8");

        response.setContentType("text/html;charset=utf-8");

//        得到Document对象

//        创建解析器对象，通过该解析器的读方法，传递一个流对象，从而得到一个Document对象

        SAXReader reader = new SAXReader();

        InputStream inputStream = this.getClass().getResourceAsStream("/china.xml");

        try {

            Document document = reader.read(inputStream);

            List<Attribute> list = document.selectNodes("//province/@name");

            StringBuilder stringBuilder = new StringBuilder();

            for (int i=0;i<list.size();i++){

                stringBuilder.append(list.get(i).getValue());

                if (i<list.size()-1){

                    stringBuilder.append(",");

                }

            }

            response.getWriter().print(stringBuilder);

        } catch (DocumentException e) {

           throw new RuntimeException(e);

        }

    }

}

　　cityServlet

package servlet;

import org.dom4j.Document;

import org.dom4j.DocumentException;

import org.dom4j.Element;

import org.dom4j.io.SAXReader;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

import java.io.InputStream;

/**

 * Created by YuWenHui on 2017/4/23 0023.

 */

public class CityServlet extends HttpServlet {

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("utf-8");

        response.setContentType("text/xml;charset=utf-8");

        SAXReader reader = new SAXReader();

        InputStream inputStream = this.getClass().getResourceAsStream("/chain.xml");

        try {

            Document document = reader.read(inputStream);

            String pname = request.getParameter("pname");

            Element element = (Element) document.selectSingleNode("//province[@name='"+pname+"']");

            String xmlString = element.asXML();

            response.getWriter().print(xmlString);

        } catch (Exception e) {

           throw new RuntimeException(e);

        }

    }

}

AJAX应用案例之省市联动的更多相关文章

ajax经典案例--省市联动
ajax的省市联动案例如果我们的代码比较复杂,可以通过file_put_contents来输出信息到某个日志. 在一个元素中添加另一个元素使用的方法是:appendChild(). 函数append ...
AJAX案例四：省市联动
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
Ajax省市联动
以JQuery为JS,写的Ajax省市联动. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
html + ashx 实现Ajax省市联动
基本思路:1.了解数据库中省和市的表结构及关联主键 2.创建html页面及select标签 3.通过ajax向ashx(一般处理程序)发送后台请求完成联动效果表结构: 这里,开始创建一个命为demo ...
ajax做省市联动
原理: 当select.jsp页面打开时,向服务器发送异步请求,得到所有省份的名称(文本数据).然后使用每个省份名称创建<option>,添加到<select name=”provi ...
练习: 省市联动(Ajax)
// 示例一: china.xml (位于 src 目录下) <?xml version="1.0" encoding="utf-8"?> < ...
Ajax jQuery下拉框联动案例
需求: 使用ajax和jQuery实现下拉框联动. 注意:需要加入jquery-2.1.1.min.js 前台 <!DOCTYPE html> <html> <head& ...
JS 省市联动 ajax
省市联动 //省市联动 $('.locationCode').change(function () { var val = $(this).val(); if ...
Django（二十）下拉列表-省市联动实例：jquery的ajax处理前端
一.知识点 1.jquery的ajax请求写法 <script src="/static/js/jquery-1.12.4.min.js"></script> ...

随机推荐

对volatile关键字的理解
本文是基于对 http://www.cnblogs.com/aigongsi/archive/2012/04/01/2429166.html 这篇文档的理解 volatile 用volatile修饰的 ...
8个超炫酷的jQuery相册插件欣赏
在网页中,相册应用十分常见,如果你经常逛一些社交网站,那么你应该会注意到很多各式各样的网页相册应用.今天我们要来分享一些最新收集的jQuery相册插件,这些精美的jQuery相册插件可以帮助你快速搭建 ...
1578: [Usaco2009 Feb]Stock Market 股票市场
1578: [Usaco2009 Feb]Stock Market 股票市场 Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 414 Solved: 1 ...
Hibernate打印SQL及附加参数
今天在项目运行过程中,一直报一个org.hibernate.exception.GenericJDBCException: could not insert 异常,Root Cause是IBM DB ...
简单的add函数的N种写法
最近在学习es6,看到for-of这里,就想自己写着练习一下,于是就准备写一个小函数add来求和.函数很简单,如add(1,2,3)这样.于是我开始着手一开始我是这么写的 function add( ...
Linux下httpd服务与Apache服务的查看和启动
转:http://jingyan.baidu.com/article/63f236282d43170209ab3d43.html 这里简要介绍Linux环境中Apache也就是httpd服务的启动,查 ...
完全关闭IIS日志，包括System32下的LogFile
早上突然发现网站访问不了了,登陆服务器一看,是C盘满了. 查一看,是IIS产生了70多G的日志,但明明已关闭日志了,还是会产生. 产生的目录在:C:\Windows\System32\LogFiles ...
Android Weekly Notes Issue #249
Android Weekly Issue #249 March 19th, 2017 Android Weekly Issue #249 本期内容包括: 一个设计的实现Demo讨论; Kotlin的C ...
TIME_WAIT 另一种解决方式 SO_LINGER
被TIME_WAIT问题烦得不行,又发现了另一种解决方式,SO_LINGER. 对SO_LINGER解释最通用的自然是<UNP>,现摘录如下 SO_LINGE ...
node.js下mongoose简单操作实例
Mongoose API : http://mongoosejs.com/docs/api.html // mongoose 链接var mongoose = require('mongoose'); ...

AJAX应用案例之省市联动

AJAX应用案例之省市联动的更多相关文章

随机推荐

热门专题