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

随机推荐

网络安全实验室注入关通关writeup
URL:http://hackinglab.cn 注入关 [1] 最简单的SQL注入username = admin' or ''='password随便什么都可以直接可以登录 [2] 熟悉注入环境 ...
Redis-port安装使用实现redis迁移codis，以及简单redis pipe实现将mysql迁移redis
(0)Redis-port原理: 首先是看到下面这篇文档开始研究的redis-port http://www.itnpc.com/news/web/146085373656602.html 简要截图 ...
对象作为 map 的 key 时，需要重写 equals 方法和 hashCode 方法
对象作为 map 的 key 时,需要重写 hashCode 和 equals方法如果没有重写 hashCode 方法,那么下面的代码示例会输出 null 我们首先定义一个对象:BmapPoint, ...
java自加和自减
public class Add { public static void main(String[] args) { int i = 0; i=i++ + ++i; int j = 0; j= ++ ...
GreenDao 工具类 --- 使用 Json 快速生成 Bean、表及其结构，"炒鸡"快！
作者:林冠宏 / 指尖下的幽灵掘金:https://juejin.im/user/587f0dfe128fe100570ce2d8 博客:http://www.cnblogs.com/linguan ...
标准之路网站上一篇文章《十天学会web标准(div+css)》的营养精华
以下精华出自如下链接,“http://www.aa25.cn/special/10day/index.shtml”,<十天学会web标准(DIV+CSS)>. 这个内容不要删掉:“< ...
jQuery 事件——关于select选中
场景: eg:在管理一篇博文时,因博文的管理有一列叫:状态的列,该列有诸多状态,如:正常,待审核,删除等... 此时,若使用Select下拉列表进行状态选择,并在选中具体项值后,通过Ajax异步提交, ...
开源 & 在线免费使用：升讯威周报系统
这个周报系统大约写于2015年,缘起当时所带的开发团队需要逐步建立或完善一些项目管理方法. 在调研了网上的诸多项目管理或周报/日报管理系统之后,并没有找到符合当时情况的系统,这里最大的问题不是网上既有 ...
linux最小安装
(1)系统安装类型选择及自定义额外包组进入如图2-28所示界面.上半部分是系统定制的不同的系统安装类型选择项,默认是“Desktop”,这里我们选择“Minimal”,即最小化安装,下半部分是在上面 ...
lucene原理及源码解析--核心类
马云说:大家还没搞清PC时代的时候,移动互联网来了,还没搞清移动互联网的时候,大数据时代来了. 然而,我看到的是:在PC时代搞PC的,移动互联网时代搞移动互联网的,大数据时代搞大数据的,都是同一伙儿人 ...

AJAX应用案例之省市联动

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

随机推荐

热门专题