练习: 省市联动(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> ...
随机推荐
- 【MyBatis学习11】MyBatis中的延迟加载
1. 什么是延迟加载 举个例子:如果查询订单并且关联查询用户信息.如果先查询订单信息即可满足要求,当我们需要查询用户信息时再查询用户信息.把对用户信息的按需去查询就是延迟加载. 所以延迟加载即先从单表 ...
- asp.net+mvc+easyui+sqlite 简单用户系统学习之旅（七）—— 添加用户到数据库-obj转json
这一节讲一下如何添加用户名和密码到已建的sqlite.db数据库中. 当在datagrid的toolbar中输入用户名.密码,然后点击添加按钮时,将该用户加入数据库,并显示出来.datagrid表格里 ...
- HTTP协议--cookie、session、缓存与代理
1 Cookie和 Session Cookie和 Session都为了用来保存状态信息,都是保存客户端状态的机制,它们都是为了解决 HTTP无状态的问题而所做的努力. Session可以用 Cook ...
- 初识Quartz（三）
本文将介绍CronTrigger的使用方法,CronTrigger相比 SimpleTrigger可以支持更复杂的作业计划.cron这一观念来自UNIX,在UNIX中,cron是一个运行于后台的守护程 ...
- 82. Remove Duplicates from Sorted List II【Medium】
82. Remove Duplicates from Sorted List II[Medium] Given a sorted linked list, delete all nodes that ...
- java - day08 - ArrayFounderTrans
package day07_addition; import java.util.Arrays; import java.util.Random; //数组 伸缩.增删.位移.复制 public cl ...
- js弹窗效果实现
1.首先准备好要弹出的内容,一般用ajax向后台请求数据,组装成html: 主页:a.html,含有div: <div class="cms-window cms-window-oth ...
- iOS开发--用户点击频繁，多个异步网络请求取消问题？
一.业务环境描述 当一个view同时添加两个tableView为subView的时候,两个tableView分别为mainTable和subTable. 当用户点击mainTable上的某一条数据时, ...
- 带你了解UIKit动力学
一.简单介绍 1.什么是UIDynamic UIDynamic是从iOS 7开始引入的一种新技术,隶属于UIKit框架可以认为是一种物理引擎,能模拟和仿真现实生活中的物理现象如:重力.弹性碰撞等现象 ...
- python3----split and join
s = "I am fine" s = s.split(" ") print(s) print("%".join(s)) results: ...