根据下拉框的内容异步加载表格

实现的运行功能截图：

截图1	截图2

前台页面

formlist.jsp 代码如下

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<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 getForm() {
			// 初始化XMLHttpRequest对象
			createXMLHttpRequest();
			var select = document.getElementById("select1");
			var key = select.selectedIndex;
			var value = select.options[key].text;
			var uri = "TestAction_index";
			// 打开与服务器的连接
			xmlrequest.open("POST",uri,true);
			// 设置POST请求的请求头
			xmlrequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			// 指定当XMLHttpRequest状态改变时的事件处理函数
			xmlrequest.onreadystatechange = processResponse;
			// 发送请求
			xmlrequest.send("name="+value);
		}
		// 当XMLHttpRequest状态改变时，该函数将被触发
		function processResponse() {
			if (xmlrequest.readyState == 4) {
				if (xmlrequest.status == 200) {
					// 将服务器响应以$符号分割成一个字符串数组
					var prices = xmlrequest.responseText;
					// 将服务器的响应通过页面显示。
					dealForm(prices);
				}
			}
		}

		function dealForm(date){
			document.forms["form2"].innerHTML=date;
		}
		
	</script>
</head>
<body>
	<select name="select1" id="select1" onchange="getForm()">
	<option value="0">姓名</option>
	<option value="1">性别</option>
	<option value="2">年份</option>
	</select>
	<form action="" name="form2" id="form2"></form>
</body>
</html>

struts.xml文件：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
<constant name="struts.custom.i18n.resources" value="mess"></constant>
<package name="my" extends="struts-default">
<action name="TestAction_*" class="cn.TestAction" method="{1}">
<result name="success">/WEB-INF/forms.jsp</result>
</action>
</package>
</struts>

action处理类

TestAction.java代码如下：

package cn;

import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.interceptor.ServletRequestAware;
import org.apache.struts2.interceptor.ServletResponseAware;
import org.apache.struts2.interceptor.SessionAware;

import com.opensymphony.xwork2.ActionSupport;

public class TestAction extends ActionSupport implements SessionAware,ServletRequestAware,ServletResponseAware{

	private static final long serialVersionUID = 1L;
	private String name = null;
	protected HttpServletRequest request;
	protected HttpServletResponse response;
	protected Map<String,Object> session;

	public void setServletResponse(HttpServletResponse response) {
		this.response=response;	
	}
	public void setServletRequest(HttpServletRequest request) {
		this.request=request;
	}
	public void setSession(Map<String,Object> session) {
		this.session=session;
	}
	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}
	
	public String index() throws Exception {
		Map<Integer,String> map = new HashMap<Integer,String>();
		if ("姓名".equals(name)) {
			map.put(0,"小明");
			map.put(1,"小红");
			map.put(2,"小华");
		}else if ("性别".equals(name)) {
			map.put(0,"男");
			map.put(1,"女");
		}else if ("年份".equals(name)) {
			map.put(0,"2012");
			map.put(1,"2013");
			map.put(2,"2014");
			map.put(3,"2015");
		}else{
			
		}
		request.setAttribute("map",map);
		return SUCCESS;
	}
	
}

显示的jsp页面

forms.jsp代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<table>
<tr>
<td>学号</td>
<td>姓名</td>
</tr>
<s:iterator value="#request.map" id="map">
<tr>
<td><s:property value="key"/></td>
<td><s:property value="value"/></td>
</tr>
</s:iterator>
</table>

需要包截图如下：

总结：本文使用ajax实现异步刷新表格的内容，在学习过程中主要注意formlist.jsp页面的js代码。提示“：如果需要达到同样效果可以使用frameset框架实现异步加载。

原文链接：https://www.f2er.com/ajax/164279.html

根据下拉框的内容异步加载表格

猜你在找的Ajax相关文章