练习: 省市联动(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> ...
随机推荐
- web报表工具FineReport常见的数据集报错错误代码和解释
在使用finereport制作报表.若预览错误发生.非常多朋友便手忙脚乱不知所措了,事实上没什么,仅仅要看懂报错代码和含义.能够非常快的排除错误,这里我就分享一下finereport的数据集报错错误代 ...
- python challenge - map.py
Hint: K->M O->Q E->G everybody thinks twice before solving this. g fmnc wms bgblr rpy ...
- 数组传到后台 string[] 获取
调试的 时候js 断点到后台 js上面也可以查看 传到后台的数据 方便查看~~
- C# NPOI操作Excel（下）
根据自己项目需求编写,仅供参考 个人建议:使用Excel模板进行导出操作.尽量避免自己生成Excel(既繁琐又容易出BUG).大多情况下导出Excel都是固定格式,使用模板导出会方便很多. publi ...
- JanusGraph与Cassandra集成模式
//如果使用的是cassandra 2.2或更高版本,需要开启thift,以使janus连接到cassandra. ./bin/nodetool enablethrift. 15.1 Local Se ...
- CSS实现子级窗口高度随低级窗口高度变化及js控制左右容器高度一致
纯粹使用使用height:100%;或者height:auto;来定义内部容器自适应高度,都无法实现让内部容器高度随着外部父容器高度变化而变化,所以我们必需要使用position绝对定位属性来配合协助 ...
- iOS_16_控制器切换_modal_storyboard拖线的方式
终于效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcHJlX2VtaW5lbnQ=/font/5a6L5L2T/fontsize/400/fill ...
- quantz入门和使用流程（转载）
1.下载地址:http://quartz-scheduler.org/downloads/catalog http://quartz-scheduler.org/downloads/destinati ...
- 阿里云Ubuntu环境搭建Docker服务
经过昨天和今天的不断奋战,在阿里云里面搭建Docker并不easy. 所以我认为有必要记录下来,以供后人学习. 以及我自己的回想. 首先,查看我们的系统版本号: cat /etc/issue 的到的输 ...
- Unity3D学习笔记——初级知识
一:Unity欢迎窗口对于初学者来说有很多有价值的信息,值得用户关注,以下将简要介绍这个窗口中的相关内容: 1.Video Tutorials: 提供unity相关的教程 ,包括用户手册 .组件手册以 ...