使用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时,返回三个日本城市。

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

  2. 使用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发送 PUT和DELETE请求注意事项

    jax使用restful服务发送put 和 delete 请求时直接传参会出现问题 一,采用POST  + _method:delete/put  + filter 的方法ajax发送put 和 de ...

  2. AJAX发送 PUT和DELETE请求参数传递注意点,了解一下

    ajax发送put 和 delete 请求时,需要传递参数,如果参数在url地址栏上,则可以正常使用, 如果在 data:中需要传递参数,(浏览器会使用表单提交的方式进行提交) 则需要注意此时应作如下 ...

  3. 通过 Ajax 发送 PUT、DELETE 请求的两种实现方式

    一.普通请求方法发送 PUT 请求 1. 如果不用 ajax 发送 PUT,我们可以通过设置一个隐藏域设置 _method 的值,如下: <form action="/emps&quo ...

  4. Ajax发送GET、POST请求和响应XML数据案例

    1.新建工程 新建一个java web工程,新建一个Servlet文件 AServlet.java,用于返回get和post请求. public class AServlet extends Http ...

  5. 原生Ajax发送get、post请求每一步

    说明 发送Ajax的请求的核心对象是XMLHttpRequest,因此我们需要了解该对象的相关属性和方法 方法(图一) 属性(图二) 第一步:创建 XMLHttpRequest对象,下面都简写为 xh ...

  6. ajax发送GET和POST请求

    1.ajax-get请求demo <script> document.getElementById("buttonname").onclik=function(){ / ...

  7. Ajax发送XML请求案例

    Ajax发送XML请求需求: 根据输入的国家,输出这些国家下面的城市. 如果请求参数较多,而且请求参数的结构关系复杂,则可以考虑发送XML请求.XML请求的实质还是POST请求,只是在发送请求的客户端 ...

  8. Ajax详解及其案例分析------如何获得Ajax对象,使用Ajax对象发送GET和POST请求,校验用户名,POST和GET请求时的乱码处理,实现级联的下拉列表

    本节主要内容预览: 1 获得Ajax对象 2 使用Ajax对象发送GET请求 3 使用Ajax对象发送POST请求 4 使用Ajax校验用户名 5 POST请求时的乱码处理 6 GET请求时的乱码处理 ...

  9. Ajax发送简单请求案例

    所谓简单请求,是指不包含任何参数的请求.这种请求通常用于自动刷新的应用,例如证券交易所的实时信息发送.这种请求通常用于公告性质的响应,公告性质的响应无需客户端的任何请求参数,而是由服务器根据业务数据自 ...

随机推荐

  1. Windows 10彻底关闭自动更新

    关键点:把流量计费开启.

  2. ES Segment Memory——本质上就是segment中加到内存的FST数据,因此segment越多,该内存越大

    ElasticSearch优化系列四:ES的heap是如何被瓜分掉的 转自:https://www.jianshu.com/p/f41b706db6c7 以下分别解读几个我知道的内存消耗大户: Seg ...

  3. P1290sk抓螃蟹

    背景 sk,zdq想在hzy生日之际送hzy几只螃蟹吃... 描述 现有n只螃蟹,每个在一个二维作标上,保证没有任何两个螃蟹重合.sk伸手抓螃蟹 了,他怕螃蟹的攻击,当他捉一只螃蟹时,其他螃蟹都朝这只 ...

  4. 杂项-地图:LBS

    ylbtech-杂项-地图:LBS 基于位置的服务,它是通过电信移动运营商的无线电通讯网络(如GSM网.CDMA网)或外部定位方式(如GPS)获取移动终端用户的位置信息(地理坐标,或大地坐标),在地理 ...

  5. JPA设置表名和实体名,表字段与实体字段的对应

    转自:https://blog.csdn.net/LQW_java_home/article/details/53079363 首先 你的jpaProperties配置项中要有 <prop ke ...

  6. curl ,post,get (原创)

    curl get: 1)直接输出 $ch=curl_init(); curl_setopt($ch,CURLOPT_URL,"http://testopen.api.yaolan.com/a ...

  7. Spring《八-一》CGLIB代理和自动代理

    CGLIB代理 配置文档 <bean id="logProxy" class="org.springframework.aop.framework.ProxyFac ...

  8. Hadoop MapReduce编程 API入门系列之计数器(二十七)

    不多说,直接上代码. MapReduce 计数器是什么?    计数器是用来记录job的执行进度和状态的.它的作用可以理解为日志.我们可以在程序的某个位置插入计数器,记录数据或者进度的变化情况. Ma ...

  9. asp.net的TextBox回车触发指定的按钮事件

    一;             event.returnValue = false;             document.all[button].click();         }    }   ...

  10. vue-router 原理解析

    “更新视图但不重新请求页面”是前端路由原理的核心之一,