jQuery+struts2 ajax刷新列表数据

最新推荐文章于 2021-08-06 01:58:26 发布

许增强

最新推荐文章于 2021-08-06 01:58:26 发布

阅读量669

点赞数

分类专栏： Java jQuery & javaScript

本文链接：https://blog.csdn.net/xuzengqiang2/article/details/40888521

版权

jQuery & javaScript 同时被 2 个专栏收录

44 篇文章 0 订阅

订阅专栏

Java

28 篇文章 0 订阅

订阅专栏

考虑到分页，查询需要刷新数据,此时我以前通常会考虑由后台struts2直接传递json给前端，然后通过eval处理json格式数据解析json，然后刷新列表。

其实可以考虑将列表界面单独分离出来作为一个单独的页面，利用<s:include>引入该页面即可。然后每次调用ajax后只刷新列表界面即可。

具体实现:

主页面:LuceneMain.jsp

<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%
	response.setHeader("Cache-Control", "no-cache");
	response.setHeader("Pragma", "no-cache");
	response.setDateHeader("Expires", 0);
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<s:include value="/student/jsp/meta.jsp"></s:include>
	<title>::海峡学前教育平台::</title>
	<style type="text/css">
		*{margin:0;padding:0;font-family:微软雅黑}
		.body_search{border:1px solid #AFAFAF;min-height:500px;width:1000px;margin:50px auto;box-shadow:0px 0px 10px #AFAFAF;}
		.body_search .head{height:100px;background:#EFEFEF;border-bottom:1px solid #DFDFDF}
		input{height:48px;float:left;width:300px;margin-left:250px;position:relative;top:30px;border-radius:5px 0px 0px 5px;
			border:1px solid #AFAFAF;box-shadow:inset -1px 0px 4px #AFAFAF}
		button{float:left;height:50px;border:1px solid #AFAFAF;background:#3399CC;color:#FFFFFF;width:100px;
		position:relative;top:30px;font-size:12pt;border-radius:0px 5px 5px 0px}
		.body_content{border:1px solid #AFAFAF;min-height:400px;width:800px;margin:10px auto;}
		.list{border-bottom:1px dashed #AFAFAF;margin-bottom:10px}
		.title{height:30px;background:#EEEEEE;line-height:30px;}
		.title span{color:#FF9900}
		.content{margin-left:20px;height:65px;overflow:hidden}
		a{text-decoration:none;color:#3399CC}
		a:hover{color:#FF9900}
	</style>
	<script type="text/javascript" src="${ctp}/student/js/jquery.min.js"></script>
</head>

<body>
	<div class="body_search">
		<div class="head">
			<input type="text" name="title" id="title">
			</input>
			<button class="submit">搜索</button>
		</div>
		<div class="body_content">
			<s:include value="LuceneList.jsp"></s:include>
		</div>
	</div>
</body>
<script type="text/javascript">
jQuery(document).ready(function(){
	var url="${ctp}/student/RepositoryLuceneAction!search.action";
	$(".submit").click(function(){
		$.ajax({
			url:url,
			type:"post",
			data:{"title":$("input[name=title]").val()},
			success:function(data){
				$(".body_content").html(data);
			}
		});
	});
});
	
</script>
</html>

列表界面:LuceneList.jsp

<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%
	response.setHeader("Cache-Control", "no-cache");
	response.setHeader("Pragma", "no-cache");
	response.setDateHeader("Expires", 0);
%>
<s:iterator id="data" value="repositoryList" status="rowstatus">
	<div class="list">
		<div class="title">
			<a href="#"><span>${data.title}</span></a>
		</div>
		<div class="content">
			<span>${data.content}</span>
		</div>
	</div>	
</s:iterator>

后端处理struts2 Action:RepositoryLuceneAction.java

package com.vnetoo.redu.resource.action.student;

import java.util.ArrayList;
import java.util.List;

import javax.annotation.Resource;

import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.Namespace;
import org.apache.struts2.convention.annotation.ParentPackage;
import org.apache.struts2.convention.annotation.Result;
import org.springframework.stereotype.Controller;

import com.vnetoo.redu.core.action.ObjectBaseAction;
import com.vnetoo.redu.resource.bo.RepositoryData;
import com.vnetoo.redu.resource.service.RepositoryService;

/**
 * 点播资源Lucene
 * 
 * @author xuzengqiang
 * @since 2014-11-07
 */
@Controller("/student/RepositoryLuceneAction")
@ParentPackage("student")
@Namespace("/student")
@Action(value = "/RepositoryLuceneAction", results = { 
		@Result(name = "main", location = "/student/jsp/resource/lucene/LuceneMain.jsp"),
		@Result(name = "list", location = "/student/jsp/resource/lucene/LuceneList.jsp")
	}
)
public class RepositoryLuceneAction extends ObjectBaseAction<RepositoryData, RepositoryService> {

	private static final long serialVersionUID = 1L;

	public String title;
	
	private List<RepositoryData> repositoryList = new ArrayList<RepositoryData>();

	@Override
	@Resource
	public void setCoreBaseService(RepositoryService coreBaseService) {
		this.coreBaseService = coreBaseService;
	}

	public String getTitle() {
		return title;
	}

	public void setTitle(String title) {
		this.title = title;
	}

	public List<RepositoryData> getRepositoryList() {
		return repositoryList;
	}

	public void setRepositoryList(List<RepositoryData> repositoryList) {
		this.repositoryList = repositoryList;
	}

	public String main() {
		return "main";
	}

	public String search() {
		repositoryList = getService().search(title); //返回结果
		return "list";
	}
}

这样就不需要通过后台将repositoryList数据解析成json格式数据，前端也不需要繁琐的解析过程，同样实现ajax无刷新。