发送GET请求，二级级连下拉菜

最新推荐文章于 2019-06-17 15:22:47 发布

q1054261752

最新推荐文章于 2019-06-17 15:22:47 发布

阅读量380

点赞数

分类专栏： Ajax

Ajax 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

通常情况下，GET请求用于从服务器上获取上获取数据，POST请求用于向服务器发送数据。GET请求将所有请求参数转换成一个查询字符串，并将该字符串添加到请求的URL之后，因而页面可在请的URL后看到请求参数名、请求参数值。如果将某个表单的action属性设置为GET，则请求的URL后看到参数名、请求数值。如果将某个表单的action属性设置为GET，则请求会将表单中各字段的名和值转换成字符串，并附加到URL之后。

采用GET请求将父菜单的ID作为参数发送，下面是服务器的响应页面，此处并未让服务务器的响应页面，此处并未让服务器响应页面从数据库读取-------后台数据库访问可仿照传统Java EE架构。服务器页面的代码如下。

second.jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
  <%
  String idStr =(String)request.getParameter("id");
  int id = idStr == null ? 1 :Integer.parseInt(idStr);
  System.out.println(id);
  switch(id){
  	
  	case 1:
  %>
  	上海$广州$北京
  <% 
  	break;
  	case 2:
  %>
   华盛顿$纽约$旧金山
   <%
   break;
   case 3:
   
    %>
    东京$大板$福冈
    <%
  	  break;
    }
    
     %>

first.html页面

<!DOCTYPE html>
<html>
  <head>
    <title>first.html</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
	<select name="first" id="first" οnchange="change(this.value);">
		<option value="1" selected="selected">中国</option>
		<option value="2">美国</option>
		<option value="3">日本</option>
	</select>
	<select name="second" id="second"></select>
	<script type="text/javascript">
		function createXMLHttpRequest(){
		
			if(window.XMLHttpRequest){
				
				xmlrequest = new XMLHttpRequest();
				
			}
			else if(window.ActiveXObject){
			
				try{
					xmlrequest = new ActiveXObject("Msxml2.XMLHTTP");
				}
				catch(e){
					try{
						xmlrequest = new ActiveXObject("Microsoft.XMLHTTP");
					}
					catch(e){}				
				}
			}
		}<strong>
		</strong>function change(id){
		
			createXMLHttpRequest();
			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;
					
					for(var i = 0;i< cityList.length ; i++){
						var op = document.createElement("option");
						op.innerHTML = cityList[i];
						//将新的选项添加到列表框的最后
						displaySelect.appendChild(op);
					}
				}<strong>
			</strong>	else{
					//页面不正常
					window.alert("您所请求的页面有异常.");
				}
			}
		}
	</script>


  </body>
</html><strong>
</strong>