AJAX二级下拉联动【XML方式】
AJAX二级下拉联动案例
我们在购物的时候，常常需要我们来选择自己的收货地址，先选择省份，再选择城市…
有没有发现：当我们选择完省份的时候，出现的城市全部都是根据省份来给我们选择的。这是怎么做到的呢？？？其实就是通过AJAX来完成的。使用AJAX技术让我们看起来网页非常“智能”，会根据省份来给出对应的城市信息。
我们这里就不读取数据库了，直接在Servlet写死数据来进行模拟测试。
分析
我们知道AJAX与服务器之间的交互常用的传输载体格式有三种：
- HTML
- XML
- JSON
由于省份与城市是有层级关系的，因此我们只能用XML或者JSON。
我们这里首先就用XML来进行，后面会使用JSON，来看看他俩有什么不同的地方。。
前台分析
当用户选择了某个省份之后，就使用AJAX与服务器进行交互，那么在选择城市的时候就出现对应的城市信息。
- 监听下拉框值变化事件
- 只要下拉框值变化了，就与服务器进行交互
- 得到服务器返回的值，解析XML
- 使用DOM把数据写到城市下拉框列表中
后台分析
- 得到前台带过来的数据
- 判断该数据是什么，返回对应的的XML文件
写JSP页面
<%--
Created by IntelliJ IDEA.
User: ozc
Date: 2017/5/17
Time: 19:38
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>多级联动</title>
<script type="text/javascript" src="js/ajax.js"></script>
</head>
<body>
<%--############前台页面###################--%>
<select name="province" id="provinceId">
<option value="-1">请选择省份</option>
<option>广东</option>
<option>湖南</option>
</select>
<select name="city" id="cityId">
<option>请选择城市</option>
</select>
<%--############AJAX###################--%>
<script type="text/javascript">
document.getElementById("provinceId").onchange = function () {
/**********定位到下拉框，获取下拉框的值***************/
// 获取选中的下拉框索引值
var index = this.selectedIndex;
// 得到下拉框的值
var province = this.options[index].innerHTML;
//下拉框的值要是“请选择”，那么我们是不会访问服务器的
if ("请选择省份" != province) {
/********由于每次都会自动添加，因此每次在调用的时候清除***********/
var citySelect = document.getElementById("cityId");
//每次都将option变成长度只有1的
citySelect.options.length = 1;
/*************ajax代码*********************/
//创建AJAX对象
var ajax = createAJAX();
//准备发送请求
var method = "post";
var url = "${pageContext.request.contextPath}/ProvinceServlet?time=" + new Date().getTime();
ajax.open(method, url);
//由于是POST方式，因此要设置头
ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");
ajax.send("province=" + province);
/************ajax回调函数*********************/
ajax.onreadystatechange = function () {
if (ajax.readyState == 4) {
if (ajax.status == 200) {
//得到服务器端带过来的XML
var XMLDocument = ajax.responseXML;
/**********解析XML文档，使用DOM写到下拉框中****************/
var cities = XMLDocument.getElementsByTagName("city");
//得到每一个cities节点的值，动态生成下拉框，添加到下拉框中
for (var i = 0; i < cities.length; i++) {
var value = cities[i].firstChild.nodeValue;
//动态生成下拉框
var optionElement = document.createElement("option");
optionElement.innerHTML = value;
//添加到下拉框中
citySelect.appendChild(optionElement);
}
}
}
};
}
};
</script>
</body>
</html>
Servlet
import java.io.IOException;
import java.io.PrintWriter;
/**
* Created by ozc on 2017/5/17.
*/
@javax.servlet.annotation.WebServlet(name = "ProvinceServlet",urlPatterns = "/ProvinceServlet")
public class ProvinceServlet extends javax.servlet.http.HttpServlet {
protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
//设置中文编码
request.setCharacterEncoding("UTF-8");
String province = request.getParameter("province");
//这里是返回的是XML，因此指定XML数据！
response.setContentType("text/xml;charset=UTF-8");
PrintWriter printWriter = response.getWriter();
/****************返回XML文件给前台**************/
printWriter.write("<?xml version='1.0' encoding='UTF-8'?>");
printWriter.write("<root>");
if("广东".equals(province)){
printWriter.write("<city>广州</city>");
printWriter.write("<city>深圳</city>");
printWriter.write("<city>中山</city>");
}else if("湖南".equals(province)){
printWriter.write("<city>长沙</city>");
printWriter.write("<city>株洲</city>");
printWriter.write("<city>湘潭</city>");
printWriter.write("<city>岳阳</city>");
}
printWriter.write("</root>");
System.out.println("1111");
/*******事后操作*******/
printWriter.flush();
printWriter.close();
}
protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
this.doPost(request, response);
}
}
效果：
XML方式总结
- 监听下拉框的变化，如果变化了，那么就使用异步操作去访问服务器，得到对应的数据返回给异步对象
- 异步对象解析服务器带过来的数据，使用DOM编程把数据动态添加到页面上
- 在Servlet上记得要指定返回的是XML的数据！
- 在前台解析XML文档的时候，不能直接使用innerHtml来得到节点的值，只能通过firstChild.nodeValue的方式获取。
- 由于每次append到下拉框都会连续append，因此在响应事件的时候，把下拉框清零
- 把下拉框options的长度赋值为1，那么就是清零的操作了。
AJAX二级下拉联动【XML方式】的更多相关文章
- Ajax案例-基于XML，以POST方式，完成省份-城市二级下拉联动
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC & ...
- AJAX多级下拉联动【JSON】
前言 前面我们已经使用过了XML作为数据载体在AJAX中与服务器进行交互.当时候我们的案例是二级联动,使用Servlet进行控制 这次我们使用JSON作为数据载体在AJAX与服务器交互,使用三级联动, ...
- 菜鸟学Java（七）——Ajax+Servlet实现无刷新下拉联动
下拉联动的功能可以说非常的常用,例如在选择省.市等信息的时候:或者在选择大类.小类的时候.总之,下拉联动很常用.今天就跟大家分享一个简单的二级下拉联动的功能. 大类下拉框:页面加载的时候就初始化大类的 ...
- ajax技术实现登录判断用户名是否重复以及利用xml实现二级下拉框联动，还有从数据库中获得
今天学了ajax技术,特地在此写下来作为复习. 一.什么是ajax? 客户端(特指PC浏览器)与服务器,可以在[不必刷新整个浏览器]的情况下,与服务器进行异步通讯的技术 即,AJAX是一个[局部刷新 ...
- Ajax jQuery下拉框联动案例
需求: 使用ajax和jQuery实现下拉框联动. 注意:需要加入jquery-2.1.1.min.js 前台 <!DOCTYPE html> <html> <head& ...
- Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换
前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...
- 用NPOI导出Excel，生成下拉列表、以及下拉联动列表（第1篇/共3篇）
最近帅帅的小毛驴遇到一个很奇葩的需求: 导出Excel报表,而且还要带下拉框,更奇葩的是,下拉框还是联动的. 小毛驴一天比较忙,所以这等小事自然由我来为她分忧了.经历了两天,做了几种解决方案,最后完美 ...
- DBLookupCombobox实现下拉联动
这次用DBLookupCombobox实现省份-城市-地区的下拉联动,用以学习DBLookupCombobox的一些用法 效果图: 首先建立数据表(数据表形式可以多种多样:数据库表.文本.xml等,最 ...
- Web前端开发实战1：二级下拉式菜单之CSS实现
二级下拉式菜单在各大学校站点.电商类站点.新闻类站点等大型?站点非经常见,那么它的实现原理是什么呢? 学习了Web前端开发的知识后,我们是能够实现这种功能的.复杂的都是从基础效果上加入做出来的.原理和 ...
随机推荐
- 谈谈Golang中goroutine的调度问题
goroutine的调度问题,同样也是我之前面试的问题,不过这个问题我当时并不是很清楚,回来以后立马查阅资料,现整理出来备忘. 有一些预备知识需要说明,就是操作系统中的线程.操作系统中的线程分为两种: ...
- Git初学二(SSH免密)
在管理Git项目上,初学者使用HTTPS直接克隆项目到本地是最方便的.但是之后的fetch和push代码需要输入账号和密码也是比较烦的. 这章在上一章的基础上,将HTTPS切换成SSH.SSH的优点就 ...
- vue-cli脚手架npm相关文件解读（9）config/index.js
系列文章传送门: 1.build/webpack.base.conf.js 2.build/webpack.prod.conf.js 3.build/webpack.dev.conf.js 4.bui ...
- Thinkphp报错 -- “_STORAGE_WRITE_ERROR_”
磁盘满了 没有写入权限 解决方法: chmod -R 777 Runtime目录路径
- JavaScript 30 - 2 学习笔记
学习JavaScirpt30的笔记! 有意思! 2-------> CSS clock 效果是这样的.... 这是改良过后的 版本.... 话不多说,直接来看代码. 首先是html部分 &l ...
- [2014-11-02]为EF6+Mysql+CodeFirst启用Migration
刚为一个EF6 CodeFirst项目启用了Migration,记几个注意点. 启用方法 在Nuget控制台使用以下命令启用Migration Enable-Migrations #此时生成当前数据库 ...
- JDK+Apache+Tomcat+MySQL配置 一起来学习吧
配置JDK1.8+Apache2.4+Tomcat8.0+mySQL5.1,网上的资料非常繁杂,花费几天时间配置成功,汇总记录. 操作系统:CentOS6.5 预先下载最新版软件: apache-to ...
- 编译安装httpd 2.4
author:JevonWei 版权声明:原创作品 官方网站下载httpd2.4.apr及apr-util的相关软件包,并传输到centos 7系统中的/usr/local/src(apr1.6版本过 ...
- Serializable序列化的作用
这里转载一篇讲解java序列化(Serializable)和反序列化方面的感觉很好的文章.1.序列化是干什么的?简单说就是为了保存在内存中的各种对象的状态(也就是实例变量,不是方法),并且可以把保存的 ...
- [转]Java se 7 最新特性研究（一)
详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp81 从2006到现在等待了多年的jdk7终于发布了.这里将对它的一些 ...