页面渲染后使用 Ajax 获取数据到 Datatable答案

【问题标题】：Fetch data with Ajax to Datatable after page render页面渲染后使用 Ajax 获取数据到 Datatable
【发布时间】：2013-01-04 02:05:06
【问题描述】：

解决的想法很简单，但是我以前从未这样做过，需要建议。我将 Spring、Spring Webflow 和 JSF 与 Primefaces 一起使用。

我使用外部网络服务来获取表中的一些数据。有时它的工作速度比网站调用慢，我想避免“等待”加载。我的想法（这不是什么新鲜事）是加载包含所有静态（或本地服务器）内容的页面，然后调用外部 Web 服务来获取数据。比完成时显示它。

到目前为止，它看起来像这样：

网站：

<p:dataTable id="table" var="item" value="#{lastfm.topArtists}">
                    <p:column headerText="Model" sortBy="#{item.name}">
                        <h:outputText value="#{item.name}" />
                    </p:column>
</p:dataTable>

而 Bean 本身就是这样：

private List<Artist> topArtists = new ArrayList<Artist>();
public void init(String u) {
    topArtists = (List<Artist>) User.getTopArtists(u, StaticContent.api_key);
}

用户 - 是 Web 服务 API。

ATM init 加载网站的on-render，但我想避免它，在页面加载后以某种方式调用它，并在成功时显示。

我认为它可能是一些带有 jquery 的 javascript 函数，使用 onDocumentReady() 和 onSuccess 用于 ajax，但我真的不知道如何连接它。

谢谢！

【问题讨论】：

标签： ajax jsf jsf-2 primefaces spring-webflow

【解决方案1】：

主要面孔的轮询组件可能会帮助您实现这一目标。

http://www.primefaces.org/showcase-labs/ui/poll.jsf

<h:form id="form">  
<p:poll interval="3"   
        listener="#{lastfm.topArtistsRetrieved}" update="table" />  

<p:dataTable id="table" var="item" value="#{lastfm.topArtists}">
                <p:column headerText="Model" sortBy="#{item.name}">
                    <h:outputText value="#{item.name}" />
                </p:column>
</p:dataTable>
</h:form>

我假设 User.getTopArists 会在完成时通知您。基本上你需要一个标志来指示你的进程是否结束。并且通过主要面孔轮询，您应该检查标志是否被提升，并通过 ajax 更新您应该在结果准备好时打印结果。您甚至可以通过此流程显示流程的进度。

【讨论】：