码迷,mamicode.com
首页 > Web开发 > 详细

ajax_get/post_两级联动

时间:2017-11-20 13:06:07      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:标签   display   charset   roc   sof   idt   form   下拉   city   

使用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页面作为服务器响应非常简单:先读取请求参数,当请求id1时,返回三个中国城市;当请求id2时,返回三个美国城市;当请求id3时,返回三个日本城市。

 

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

 

 

  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_两级联动

标签:标签   display   charset   roc   sof   idt   form   下拉   city   

原文地址:http://www.cnblogs.com/excellencesy/p/7865292.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!