AJAX应用案例之省市联动
jsp
主要是要注意多Document的操作
<%--
Created by IntelliJ IDEA.
User: YuWenHui
Date: 2017/4/23 0023
Time: 19:00
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>省市联动</title>
<script>
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 () {
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++){
// 创建一个指定名称的元素
var op =document.createElement("option");
// 设置实际值
op.value=arr[i];
// 创建文本节点
var textNode = document.createTextNode(arr[i]);
// 把文本子节点添加到op元素总
op.appendChild(textNode);
document.getElementById("province").appendChild(op);
}
}
}; };
var provinceSelect = document.getElementById("province");
provinceSelect.onchange=function () {
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("POST","<c:url value='/CityServletServlet'/>",true);
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttp.send("pname="+provinceSelect.value);
xmlHttp.onreadystatechange=function () {
if(xmlHttp.readyState==4 && xmlHttp.status==200){
// 把select中的所有option移除（除了请选择）
var citySelect = document.getElementById("city");
// 获取其所有子元素
var optionEleList = citySelect.getElementsByTagName("option");
// 循环遍历每个option元素，然后在citySelect中移除
while(optionEleList.length > 1) {//子元素的个数如果大于1就循环，等于1就不循环了！
citySelect.removeChild(optionEleList[1]);//总是删除1下标，因为1删除了，2就变成1了！
}
var doc = xmlHttp.responseXML;
// 得到所有名为city的元素
var cityEleList = doc.getElementsByTagName("city");
// 循环遍历每个city元素
for(var i = 0; i < cityEleList.length; i++) {
var cityEle = cityEleList[i];//得到每个city元素
var cityName;
// 获取市名称
if(window.addEventListener) {//处理浏览器的差异
cityName = cityEle.textContent;//支持FireFox等浏览器
} else {
cityName = cityEle.text;//支持IE
} // 使用市名称创建option元素，添加到<select name="city">中
var op = document.createElement("option");
op.value = cityName;
// 创建文本节点
var textNode = document.createTextNode(cityName);
op.appendChild(textNode);//把文本节点追加到op元素中 //把op添加到<select>元素中
citySelect.appendChild(op); }
};
}
</script>
</head>
<body>
<h1>省市联动AJAX</h1>
<select name="province" id="province">
<option>请选择省份</option>
</select><br>
<select name="city" id="city">
<option>请选择市</option>
</select>
</body>
</html>
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1">
<servlet>
<servlet-name>ValidateUsernameServlet</servlet-name>
<servlet-class>servlet.ValidateUsernameServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>ProvinceServlet</servlet-name>
<servlet-class>servlet.ProvinceServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>CityServlet</servlet-name>
<servlet-class>servlet.CityServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CityServlet</servlet-name>
<url-pattern>/CityServlet</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>ProvinceServlet</servlet-name>
<url-pattern>/ProvinceServlet</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>ValidateUsernameServlet</servlet-name>
<url-pattern>/ValidateUsernameServlet</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
servlet
provinceServlet
package servlet; import org.dom4j.Attribute;
import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.io.SAXReader; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.InputStream;
import java.util.List; /**
* Created by YuWenHui on 2017/4/23 0023.
*/
public class ProvinceServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
// 得到Document对象
// 创建解析器对象，通过该解析器的读方法，传递一个流对象，从而得到一个Document对象
SAXReader reader = new SAXReader();
InputStream inputStream = this.getClass().getResourceAsStream("/china.xml");
try {
Document document = reader.read(inputStream);
List<Attribute> list = document.selectNodes("//province/@name");
StringBuilder stringBuilder = new StringBuilder();
for (int i=0;i<list.size();i++){
stringBuilder.append(list.get(i).getValue());
if (i<list.size()-1){
stringBuilder.append(",");
}
}
response.getWriter().print(stringBuilder);
} catch (DocumentException e) {
throw new RuntimeException(e);
}
}
}
cityServlet
package servlet; import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.Element;
import org.dom4j.io.SAXReader; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.InputStream; /**
* Created by YuWenHui on 2017/4/23 0023.
*/
public class CityServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/xml;charset=utf-8");
SAXReader reader = new SAXReader();
InputStream inputStream = this.getClass().getResourceAsStream("/chain.xml");
try {
Document document = reader.read(inputStream);
String pname = request.getParameter("pname");
Element element = (Element) document.selectSingleNode("//province[@name='"+pname+"']");
String xmlString = element.asXML();
response.getWriter().print(xmlString);
} catch (Exception e) {
throw new RuntimeException(e);
}
} }
AJAX应用案例之省市联动的更多相关文章
- ajax经典案例--省市联动
ajax的省市联动案例 如果我们的代码比较复杂,可以通过file_put_contents来输出信息到某个日志. 在一个元素中添加另一个元素使用的方法是:appendChild(). 函数append ...
- 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)
// 示例一: china.xml (位于 src 目录下) <?xml version="1.0" encoding="utf-8"?> < ...
- Ajax jQuery下拉框联动案例
需求: 使用ajax和jQuery实现下拉框联动. 注意:需要加入jquery-2.1.1.min.js 前台 <!DOCTYPE html> <html> <head& ...
- JS 省市联动 ajax
省市联动 //省市联动 $('.locationCode').change(function () { var val = $(this).val(); if ...
- Django（二十）下拉列表-省市联动实例：jquery的ajax处理前端
一.知识点 1.jquery的ajax请求写法 <script src="/static/js/jquery-1.12.4.min.js"></script> ...
随机推荐
- bootstrap初级
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" ...
- Rabbitmq 性能测试
背景: 线上环境,出了一起事故,初步定位是rabbitmq server. 通过抓包发现,是有多个应用使用同一台rabbitmq server.并且多个应用使用rabbitmq的方式也不一样.发现有以 ...
- Spring-Mybatis配置多数据源
可以参考: http://www.cnblogs.com/ityouknow/p/6102399.html 需要一个DatabaseConfiguration类,实现 TransactionManag ...
- 【Spring】使用Spring和AMQP发送接收消息（中）
上篇讲了RabbitMQ连接工厂的作用是用来创建RabbitMQ的连接,本篇就来讲讲RabbitMQ的发送消息.通过RabbitMQ发送消息最简单的方式就是将connectionFactory Bea ...
- 新人报道~cnblogs
我的名字:杨先生 我的英文名:Allen 和你们一样,是一名程序猿,专业技能 C#.前端小块.
- Sublime Text前端开发环境配置
Sublime Text是前端开发不可不说的编辑器,本文以Sublime Text 3为例讲解一下如何搭建前端的开发环境. 下载Sublime Text 3 下载地址 #==> Sublime ...
- 【2017-03-31】JS-DOM操作：操作属性、彩虹导航栏、定时器、操作内容、创建元素并添加、操作相关元素
一.操作属性 1.什么是属性: <div class="div" id="div1" style="" ></div> ...
- Luogu3373【模板】线段树2
P3373[模板]线段树2 题目描述 如题,已知一个数列,你需要进行下面两种操作: 1.将某区间每一个数加上x 2.将某区间每一个数乘上x 3.求出某区间每一个数的和 输入输出格式 输入格式: 第一行 ...
- 老李分享： Oracle Performance Tuning Overview 翻译下
1.2性能调优特性和工具 Effective data collection and analysis isessential for identifying and correcting perfo ...
- java中的==、equals()、hashCode()源码分析
转载自:http://www.cnblogs.com/xudong-bupt/p/3960177.html 在Java编程或者面试中经常会遇到 == .equals()的比较.自己看了看源码,结合实际 ...