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

来源：互联网发布：ipad下载旧版本软件编辑：程序博客网时间：2024/04/28 19:40

实现的运行功能截图：

截图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框架实现异步加载。

0 0