AJAX之二级联动下拉列表

AJAX的核心是JavaScript对象XMLHttpRequest。是一种异步请求的技术，不用刷新整个页面就可以与服务器进行交互。本文就以二级联动下拉列表为例：

获取AJAX对象js代码：

function createAJAX(){var ajax = null;try{ajax = new ActiveXObject("microsoft.xmlhttp");}catch(e1){try{ajax = new XMLHttpRequest();}catch(e2){alert("浏览器不支持ajax");}}return ajax;
}

JavaScript与jsp代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<title>二级联动下拉列表</title>
<script type="text/javascript" src="js/ajax.js"></script>
</head><body><select id="provinceID" style="width:111px"><option>--选择省份--</option><option>陕西</option><option>广东</option></select>    <select id="cityID" style="width:111px"><option>--选择城市--</option></select><script type="text/javascript">document.getElementById("provinceID").onchange = function() {//清空城市下拉列表，但是除去第一项var cityElement = document.getElementById("cityID");cityElement.options.length = 1;var index = this.selectedIndex;var optionElement = this[index];var province = optionElement.innerHTML;if ("选择省份" != province) {//【1】获取ajax异步对象var ajax = createAJAX();var method = "POST";var url = "${pageContext.request.contextPath}/ListBoxServlet?time = "+ new Date().getTime();ajax.open(method, url);//【2】设置请求头ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");//【3】var content = "province=" + province;ajax.send(content);//---------------------------------------//【4】匿名函数ajax.onreadystatechange = function() {if (ajax.readyState == 4) {if (ajax.status == 200) {//【5】从响应中获取xml文档var xmlDocument = ajax.responseXML;//按照DOM规则，解析xml文档var cityElementArray = xmlDocument.getElementsByTagName("city");var size = cityElementArray.length;for (var i = 0; i < size; i++) {//获取城市标签中的城市名称var city = cityElementArray[i].firstChild.nodeValue;//创建标签，并对标签内容进行赋值var optionElement = document.createElement("option");optionElement.innerHTML = city;cityElement.appendChild(optionElement);}}}}}}</script></body>
</html>

Servlet代码：

package com.xpeng.servlet;import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;public class ListBoxServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {}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();}}

访问页面：

转载于:https://www.cnblogs.com/xpeng-V/p/7349674.html

AJAX之二级联动下拉列表相关推荐

ajax下拉框二级联动 php,关于thinkphp 与 ajax 实现二级联动下拉列表
表的结构 cId 分类id cName 分类名称 gid 父级id 这是我的HTML页面 <volist name="rs" id="val"> & ...
php下拉列表二级联动,PHP+Ajax实现二级联动下拉菜单！
正文字体大小: 中 PHP+Ajax实现二级联动下拉菜单! (2009-12-05 01:11:39) 标签: 杂谈数据库 .................................... ...
php js 二级联动_PHP+ajax实现二级联动菜单功能示例
本文实例讲述了PHP+ajax实现二级联动菜单功能.分享给大家供大家参考,具体如下: 如何实现二级联动工作原理二级联动在开发中是比较常见的一个技术点,它主要运用了JS的局部刷新技术ajax,不同于 ...
jquery php联动,jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
jQuery结合PHP+MySQL实现二级联动下拉列表[实例] 实现原理:根据省份值的变动,通过jQuery把sf_id传给后台php文件处理,php通过查询MySQl数据库,得到对应的地市名,并返回 ...
php mysql实现下拉列表查询_php+mysql实现二级联动下拉列表
二级联动下拉列表(select),都是从数据库中取值,其中第二级为可多选列表(multiple).若要实现二级也是下拉菜单,可以将multiple改了即可. 全动态二级联动下拉列表 /******** ...
php ajax二级联下拉菜单,ThinkPHP和Ajax 实现二级联动的下拉菜单
这篇文章主要介绍了关于ThinkPHP和Ajax 实现二级联动的下拉菜单,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下联动菜单的数据存在数据库,可以随时通过对数据库添加删除修改改变菜 ...
ajax实现二级联动
用js实现简单的ajax二级联动(如上图) HTML代码: 1 省份:<select id="province" onchange="getCity();" ...
web中ajax实现二级联动,Ajax实现城市二级联动（一）
前一篇是把省份和城市都写在JS里,这里把城市放在PHP里,通过发送Ajax请求城市数据渲染到页面. 1.html 请选择山东省辽宁省吉林省请选择 2.javascript /* * 需要思考哪 ...
Excel 轻松制作二级联动下拉列表清单
在做二级联动过程中需要用到一个函数: INDIRECT() 返回文本字符串所指定的引用语法 INDIRECT(ref_text,a1) Ref_text: 单元格引用,该引用所指向的单元格中存放有对 ...

AJAX之二级联动下拉列表

AJAX之二级联动下拉列表相关推荐

最新文章

热门文章