练习: 省市联动(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> ...
随机推荐
- （转）jquery实现图片轮播
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js ctrl+v实现图片粘贴
<script> // demo 程序将粘贴事件绑定到 document 上 document.addEventListener("paste", function ( ...
- mvc5整合Autofac
本文中将使用 mvc5与webapi2进行对Autofac整合 准备工作: 1.vs2013 or vs2013+ 2.网络良好,nuget正常访问 好了需要的准备工作就这么多. ---------- ...
- tony_nginx_01_如何在linux系统下安装nginx、pcre、zlib、openssl工具
nginx可以使用各平台的默认包来安装,本文是介绍使用源码编译安装,包括具体的编译参数信息. 正式开始前,编译环境gcc g++ 开发库之类的需要提前装好,这里默认你已经装好. ububtu平台编译环 ...
- Notes from Data Guard
There are two types of Standby databases: 1, Physical standby database block-for-block basis the phy ...
- 获取Oracle隐含參数信息
Oracle数据库的初始化參数.主要来源于两个Oracle内部数据字典表:X$KSPPCV和X$KSPPI通常我们查询的V$Parameter视图或使用show parameter命令都是就来源于这两 ...
- testng入门_单元测试
1.定义TestNG 的配置文件 <test name="exampletest1"> <classes> <!--1.只执行com.t ...
- 李洪强iOS开发之OC[003] - 用钥匙串存储信息模拟登陆
- mock调用返回值是void类型
//调用void方法 doNothing().when(templateWrapper).process();// doCallRealMethod().when(templateWrapper).p ...
- sqlite3 PC安装及使用
sqlite3使用 1. 安装sqlite3 sudo apt-get install sqlite3 sudo apt-get install libsqlite3-dev 2. sqlite常用命 ...