练习: 省市联动(Ajax)
// 示例一:
china.xml (位于 src 目录下)
<?xml version="1.0" encoding="utf-8"?>
<china>
<province name="北京">
<city>东城区</city>
<city>西城区</city>
<city>宣武区</city>
<city>大兴区</city>
</province>
<province name="天津">
<city>河东区</city>
<city>河西区</city>
<city>南开区</city>
<city>大港区</city>
</province>
</china>
// Servlet
// ProvinceServlet
public class ProvinceSerlvet extends HttpServlet{
public void doGet(HttpServletRequest request,HttpServletResponse response)
throws ServletException, IOException{
// 处理编码问题
response.setContentType("text/html;charset=utf-8");
try{
// 解析 xml 文档
XMLReader reader = new XMLReader();
// 获取 xml 文档的输入流
InputStream input = this.getClass().getResourceAsStream("/china.xml");
Document doc = reader.read(input);
// 使用 XPath ,获取文档中 province 元素
List<Attribute> attrList = doc.selectNodes("//province/@name");
// 遍历集合,获取 province 元素中 name 属性的值
// 并保存到 StringBuilder 中
StringBuilder sb = new StringBuilder();
for(int i=0; i<attrList.size(); i++){
sb.append(attrList.get(i).getValue());
if(i < arrList.size() - 1){
sb.append(",");
}
}
// 响应
response.getWriter().print(sb);
}catch(Exception e){
throw new RuntimeException(e);
}
}
}
// CityServlet
public class CityServlet extends HttpServlet{
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException{
request.setCharacterEncoding("utf-8");
response.setContentType("text/xml;charset=utf-8");
try{
// 解析 xml
SAXReader reader = new SAXReader();
InputStream input = this.getClass().getResourceAsStream("/china.xml");
Document doc = reader.read(input);
// 获取请求参数
String pname = request.getParameter("pname");
// XPath 查询
Element ele = doc.selectSingleNode("//province/[@name='"+pname+"']");
// 把元素转换成字符串, org.dom4j.Node
String xmlStr = ele.asXML();
// 响应给客户端
response.getWriter().print(xmlStr);
} catch(Exception e){
throw new RuntimeException(e);
}
}
}
// index.jsp
<head>
<script type="text/javascript">
// 创建 XMLHttpRequest 对象, 处理浏览器差异
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(){
// ajax 四步,请求 ProvinceServlet, 得到所有省份的名称
// 使用每个省份的名称创建一个 <option> 元素, 添加到 <select name="province"> 中
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++){
// 创建 option 元素, 示例<option value="北京">北京</option>
var op = document.creatElement("option");
op.value = arr[i];
var textNode = document.createTextNode(arr[i]);
op.appendChild(textNode);
document.getElementById("p").appendChild(op);
}
}
};
// 给 <select name="province"> 添加改变监听器
// 使用选择的省份名称请求 CityServlet, 得到 <province> 元素(xml元素)!!!
// 获取 <province> 元素中所有的 city 元素, 遍历之! 获取每个 <city> 的文本内容, 即市名称
// 使用每个市名称创建 <option> 元素添加到 <select name="city">
var ele = document.getElementById("p");
ele.onchange = function(){
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("POST","<c:url value='/CityServlet'/>",true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send("pname="+this.value);
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
// 清空 <option name="city"> 原有的内容
var citySelect = document.getElementById("c");
var optionEleList = citySelect.getElementsByTagName("option");
while(optionEleList.length > 1){
citySelect.removeChild(optionEleList[i]);
}
var doc = xmlHttp.responseXML;
// 获取所有的 city 元素
var cityEleList = doc.getElementsByTagName("city");
for(var i=0; i<cityEleList.length; i++){
var cityEle = cityEleList[i];
var cityName;
// 处理浏览器差异
if(window.addEventListener){
cityName = cityEle.textContent;
} else {
cityName = cityEle.text;
}
// 添加到 <select name="city"> 元素中
var op = document.createElement("op");
op.value = cityName;
var textNode = document.createTextNode(cityName);
op.appendChild(textNode);
citySelect.appendChild(op);
}
}
};
};
};
</script>
</head>
<body>
<h1>省市联动</h1>
<select name="province" id="p">
<option>===请选择省===</option>
</select>
<select name="city" id="c">
<option>===请选择市===</option>
</select>
</body>
// 升级版, JQuery 和 Ajax
<head>
<script type="text/javascript" src="<c:url value='/jquery/jquery-3.2.1.min.js'/>"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url:"<c:url value='/ProvinceServlet'/>",
success:function(data){
var arr = data.split(",");
$.each(arr,function(index,value){
$("#pv").append($("<option value='"+value+"'>"+value+"</option>"));
});
}
});
// 在 <select name="province"> 上注册事件
$("#pv").change(function(){
$("#c").empty();
$.ajax({
url:"<c:url value='/CityServlet'/>",
data:{pname:$("#pv").val()},
type:"POST",
success:function(data){
$.each($(data).find("city"), function(key,value){
$("#c").append(
$("<option value='"+value.textContent+"'>"+value.textContent+"</option>"
));
});
}
});
});
});
</script>
</head>
<body>
<h1>省市联动</h1>
<select name="province" id="pv">
<option>===请选择省===</option>
</select>
<select name="city" id="c">
<option>===请选择市===</option>
</select>
</body>
参考资料:
练习: 省市联动(Ajax)的更多相关文章
- JS 省市联动 ajax
省市联动 //省市联动 $('.locationCode').change(function () { var val = $(this).val(); if ...
- AJAX应用案例之省市联动
jsp 主要是要注意多Document的操作 <%-- Created by IntelliJ IDEA. User: YuWenHui Date: 2017/4/23 0023 Time: 1 ...
- php省市联动实现
设计模式:ajax实现,数据库格式:id,name,parent_id 数据库: CREATE TABLE IF NOT EXISTS `city` ( `id` ) NOT NULL AUTO_IN ...
- 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经典案例--省市联动
ajax的省市联动案例 如果我们的代码比较复杂,可以通过file_put_contents来输出信息到某个日志. 在一个元素中添加另一个元素使用的方法是:appendChild(). 函数append ...
- Django（二十）下拉列表-省市联动实例：jquery的ajax处理前端
一.知识点 1.jquery的ajax请求写法 <script src="/static/js/jquery-1.12.4.min.js"></script> ...
随机推荐
- Ant 风格路径表达式（转）
ANT通配符有三种: 通配符 说明 ? 匹配任何单字符 * 匹配0或者任意数量的字符 ** 匹配0或者更多的目录 例子: URL路径 说明 /app/*.x 匹配(Matches)所有在app路径下的 ...
- Nginx Errors: upstream response cache error
Nginx Errors upstream response cache error *2470578 an upstream response is buffered to a temporary ...
- mac apt-get--> Homebrew
在最近采集linux进程网络指标的时候,为了对比采集结果,需要linux系统查看进程网络流量命令,最后查到nethogs 这个工具好用,但是在下载安装过程中碰到问题: 1:http://blog.cs ...
- Linux入门常用指令
linux获取硬盘和目录大小的命令 df命令 Linux下可以用df命令获取硬盘的使用情况,通过man可以获取df命令的详细情况.df命令经常用的参数为: a:显示全部的档案系统和各分割区的磁盘使用情 ...
- opencv中各种矩阵乘的差别
尊重原创,转载请注明:http://blog.csdn.net/tangwei2014 OpenCV中每次遇到矩阵乘法就乱,各种翻各种查. 这次总结了一下.为了简单明了,还是让样例说话. 1. Mat ...
- FPGA组成、工作原理和开发流程
FPGA组成.工作原理和开发流程 原创 2012年01月07日 09:11:52 9402 0 4 ********************************LoongEmbedded***** ...
- random实现验证码功能
直接上代码: #-*- coding: utf-8 -*- #一个简单的验证码程序 import random #定义一个全局变量,初始值为空字符串 checkcode = '' for i in r ...
- 从零开始学习SSH框架笔记之四 几个关键配置文件备忘(模板)
不多说,直接上代码.关于注释我尽量写详细点. 1.web.xml <?xml version="1.0" encoding="UTF-8"?> &l ...
- MFC使用自带的MSXML6.dll解析xml(开发环境vc2010)
程序是win32控制台程序 // msxml.cpp : 定义控制台应用程序的入口点. #include "stdafx.h" #include <iostream> ...
- stick footers布局
需求: 将footer固定到底部.文章内容不足满屏时 footer在底部,超过满屏时footer在内容末尾. 方法一: <div id="wrap"> <div ...