Question

我想显示从数据库中读取的值列表，并将通过Struts的显示标记显示给用户，值列表应在用户向下滚动页面的同时加载即可。

我的问题是因为我已经有一个仅加载少量数据的动作，现在我正在考虑使用jQuery的$.ajax()函数进行加载，但在尝试这样的事情之前我想知道是否有一个选项可以使用其他Struts标签或其他东西。（我正在使用显示标签只是因为我需要排序。）

Answer 1

使用jQuery Ajax在滚动上加载数据并不复杂。下面是用于通过调用scroll来从Struts操作加载数据来演示$.ajax()事件的代码，该操作在滚动条缩略图的末尾返回其他内容。致文章Load Data From Server While Scrolling Using jQuery AJAX的作者。

<强> LoadDataAction.java

@Action(value="load-on-scroll-example", results = {
  @Result(location = "/LoadData.jsp")
})
public class LoadDataAction extends ActionSupport {
  private static int COUNT = 6;

  private InputStream inputStream;

  //getter here
  public InputStream getInputStream() {
    return inputStream;
  }

  @Action(value="load-data", results = {
    @Result(type="stream", params = {"contentType", "text/html"})
  })
  public String loadData() throws Exception {
    String resp = "";
    Map<String, Object> session = ActionContext.getContext().getSession();
    int counter = session.get("counter")== null?COUNT:(int)session.get("counter");
    for(int i = 0; i <= 10; i++) {
      resp += "<p><span>"  + counter++ +
        "</span> This content is dynamically appended " +
        "to the existing content on scrolling.</p>" ;
    }
    session.put("counter", counter);
    inputStream = new ByteArrayInputStream(resp.getBytes());
    return SUCCESS;
  }
}

<强> LoadData.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ taglib prefix="s" uri="/struts-tags"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo page: Load data while scrolling using Struts2 and JQuery</title>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">
  $(document).ready(function(){
    $contentLoadTriggered = false;
    $("#mainDiv").scroll(function() {
      if($("#mainDiv").scrollTop() >= ($("#wrapperDiv").height() - $("#mainDiv").height()) && $contentLoadTriggered == false) {
        $contentLoadTriggered = true;
        $.ajax({
          url: "<s:url action='load-data'/>",
          success: function (data) {
            $("#wrapperDiv").append(data);
            $contentLoadTriggered = false;
          },
          error:  function (x, e) {
            alert("The call to the server side failed. Error: " + e);
          }
        });
      }
    });
  });

</script>

<style type="text/css">
  body {
    font-family:Arial;
    font-size:.93em;
  }

  #mainDiv {
    background-color:#FAFAFA;
    border:2px solid #888;
    height:200px;
    overflow:scroll;
    padding:4px;
    width:700px;
  }

  #mainDiv p {
    border:1px solid #EEE;
    background-color:#F0F0F0;
    padding:3px;
  }

  #mainDiv p span {
    color:#00F;
    display:block;
    font:bold 21px Arial;
    float:left;
    margin-right:10px;
  }
</style>

</head>
<body>
<form id="form1">
  <div>
    <h1>
      Demo page: Load data while scrolling with Struts2 and JQuery</h1>
    <p></p>
    <p style="margin: 20px 0; background-color: #EFEFEF; border: 1px solid #EEE; padding: 3px;">
      This page is a demo for loading new content from the server and append the data
            to existing content of the page while scrolling.
    </p>
  </div>
  <div id="mainDiv">
    <div id="wrapperDiv">
      <p>
        <span>1</span> Static data initially rendered.
      </p>
      <p>
        <span>2</span> Static data initially rendered.
      </p>
      <p>
        <span>3</span> Static data initially rendered.
      </p>
      <p>
        <span>4</span> Static data initially rendered.
      </p>
      <p>
        <span>5</span> Static data initially rendered.
      </p>
    </div>
  </div>
</form>
</body>
</html>

向下滚动页面时加载数据

1 个答案: