ajax联动
1、编写html代码,引入ajax文件
<script type="text/javascript" src="js/ajax.js"></script>
<select id="provinceID" style="width:111px">
<option>选择省份</option>
<option>湖南</option>
<option>广东</option>
</select>
<select id="cityID" style="width:111px">
<option>选择城市</option>
</select>
2、编写html处理代码
<script type="text/javascript">
//定位省份下拉框,同时添加内容改变事件
document.getElementById("provinceID").onchange = function(){
//清空城市下拉框中的内容,除第一项外
var cityElement = document.getElementById("cityID");
cityElement.options.length = 1;
//获取选中option标签的索引号,从0开始
var index = this.selectedIndex;
//定位选中的option标签
var optionElement = this[index];
//获取选中的option标签中的内容,即省份
var province = optionElement.innerHTML;
//如果选中的内容不是"选择省份"
if("选择省份" != province){
//NO1)
var ajax = createAJAX();
//NO2)
var method = "POST";
var url = "${pageContext.request.contextPath}/ProvinceCityServlet?time="+new Date().getTime();
ajax.open(method,url);
//设置AJAX请求头
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
//NO3)
var content = "province=" + province;
ajax.send(content); //---------------------------------等待 //NO4)
ajax.onreadystatechange = function(){
if(ajax.readyState == 4){
if(ajax.status == 200){
//NO5)从AJAX异步对象中获取服务器响应的xml文档
var xmlDocument = ajax.responseXML; //NO6)按照DOM规则,解析XML文档 var cityElementArray = xmlDocument.getElementsByTagName("city");
var size = cityElementArray.length;
for(var i=0;i<size;i++){
//innerHTML只能用在html/jsp中,不能用在xml中
var city = cityElementArray[i].firstChild.nodeValue;
//<option></option>
var optionElement = document.createElement("option");
//<option>广州</option>
optionElement.innerHTML = city;
//<select><option>广州</option></select>
cityElement.appendChild(optionElement);
}
}
}
}
}
}
</script>
3、编写java处理代码
public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String province = request.getParameter("province"); //通知AJAX异步对象,服务器响应的数据为xml格式的
response.setContentType("text/xml;charset=UTF-8");
//获取字符输出流
PrintWriter pw = response.getWriter(); pw.write("<?xml version='1.0' encoding='UTF-8'?>");
pw.write("<root>"); if("广东".equals(province)){
pw.write("<city>广州</city>");
pw.write("<city>深圳</city>");
pw.write("<city>中山</city>");
}else if("湖南".equals(province)){
pw.write("<city>长沙</city>");
pw.write("<city>株洲</city>");
pw.write("<city>湘潭</city>");
pw.write("<city>岳阳</city>");
} pw.write("</root>");
pw.flush();
pw.close();
}
ajax联动的更多相关文章
- 省市区ajax联动
function setCity1(){ var areaId1 = $('#areaId1').val(); var cityId1 = $('#cityId1'); var cityOpt = $ ...
- 02-26C#三级省市区ajax联动控件,利用UpdatePanel,以及页面取值
第一步:设置界面 <%@ Control Language="C#" AutoEventWireup="true" CodeFile="PCAC ...
- Java基础——JSON
一.JSON定义 在百度百科中的解释:JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于JavaScript的一个子集. JSON采用完全独立于语言的 ...
- 解决IE下select option不支持display none样式
万恶的IE,option竟然不支持display样式,想到的解决思路有二个: 1.ajax联动查询 2.jQuery的remove().after()方法 方法1的不好之处是初始页面,需要显示全部IP ...
- Dwz手册的补充说明和常见问题
1.我如何在项目中使用dwz? 手册中有如下说明: 设计思路 第一次打开页面时载入界面到客户端, 之后和服务器的交互只是数据交互, 不占用界面相关的网络流量. 支持HTML扩展方式来调用DWZ组件. ...
- DevExpress2011控件教程)编辑控件(comboBox,AspxCheckBox) 范例1
DevExpress2011控件教程)编辑控件(comboBox,AspxCheckBox) 范例1 AspxCheckBox 是一个检查编辑控件去展示特殊条件是否关闭或者打开.它一般会展示Yes/N ...
- ajax 多级联动 下拉框 Demo
写了ajax实现级联下拉框,考虑常用,并且级联个数随不同业务个数不同,于是就整理了一下,实现了 ajax + N级联动 下拉框的效果 效果图 HTML 代码 <h2> 省级联动</h ...
- jQuery Ajax MVC 下拉框联动
无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List<SelectListItem> Tea ...
- Ajax省市区无刷新单表联动查询
方法一: 在很多时候都需要用到无刷新级联查询,本文将以省市区的级联查询作为例子.注:此为单表三级联动 环境:Vistual Studio 2015 .MSSQL 1.首先下载AjaxControlTo ...
随机推荐
- C# MVC 自学笔记—6 编辑方法和编辑视图
==============================翻译============================== 运行该应用程序并浏览到Movies控制器通过将/Movies追加到您的浏览 ...
- Android 开发ListView适配器优化
我们都知道Android中Adapter的作用就是ListView界面与数据之间的桥梁,当列表里的每一项显示到页面时,都会调用Adapter的getView方法返回一个View.想过没有? 在我们的列 ...
- Android之SplashActivity的巧妙之处
众所周知,我们很多应用都会有一个SplashActivity,用来当作进入应用的第一个过度界面,显示一个logo信息.如下所示,是我的简洁天气的SplashActivity. 但是,它的作用仅仅只是用 ...
- Linux下安装Oracle的过程和涉及的知识点-系列4
10.使用rpm安装包 假设本地有现成的相关包,能够直接使用rpm安装.rpm rpm包名,但有时会出现它须要其他包的支持,这时若须要忽略此提示.强行安装,运行rpm -i --force --nod ...
- 权威指南之脚本化jquery
jqury函数 jquery()($())有4种不同的调用方式 第一种是最常用的调用方式是传递css选择器(字符串)给$()方法.当通过这种方式调用时,$()方法会返回当前文档中匹配该选择器的元素集. ...
- Django web开发【5】 实现标签功能
标签tag在很多web2.0应用中都很常见,标签其实就是关联某些信息的一个关键字.打标签实际上就是给内容分配标签的过程,它通常由作者或者用户实现.标签之所有这么流行是因为它允许用户对自己创建的博客.图 ...
- 对discuz的代码分析学习(一)目录结构
主目录 DISCUZ用的是自己的框架,和其他框架应用一样属于单入口应用.主目录下的.php文件,大部分是应用的入口文件. home.php:家园入口,即论坛中类似博客的那个东西.index.php:首 ...
- JSWING小工具
项目中需要一个发送指令到指定服务端,取得设备ID及检测数据的小工具,就利用jswing开发了一个简单小组件,最终效果如下: 代码很简单,具体片段如下: Window.java import java. ...
- Fedora 19下Guacamole的安装使用
由于我要使用RDP实现web远程桌面,因此需要用到了Guacamole这个开源的软件.之前用Ubuntu12.04折腾了一晚上,也没有找到依赖库文件,而Guacamole的官方安装说明却没有介绍这个依 ...
- Python2.7.3 学习——准备开发环境
安装环境搭建参考:http://blog.163.com/sunshine_linting/blog/static/4489332320129187464222/ 第一种方式,通过命令行方式安装Pyt ...