ajax动态更新下拉列表
前面做了一个ajax的小demo,今天看一个动态更新下拉列表,或者也叫级联更新下拉列表,这个也是利用ajax的异步调用去后台实现数据请求。然后回到前台完毕下拉列表数据的更新,以增强web应用的交互性。
后台servlet
package com.ajax; import java.io.IOException;
import java.io.PrintWriter; import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; /**
* Servlet implementation class CreateXML
*/
@WebServlet("/CreateXML")
public class CreateXML extends HttpServlet {
private static final long serialVersionUID = 1L; /**
* @see HttpServlet#HttpServlet()
*/
public CreateXML() {
super();
// TODO Auto-generated constructor stub
} /**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
} /**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/xml");
response.setCharacterEncoding("UTF-8");
String selected = request.getParameter("selected");
PrintWriter out = response.getWriter();
out.println("<response>");
//以下分别为两个省份创建地市
if (selected.equals("1")){//假设选择的是“湖南省”
out.println("<city>");
out.println("<cityname>长沙</cityname>");
out.println("<cityvalue>1</cityvalue>");
out.println("</city>");
out.println("<city>");
out.println("<cityname>娄底</cityname>");
out.println("<cityvalue>2</cityvalue>");
out.println("</city>");
out.println("<city>");
out.println("<cityname>常德</cityname>");
out.println("<cityvalue>3</cityvalue>");
out.println("</city>");
}else{//假设选择的是“广东省”
out.println("<city>");
out.println("<cityname>广州</cityname>");
out.println("<cityvalue>1</cityvalue>");
out.println("</city>");
out.println("<city>");
out.println("<cityname>深圳</cityname>");
out.println("<cityvalue>2</cityvalue>");
out.println("</city>");
out.println("<city>");
out.println("<cityname>佛山</cityname>");
out.println("<cityvalue>3</cityvalue>");
out.println("</city>");
}
out.println("</response>");
out.flush();
out.close();
} }
我们推送到前台的数据为<response><city><cityname>长沙</cityname><cityvalue>1</cityvalue></city></response> xml格式。
前台页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>AjaxDemo</title>
</head>
<script language="javascript">
// 定义一个变量用于存放XMLHttpRequest对象
var xmlHttp; // 该函数用于创建一个XMLHttpRequest对象
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
} // 这是响应省份列表的onChange事件的处理方法
function updateSelect(){
var selected = document.getElementById("slt1").value;//得到省份列表的当前选值
// document.getElementById("slt1").selectedIndex 获得选中项索引值(数字)
// document.getElementById("slt1").value 获得选中项的value值
// 创建一个XMLHttpRequest对象
createXMLHttpRequest();
// 将状态触发器绑定到一个函数
xmlHttp.onreadystatechange = processor;
// 通过GET方法向指定的URL建立server的调用
xmlHttp.open("GET", "CreateXML? selected="+selected);
// 发送请求
xmlHttp.send(null);
} // 处理从server返回的XML文档并更新地市下拉列表
function processor() {
// 定义一个变量用于存放从server返回的响应结果
var result; // 假设响应完毕 而且 返回成功
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//
// 取出server返回的XML文档的全部city标签的子节点
result = xmlHttp.responseXML.getElementsByTagName("city");
// 先清除地市列表的现有内容
while (document.getElementById("slt2").options.length>0){
document.getElementById("slt2").removeChild(document.getElementById("slt2").childNodes[0]);
} // 解析XML中的数据并更新地市列表
for(var i=0;i<result.length;i++){
var option = document.createElement("OPTION");
option.text = result[i].getElementsByTagName("cityname")[0].innerHTML;//这就是取出<cityname>中的值
option.value = result[i].getElementsByTagName("cityvalue")[0].innerHTM;//这就是取出<cityvalue>中的值
document.getElementById("slt2").options.add(option);//为地市列表中加入选项
}
}
} </script>
<body>
<br><br>
<center>
<form name="form1" action="#" method="POST">
请选择省份:
<select id="slt1" onChange="updateSelect()">
<option value="1">湖南省</option>
<option value="2">广东省</option>
</select>
地市:
<select id="slt2">
<option value="">请选择地市</option>
</select>
</form>
</center>
</body>
</html>
上面的程序,初始化页面效果为
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbWFnaTEyMDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
这让初始化的省份无法看到自己的地市,不够完美,怎么处理一下呢?
在页面载入完毕后,让程序先去后台请求一下当前的省份的地市。页面载入完毕。load事件,给body绑定load方法就可以。
我们的处理方法为
<body onload="updateSelect()">
这样,页面载入完毕时,便能够看到页面上面的广东省的地市。
ajax动态更新下拉列表的更多相关文章
- Jquery ajax动态更新下拉列表的内容
$("#book_id").change(function(){ $book_id=$(this).children('option:selected').val(); //ale ...
- flask+sqlite3+echarts3+ajax 异步更新数据
结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...
- js动态生成下拉列表
经常需要用到js动态生成下拉列表的功能,记录下来备用. 示例需求:通过ajax请求,从后台获取用户姓名列表,并添加到下拉列表中.js代码如下: function getNameList(){ //如果 ...
- highChart数据动态更新
highChart官网上通过ajax加载数据的例子 上面是第一次生成图表的时候使用 我想动态更新,在已经生成的图表上动态更新 chartBS.series[0].setData(sugarListDa ...
- HtmlUnit爬取Ajax动态生成的页面内容
HtmlUnit说白了就是一个浏览器,这个浏览器是用Java写的无界面的浏览器,正因为其没有界面,因此执行的速度还是可以滴. HtmlUnit提供了一系列的API,这些API可以干的功能比较多,如表单 ...
- 爬虫——爬取Ajax动态加载网页
常见的反爬机制及处理方式 1.Headers反爬虫 :Cookie.Referer.User-Agent 解决方案: 通过F12获取headers,传给requests.get()方法 2.IP限制 ...
- Python网络爬虫_爬取Ajax动态加载和翻页时url不变的网页
1 . 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新 ...
- 分别在javascript和JSP中动态设置下拉列表默认值
一.JavaScript中动态设置select标签中<option>选项的默认值: 比如,要完成下边这个下拉列表的动态显示,并且当进行前后翻页时,下拉列表中的值自动更新为当前页码: 图1 ...
- echarts在.Net中使用实例(二) 使用ajax动态加载数据
通过上一篇文章可以知道和echarts参考手册可知,series字段就是用来存储我们显示的数据,所以我们只需要用ajax来获取series的值就可以. option 名称 描述 {color}back ...
随机推荐
- 使用isolation forest进行dns网络流量异常检测
代码如下,测试发现,是否对输入数据进行归一化/标准化对于结果没有影响: import numpy as np from sklearn.ensemble import IsolationForest ...
- Python json数据中文输出问题。
这个问题困扰了我好久好久,最后看了一眼官方文档,解决问题了. 问题描述:从web上获取的json数据,然后对应的保存到了python的类型中.再次输出这个数据时,中文总会变成\u1234这种形式. P ...
- 以下三种下载方式有什么不同?如何用python模拟下载器下载?
问题始于一个链接https://i1.pixiv.net/img-zip-...这个链接在浏览器打开,会直接下载一个不完整的zip文件 但是,使用下载器下载却是完整文件 而当我尝试使用python下载 ...
- iOS 集成Protobuf,转换proto文件
原文地址:http://blog.csdn.net/hyq4412/article/details/54891038 附加Homebrew安装地址:https://brew.sh/index_zh-c ...
- php 扩展模块安装过程
安装php模块,不需要重新编译php,可以动态扩展php模块. 以安装msgpack模块为例:(此处php5.6是编译安装的) 1.下载msgpack模块源码包 # wget http://pecl. ...
- Chromium Graphics: Graphics and Skia
Graphics and Skia Chrome uses Skia for nearly all graphics operations, including text rendering. GDI ...
- 用 while 循环做个小游戏
import random #可输入次数 flag = 0 #生成一个1到10之间的随机整数 res = random.randint(1,10) #判读三次输入机会 while(flag<3) ...
- 【Round #36 (Div. 2 only) C】Socks Pairs
[题目链接]:https://csacademy.com/contest/round-36/task/socks-pairs/ [题意] 给你n种颜色的袜子,每种颜色颜色的袜子有ai只; 假设你在取袜 ...
- Java基础学习总结(29)——浅谈Java中的Set、List、Map的区别
就学习经验,浅谈Java中的Set,List,Map的区别,对JAVA的集合的理解是想对于数组: 数组是大小固定的,并且同一个数组只能存放类型一样的数据(基本类型/引用类型),JAVA集合可以存储和操 ...
- HDU 4309 Seikimatsu Occult Tonneru
Seikimatsu Occult Tonneru Time Limit: 6000ms Memory Limit: 32768KB This problem will be judged on HD ...