使用ajax实现菜单联动

通常情况下，GET请求用于从服务器上获取数据，POST请求用于向服务器发送数据。

需求：选择第一个下拉框的值，根据第一个下拉框的值显示第二个下拉框的值

  1. 首先使用GET方式。

客户端HTML页面显示第一个下拉选择框，给当前下拉选择框选择某个选项后，通过XMLHttpRequest向服务器发送请求，请求动态显示第二个下拉选择框。下面是对应的HTML页面的代码。

程序清单：Ajax02request/get/first.html

<!DOCTYPE html>

<html>

<head>

<meta name="author" content="silvan" />

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>发送GET请求</title>

<!-- 给select标签添加样式 -->

<style type="text/css">

select {

width: 160px;

font-size: 11pt;

}

</style>

</head>

<body>

<select name="first" id="first" onchange="change(this.value);">

<option value="0">---请选择---</option>

<option value="1" >中国</option>

<option value="2">美国</option>

<option value="3">日本</option>

</select>

<select name="second" id="second"></select>

<script type="text/javascript">

// 定义了XMLHttpRequest对象

var xmlrequest;

// 完成XMLHttpRequest对象的初始化

function createXMLHttpRequest(){

if(window.XMLHttpRequest){

// DOM 2浏览器

xmlrequest = new XMLHttpRequest();

}else if (window.ActiveXObject){

// IE浏览器

try{

xmlrequest = new ActiveXObject("Msxml2.XMLHTTP");

}catch (e){

try{

xmlrequest = new ActiveXObject("Microsoft.XMLHTTP");

}catch (e){

}

}

}

}

// 事件处理函数，当下拉列表选择改变时，触发该事件

function change(id){

// 初始化XMLHttpRequest对象

createXMLHttpRequest();

// 设置请求响应的URL

var uri = "second.jsp?id=" + id;

// 设置处理响应的回调函数

xmlrequest.onreadystatechange = processResponse;

// 打开与服务器响应地址的连接

xmlrequest.open("GET", uri, true);

// 发送请求

xmlrequest.send(null);

}

// 定义处理响应的回调函数

function processResponse(){

//响应完成且响应正常

if (xmlrequest.readyState == 4){

if (xmlrequest.status == 200){

// 将服务器响应以$符号分隔成字符串数组

var cityList = xmlrequest.responseText.split("$");

// 获取用于显示菜单的下拉列表

var displaySelect = document.getElementById("second");

// 将目标下拉列表清空

displaySelect.innerHTML = null;

// 以字符串数组的每个元素创建option，

// 并将这些选项添加到下拉列表中

for (var i = 0 ; i < cityList.length ; i++){

// 创建一个<option.../>元素

var op = document.createElement("option");

op.innerHTML = cityList[i];

// 将新的选项添加到列表框的最后

displaySelect.appendChild(op);

}

}else{

//页面不正常

window.alert("您所请求的页面有异常。");

}

}

}

// 指定页面加载完成后指定change(id)函数

document.body.onload = change(document.getElementById("first").value);

</script>

</body>

</html>

采用GET请求将父菜单的ID作为参数发送，根据ID显示第二个下拉框的值。服务器响应页面的代码如下。

程序清单：Ajax02request/get/second.jsp

<%@ page contentType="text/html; charset=UTF-8" language="java"%>

<%

String idStr = (String)request.getParameter("id");

int id = idStr == null ? 1 : Integer.parseInt(idStr);

switch(id){

case 1:

out.println("上海$广州$北京");

break;

case 2:

out.println("华盛顿$纽约$加州");

break;

case 3:

out.println("东京$大板$福冈");

break;

}

%>

上面jsp页面作为服务器响应非常简单：先读取请求参数，当请求id为1时，返回三个中国城市；当请求id为2时，返回三个美国城市；当请求id为3时，返回三个日本城市。

在浏览器中浏览该页面，并改变左边下拉列表的选中项，将看到下图效果：

  1. 使用POST方式

POST请求的适应性更广，可使用更大的请求参数。而且POST请求的请求参数在页面跳转时，不能在链接地址中直接看到，保密性更好。因此在使用Ajax发送请求时，尽量采用POST方式而不是GET方式发送请求。发送POST请求通常需要如下三个步骤：

  • 使用open方法打开连接时，指定使用POST方式发送请求。
  • 设置正确的请求头，POST请求通常应设置Content-Type请求头。
  • 发送请求，把请求参数转为查询字符串，将该字符串作为send（）方法的参数。

对于上面的应用，使用POST方式实现，只需要改一个请求的发送方法，如下所示：

// 事件处理函数，当下拉列表选择改变时，触发该事件

function change(id) {

// 初始化XMLHttpRequest对象

createXMLHttpRequest();

// 设置请求响应的URL

var uri = "second.jsp";

// 设置处理响应的回调函数

xmlrequest.onreadystatechange = processResponse;

// 设置以POST方式发送请求，并打开连接

xmlrequest.open("POST", uri, true);

// 设置POST请求的请求头,表示数据被编码为名称/值对

xmlrequest.setRequestHeader("Content-Type"

, "application/x-www-form-urlencoded");

// 发送请求

xmlrequest.send("id="+id);

}

其余的部分则无须改变，应用的执行效果与采用GET方式发送请求的效果完全一样。事实上，即使采用POST方式发送请求，一样可以将请求参数附加在请求的URL之后。如果send方法没有请求参数，应传入null，因为有些浏览器规定了send方法必须传入参数。代码如下：

// 事件处理函数，当下拉列表选择改变时，触发该事件

function change(id) {

// 初始化XMLHttpRequest对象

createXMLHttpRequest();

// 设置请求响应的URL

var uri = "second.jsp?id="+id;

// 设置处理响应的回调函数

xmlrequest.onreadystatechange = processResponse;

// 设置以POST方式发送请求，并打开连接

xmlrequest.open("POST", uri, true);

// 设置POST请求的请求头

xmlrequest.setRequestHeader("Content-Type"

, "application/x-www-form-urlencoded");

// 发送请求

xmlrequest.send(null);

}

ajax_get/post_两级联动的更多相关文章

  1. ajax实现无刷新两级联动DropDownList

    ajax实现的无刷新三级联动 http://zhangyu028.cnblogs.com/articles/310568.html 本文来自小山blog:http://singlepine.cnblo ...

  2. JS练习：两级联动

    代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...

  3. Combobox下拉框两级联动

    下拉框的两级联动是我们开发中经常遇到一种情况.比如一个学生管理系统中,根据年级.科目及姓名查询学生考试成绩,年级和科目都是硬盘中的有限数据(数据库)而学生则可以有用户手动指定,这时在数据库中有年级和科 ...

  4. Jquery实现两级联动

    最后结果如下: 关键代码如下: <select name="customerCondition['credibilityBegin']" id="credibili ...

  5. ASP_NET实现界面无刷新的DropdownList两级联动效果

    所谓DropdownList联动,也就是在选一个DropdownList的时候使另外一个DropdownList的内容更新(如选省份时显示所属城市),按常规的方法那就是在第一个DropdownList ...

  6. JQuery EasyUI combobox 省市两级联动

    表名:province  结构如下 CallIn.tpl 模板页 <select id="consult_province" name="consult_provi ...

  7. JS 省市两级联动（不带地区版本）

    基于网上找的一个版本改造,因为项目需求不需要地区只要省.市,所以做了改版,两个input上直接取出了数据 <html> <head> <script src=" ...

  8. 踩iviewui中Select 选择器两级联动，重置查询条件时第二级数据无法清除的坑

    小颖公司最近做的项目用的vue+iviewui+axios,在做项目的过程中,遇到一个问题: 二级联动的下拉框,第一个下拉框一直都有值,第二个下拉框是在选择了第一个下拉框之后采取调用ajax获取其值, ...

  9. Thinkphp 两级联动

    <!-- 前端代码部分--><div class="pop-movegroup" id="salesmanBox"> <dl> ...

随机推荐

  1. 一起写框架-Ioc内核容器的实现-基础API的定义（三）

    Ioc内核要解决的问题 1.被调用方,在程序启动时就要创建好对象,放在一个容器里面. 2.调用方使用一个接口或类的引用(不用使用new),就可以创建获得对象. 解决这个两个问题的思路 1.定义一个对象 ...

  2. HTTPCLIENT 模拟登陆

    第一步构建忽略https验证的httpclient public static CloseableHttpClient getHttpClient() throws Exception { SSLCo ...

  3. sql 1.1 1.1.1 1.10.1 排序

    解决思路:计算每位的权重,得到序号完整的权重值,使用权重值进行排序! 创建sql 函数如下: ALTER FUNCTION [dbo].[SequenceToOrderNum] ( @Sequence ...

  4. 解决webstorm启动索引文件卡死问题

    问题 当目录下的文件数量较大时,用webstorm打开会出现卡顿,甚至卡死现象,例如:node_modules目录 解决方案 不让webstorm索引该目录下的文件步骤:1.node_modules目 ...

  5. [转载] 常用 Java 静态代码分析工具的分析与比较

    转载自http://www.oschina.net/question/129540_23043 简介: 本文首先介绍了静态代码分析的基本概念及主要技术,随后分别介绍了现有 4 种主流 Java 静态代 ...

  6. [转]ORACLE递归查询

    转自:http://www.oracle.com/technetwork/cn/articles/hartley-recursive-086819-zhs.html 递归数据库处理,也称为材料清单 或 ...

  7. 后端自动化版本管理，再也不用改URL了！

    每次升级接口版本时,后端.前端.客户端都是痛苦的: 后端:要兼容旧版客户端,以前的接口不能动啊,又得写新接口.新文档了,唉! 前端:还好,就是版本号到处都是,改起来比较烦. Android:快点啊产品 ...

  8. Spring AOP高级——源码实现（3）AopProxy代理对象之JDK动态代理的创建过程

    spring-aop-4.3.7.RELEASE  在<Spring AOP高级——源码实现(1)动态代理技术>中介绍了两种动态代理技术,当然在Spring AOP中代理对象的生成也是运用 ...

  9. Nginx 搭建图片服务器

    Nginx 搭建图片服务器 本章内容通过Nginx 和 FTP 搭建图片服务器.在学习本章内容前,请确保您的Linux 系统已经安装了Nginx和Vsftpd. Nginx 安装:http://www ...

  10. lua元表

    __index元方法:按照之前的说法,如果A的元表是B,那么如果访问了一个A中不存在的成员,就会访问查找B中有没有这个成员.这个过程大体是这样,但却不完全是这样,实际上,即使将A的元表设置为B,而且B ...