4

我正在处理部分内容正常加载并使用 jsps 呈现页面的页面。该页面上生成的产品图像和链接是由自定义 jstl 标签生成的。

当用户滚动时，服务器会在 JSON 响应中请求更多产品，然后使用 UnderscoreJS 模板将它们呈现并添加到页面底部。有什么方法可以在 Javascript 中使用 JSTL 标记，而无需使用 javascript 函数重新创建它们（不可能在 javascript 中重新创建所有标记）。

处理这种情况的最佳方法是什么？我想我可以为 ajax 调用返回一个呈现的 html 响应，但这意味着我有一些使用 json 的 ajax 请求和一些使用呈现的 html...

4

3 回答 3

3

您不能在 JavaScript 中重复使用 JSTL 标记，因为它们是 Java，而不是 JavaScript，并且因为它们是在呈现页面时在服务器端执行的，而不是在客户端上执行的。

然而，既然你的 JavaScript 已经可以获取和渲染数据，为什么不直接用 JSTL 来渲染第一部分，而在 JavaScript/Ajax/UnderscoreJS 中完成整个事情呢？

于 2012-11-26T04:18:29.810 回答
1

解决此问题的一种方法是使AJAX方法返回HTML而不是普通对象。

您可以编写一个 jsp 页面，该页面将为新记录创建 html 并将 html 作为可以附加到先前内容的响应发送。

前任

假设你的页面是这样的

<div class="container">
    <div class="record rec-1">
        //some html code
    </div>
    <div class="record rec-2">
        //some html code
    </div>

    .....
    .....

    <div class="record rec-n">
        //some html code
    </div>
</div>

然后，当您想加载更多内容并进行 ajax 调用时，让服务器返回一个已处理的 html 响应，例如

    <div class="record rec-n+1">
        //some html code
    </div>
    <div class="record rec-n+2">
        //some html code
    </div>

    .....
    .....

    <div class="record rec-n+k">
        //some html code
    </div>

您可以轻松地将其应用到container. 您可以使用 jsp 页面来生成 html。

于 2012-11-26T04:51:34.783 回答
1

在相同的情况下，我至少使用了两种（或多或少相似）解决方案。

  1. 使用包含的 JSP。第一个请求（包含产品图像和链接列表的页面）应该返回整个页面的 JSP，例如

    <%@page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
... skipped ...
<c:forEach items="${products}" var="product">
  <%@include file="productInfo.jsp"%>
</c:forEach>
... skipped ...
</html>

    第二个请求（列表延续的 AJAX 请求）应返回带有请求的列表部分的 JSP：

    <c:forEach items="${products}" var="product">
  <%@include file="productInfo.jsp"%>
</c:forEach>

    其内容可以通过浏览器中的 AJAX 响应处理程序插入到 DOM 中，无需任何额外处理。请注意，两个响应都包含相同的 JSP 以呈现有关单个产品的信息。

  2. <%@include file="..."%>您可以使用JSP 标签代替。其余的看起来类似：JSP for the entire page

    <%@page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
... skipped ...
<c:forEach items="${products}" var="product">
  <tag:productInfo product="${product}" />
</c:forEach>
... skipped ...
</html>

    具有请求的列表部分的 JSP：

    <c:forEach items="${products}" var="product">
  <tag:productInfo product="${product}" />
</c:forEach>

通过这种方式，您可以为两种响应（AJAX 和非 AJAX）重用单一视图 (JSP)，并消除 AJAX 的第二种呈现机制（JSON + 从 JavaScript 手动创建 DOM 片段）。

于 2012-12-02T22:31:42.797 回答