JavaWeb Ajax实现下拉框联动

谁践踏了优雅 2023-01-08 08:18 184阅读 0赞

博主在做项目时，需要做一个根据学期无刷新地址栏获取课程的功能，类似于地区联动选择。如图所示：

## 1.运行演示 ##

![在这里插入图片描述][20210119154723185.gif_pic_center]  
ajax 实际上是 JavaScript+XML 来实现  
原始AJax 实际为 XMLHtttpRequest  
而Jquery中的ajax 有 ( . p o s t , .post, .post,.get,$.ajax)三种形式

## 2.ajax能够解析的内容 ##

普通字符串 为特殊字符串  
XML文件内容 熟练XML文件结构  
JSON字符串 JSON的基本类型

## 3.设计AJAX的实例 ##

学期表  
Term 学期编号 term\_id term\_name 学期名称  
课程表 course course\_id 课程编号 course\_name 课程名称 所属学期 term\_id  
博主使用的是get形式实现：  
**jsp代码：**

<%@ page language="java" contentType="text/html; charset=utf-8"
        pageEncoding="utf-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <%@include file="/admin/common.jspf" %>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>课程列表使用Ajax解析字符实例</title>
    </head>
    <body>
    
    	选择学期:
    	<select id="sel_term">
    		<option value="-1">--请选择--</option>
    		<c:forEach items="${terms}" var="term"> 
    			<option value="${term.term_id}">${ term.term_name}</option>
    		</c:forEach>
    	</select>
    	课程：
    	<select id="sel_course">
    		<option value="-1">--请选择--</option>
    		
    	</select>
    	<script type="text/javascript">
    	$(function(){ 
    		//绑定下拉列表改变的事件
    		$("#sel_term").bind("change",function(){ 
    			var term_id=$(this).val();
    			var $selcourse=$("#sel_course");
    			//选择的value值,
    			//使用jQuery的get函数发送ajax请求
    			//url为请求的服务器路径，data是发送请求的参数，callback是请求成功后的回调函数,请求的数据类型
    			//$.get(url,data,callback,dataType);
    			$.get("${basePath}/TermServlet?action=findCourseById",{ termId:term_id},function(data){ 
    				$selcourse.find("option:gt(0)").remove();//清除
    				var courses=data.split(",");
    				for(var i=0;i<courses.length;i++){ 
    					var course=courses[i].split("_");
    					//获取课程id与name
    					var id=course[0];
    					var name=course[1];
    					//构建option对象
    					var $option=$("<option value="+id+">"+name+"</option>");
    					//把option追加到sel下拉对象中里
    					$selcourse.append($option);
    					
    				}
    			});
    		});
    	});
    	</script>
    </body>
    </html>

XML方式请求

private void findUserByName(HttpServletRequest request,
    			HttpServletResponse response) throws IOException { 
    		// TODO Auto-generated method stub
    		//设置XML文件类型
    		response.setContentType("text/xml;charset=UTF-8");
    		PrintWriter out=response.getWriter();
    		String name=request.getParameter("name");
    		List<User> users=userservice.findUserByName(name);
    		//组合方式:课程id_课程名称,课程id_课程名称,...
    		StringBuffer sbd=new StringBuffer();
    		sbd.append("<?xml version=\"1.0\" encoding=\"UTF-8\" ?>");
    		sbd.append("<users>");
    		System.out.println(users);
    		if(users!=null&&users.size()>0){ 
    			for(User user:users){ 
    				sbd.append("<user id=\""+user.getId()+"\" name=\""+user.getName()+"\" />");
    			}
    		}
    		//去掉最后一个逗号
    		sbd.append("<users>");
    		System.out.println(sbd);
    		//响应在页面
    		out.write(sbd.toString());
    		out.flush();
    		out.close();
    		
    	}

[20210119154723185.gif_pic_center]: /images/20221119/4d44afdf58a1475097132c33bf1f00ca.png