如何在向下滚动页面时加载数据答案

【问题标题】：How to load data while scrolling down the page如何在向下滚动页面时加载数据
【发布时间】：2012-10-05 07:15:50
【问题描述】：

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

我的问题是：

由于我已经有一个只加载少量数据的操作，现在我正在考虑使用 jQuery 的 $.ajax() 函数进行加载，但在尝试类似的操作之前，我想知道是否有一个选项使用其他 Struts 标签或其他东西来做到这一点。（我使用显示标签只是因为我需要排序。）

【问题讨论】：

标签： jquery ajax scroll struts2 custom-scrolling

【解决方案1】：

使用 jQuery Ajax 在滚动上加载数据并不复杂。下面是用于演示 scroll 事件的代码，它通过调用 $.ajax() 从 Struts 操作加载数据，该操作在滚动条缩略图的末尾返回附加内容。感谢文章作者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>

【讨论】：