jQuery+struts2 ajax刷新列表数据

来源：互联网发布：淘宝图片水印设置编辑：程序博客网时间：2024/05/16 15:04

考虑到分页，查询需要刷新数据,此时我以前通常会考虑由后台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@Resourcepublic 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无刷新。

0 0