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> ...

随机推荐

.Net程序员学用Oracle系列(20)：层次查询(CONNECT BY)
1.层次查询语句 1.1.CONNECT BY 语法 1.2.CONNECT BY 示例 2.层次查询函数 2.1.SYS_CONNECT_BY_PATH 2.2.WMSYS.WM_CONCAT 2. ...
CDIF: 基于JSON的SOA软件框架
通用设备互联框架(CDIF)是一个具备中美知识产权保护的,基于web的连接框架,目前有部分开源实现存放在: GitHub - out4b/cdif: Common device interconnec ...
KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架之koahub-loader
koahub loader Installation $ npm install koahub-loader Use with koa // 1.model loader var model = ...
Jmeter函数引用和函数重定向
在jmeter中的[选项]中选择[函数助手对话框]---这些函数可以高速有效的帮助我们开展自动化编写与校验!!!!!! 如图: 重点!!!本章的侧重点不讲函数的具体使用,函数具体的使用与java类似, ...
vue搭建开发环境
windows下搭建vue开发环境一.安装node.js 安装 vue项目通常通过webpack工具来构建,而webpack命令的执行是依赖node.js环境,所以首先要安装node.js. n ...
集合框架(HashSet存储自定义对象保证元素唯一性)
HashSet如何保证元素唯一性的原理 1.HashSet原理 a. 我们使用Set集合都是需要去掉重复元素的, 如果在存储的时候逐个equals()比较, 效率较低,哈希算法提高了去重复的效率, 降 ...
提交任务到Spark
1.场景在搭建好Hadoop+Spark环境后,现准备在此环境上提交简单的任务到Spark进行计算并输出结果.搭建过程:http://www.cnblogs.com/zengxiaoliang/p/ ...
python生成二维码
1.python-qrcode是个用来生成二维码图片的第三方模块,依赖于 PIL 模块和 qrcode 库. 首先,我们要安装三个模块,qrcode,image,PIL. pip install q ...
2017-3-28 JavaScript 基础、语法
前端三剑客: html+css+js(html 决定网页上有什么,css决定东西是怎么摆放的,js决定东西的功能) js定义: js是一个脚本语言,需要有宿主文件,它的宿主文件是html文件. js ...
20155304 2016-2017-2 《Java程序设计》第六周学习总结
20155304 2016-2017-2 <Java程序设计>第六周学习总结教材学习内容总结第十章串流设计的概念无论来源和目的地实体形式是什么,只要取得InputStream和Ou ...

AJAX应用案例之省市联动

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

随机推荐

热门专题