ajax_get/post_两级联动
使用ajax实现菜单联动
通常情况下,GET请求用于从服务器上获取数据,POST请求用于向服务器发送数据。
需求:选择第一个下拉框的值,根据第一个下拉框的值显示第二个下拉框的值
- 首先使用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时,返回三个日本城市。
在浏览器中浏览该页面,并改变左边下拉列表的选中项,将看到下图效果:
- 使用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_两级联动的更多相关文章
- ajax实现无刷新两级联动DropDownList
ajax实现的无刷新三级联动 http://zhangyu028.cnblogs.com/articles/310568.html 本文来自小山blog:http://singlepine.cnblo ...
- JS练习:两级联动
代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...
- Combobox下拉框两级联动
下拉框的两级联动是我们开发中经常遇到一种情况.比如一个学生管理系统中,根据年级.科目及姓名查询学生考试成绩,年级和科目都是硬盘中的有限数据(数据库)而学生则可以有用户手动指定,这时在数据库中有年级和科 ...
- Jquery实现两级联动
最后结果如下: 关键代码如下: <select name="customerCondition['credibilityBegin']" id="credibili ...
- ASP_NET实现界面无刷新的DropdownList两级联动效果
所谓DropdownList联动,也就是在选一个DropdownList的时候使另外一个DropdownList的内容更新(如选省份时显示所属城市),按常规的方法那就是在第一个DropdownList ...
- JQuery EasyUI combobox 省市两级联动
表名:province 结构如下 CallIn.tpl 模板页 <select id="consult_province" name="consult_provi ...
- JS 省市两级联动(不带地区版本)
基于网上找的一个版本改造,因为项目需求不需要地区只要省.市,所以做了改版,两个input上直接取出了数据 <html> <head> <script src=" ...
- 踩iviewui中Select 选择器两级联动,重置查询条件时第二级数据无法清除的坑
小颖公司最近做的项目用的vue+iviewui+axios,在做项目的过程中,遇到一个问题: 二级联动的下拉框,第一个下拉框一直都有值,第二个下拉框是在选择了第一个下拉框之后采取调用ajax获取其值, ...
- Thinkphp 两级联动
<!-- 前端代码部分--><div class="pop-movegroup" id="salesmanBox"> <dl> ...
随机推荐
- python3 re正则匹配数据获取案例
# coding=utf-8import requestsimport jsonfrom retrying import retryimport re class TyY: def __init__( ...
- day2--SecureCRT的配置
生产中,我们是看不到虚拟机的工作界面,虚拟机的界面相当于机房显示屏的样子,实际上我们是在操作工具里面进行管理,这里使用SecureCRT远程连接虚拟机,SecureCRT的设置如下: 1.打开Secu ...
- css-子div设置margin-top影响父div
父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己父元素,祖先元素,所有需要在父元素设置border,或者padding
- 学python+django去北京找工作,靠谱吗?
有些朋友说,自己的学习能力还可以.倾向于python加框架,如django,python本来就会一些.不太了解北京公司的情况,想知道现学的python+django在北京找到工作有多少可能性. 要想知 ...
- sso单点登录,单点登录原理图,单点登录图解,单点登录
sso单点登录,单点登录原理图,单点登录图解,单点登录 ============================== ©Copyright 蕃薯耀 2017年11月20日 http://www.cnb ...
- SpringMV---params and headers
配置文件承接一二章 params params:请求的参数 params=value 表示请求过来的参数必须等于value params!=value 表示请求过来的参数必须不等 ...
- javascript第六章--BOM
① window对象 ② location对象 ③ navigator对象 ④ screen对象 ⑤ history对象
- ByteArrayInputStream&ByteArrayOutputStream源码分析
#ByteArrayInputStream 源码 ``` public synchronized int read(byte b[], int off, int len) { if (b == nul ...
- LKD: Chapter 8 Bottom Halves and Deferring Work
In 2.6.x, there are 3 mechanisms for implementing a bottom half: softirqs, tasklets and work queues. ...
- sockt初级了解 感悟 一起打怪升级偶
刚接触来谈谈对sockt基础的一点理解,多线性下次再发.也逛了逛博客,有一篇基础讲的停息在这推荐下sockt套接字编程全绍辉 首先贴下代码#服务器 import socket skt=socket.s ...