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

随机推荐

node.js异步控制流程回调，事件，promise和async/await
写这个问题是因为最近看到一些初学者用回调用的不亦乐乎,最后代码左调来又调去很不直观. 首先上结论:推荐使用async/await或者co/yield,其次是promise,再次是事件,回调不要使用. ...
1774: [Usaco2009 Dec]Toll 过路费
1774: [Usaco2009 Dec]Toll 过路费 Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 263 Solved: 154[Submit ...
Linux centos7环境下安装Nginx
Linux centos7环境下安装Nginx的步骤详解 1. 首先到Nginx官网下载Nginx安装包 http://nginx.org/download/nginx-1.5.9.tar.gz ...
读headFirst设计模式 - 装饰者模式
继承可以在复用父类代码的情况下扩展父类的功能,但同时继承增加了对象之间的耦合度,所以要慎用继承.那么有没有既能扩展父类的功能,又能使对象间解耦的方法呢?答案是肯定的,这就是我们今天要学习的装饰者模式. ...
Octave Tutorial（《Machine Learning》）之第三课《数据计算》
第三课 Culculating Data 数据计算矩阵计算 1.简单的四则运算 2.相乘除,乘方运算(元素位运算) ".*"为对应元素的相乘计算 "./"为对 ...
mac下安装nginx问题解决
需要在mac上安装nginx,按照下面的博客链接一步步安装,但是碰到了些问题.下面写一下我的解决方式. (http://stevendu.iteye.com/blog/1535466) 1. 安装PC ...
[原创]HBase学习笔记（1）-安装和部署
HBase安装和部署使用的HBase版本是1.2.4 1.安装步骤(默认hdfs已安装好) # 下载并解压安装包 cd tools/ tar -zxf hbase-1.2.4-bin.tar.gz ...
解决 Linux error while loading shared libraries: cannot open shared object file: No such file or directory
安装最新版本Emqtt,参照官方文档安装后,执行报错: Linux error while loading shared libraries libsctp.so.1: cannot open sha ...
Vue.js 2.2 卡片api
给vue开发者和爱好者发送点福利! 卡片上一共117个api,方便查阅网址: https://vuejs-tips.github.io/cheatsheet Github: https://gith ...
消息映射(C++)(转)
摘要:控件通知消息有很多种,但是有一种是很常用,但是又不是很容易掌握的,那就是WM_NOTIFY,我试着对此做一下比较全面的论述,有不对的地方,还希望各路大虾批评指正. 控件通知消息 ...

AJAX应用案例之省市联动

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

随机推荐

热门专题