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

随机推荐

转换器4：手写PHP转Python编译器，语法解析部分
写完词法部分,又有很多杂事,周末终于有空来实现伟大的语法解析部分了. 撸完代码之后发现,程序太短了,不算上状态机,才186行(含注释),关键代码不到100行.运行调试过后,发现还行.居然可以解析One ...
1002: [FJOI2007]轮状病毒
1002: [FJOI2007]轮状病毒 Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 2609 Solved: 1450[Submit][Statu ...
javascript-基本数据类型和转换
ECMAScript中有5种基本数据类型:Undefined.Null.Boolean.Number.String.还有1种复杂数据类型-Object,Object实质上是由一组无序的名值对(键值对) ...
Android ORMLite 框架的入门用法
大家在Android项目中或多或少的都会使用数据库,为了提高我们的开发效率,当然少不了数据库ORM框架了,尤其是某些数据库操作特别频繁的app:本篇博客将详细介绍ORMLite的简易用法. 下面开始介 ...
Java 中的锁——Lock接口
Java SE5之后,并发包中新增了Lock接口(以及相关实现类)用来实现锁功能.虽然它少了(通过synchronized块或者方法所提供的)隐式获取释放锁的便捷性,但是却拥有了锁获取与释放的操作性. ...
sql 两种分页offset和row_number简单分析
新建临时表字段id,向临时表里插入1,2,3,4,5,6 if object_id('tempdb..#test') is not null drop table #test create table ...
dxxzc团队及队员学号后三位
队名:dxxzc团队组长:邢正080 组员:董冰068 许国庆079 张琦057 曹华058
初识 Javascript.02 -- Date日期、Math对象、数据类型转换、字符串、布尔Boolean、逻辑运算符、if else 、三元表达式、代码调试方法、
Date()对象: Date对象用于处理日期和时间. 1.1 Math对象 ◆Math.ceil() 天花板函数向上取整只取整数,不足则进1 ◆Math.floor() 地板函数 ...
学习CSS了解单位em和px的区别
这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...
Linux之sort命令
sort - sort lines of text files 提示:如果第一个字段都相同的话,就根据第二个字段进行排序参数: -f 忽略大小写 -b 忽略最前面的空格部分 -M 以月份的名字 ...

AJAX应用案例之省市联动

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

随机推荐

热门专题