如何使用Jquery从servlet获取返回数据？

Question

我目前正在学习jsp/servlet，尝试制作一个在线书店。使用jquery，我能够向servlet发送GET请求。成功后，它将使用browseBookArea.jsp重新加载browseBookArea div。我不明白的是，这个过程会在我的glashfish servlet上引起无限循环（发生在BrowseBookTag.java内，我在那里放了一个System.out.println来检查它）。

有没有另一种方法可以获取从servlet返回的数据到Jquery中，以便我可以正确地处理它？将变量设置在会话中对此并不是一个好方法。我看到了使用jquery.get的例子，我们可以获得响应数据。

  var currentCat = "all";
  $(document).ready(function(){
    $(".categoryItem").click(function(event){
         $("#browseBookArea").fadeToggle(100);
         currentCat = $(this).attr("id");
         $.get("GetBookFromCategoryServlet",{selectedCat:currentCat, currentPage:1});                               });    
   $("#browseBookArea").ajaxSuccess(function(){                               
         $(this).show(300);
         $(this).load("Components/browseBookArea.jsp");
    });

   $(".pagination").click(function(event){
         $("#browseBookArea").fadeToggle(100);
         var page = $(this).attr("id");
         alert(currentCat);
         $.get("GetBookFromCategoryServlet",{selectedCat:currentCat, currentPage:page});
      });
});

这是我的browseBookArea.jsp文件：

<div id="browseBookArea" class="span-15 last">
    <%System.out.println("Back from servlet");
      Collection c = (Collection) request.getAttribute("booksFromCat");
      if (c == null) {
          Collection c1 = (Collection) session.getAttribute("booksFromCat");
          if (c1 == null) System.out.println("Books are null");
      }
    %>
    <myJavaTags:BrowseBookTag books="${booksFromCat}" pageSize="${pageSize}" >
        <c:if test="${not empty book1 }">
            <div class="span-7">
                    <center>
                        <img width="115px" height="115px" src='${book1.photoPath}.jpg'/>
                        <p>${book1.price}<br/><a>${book1.title}</a> <br/>${book1.authorName}<p>
                    </center>
            </div>
        </c:if>
        <c:if test="${not empty book2 }">
            <div class="push-1 span-7 last">
                <center>
                        <img width="115px" height="115px" src='${book2.photoPath}.jpg'/>
                        <p>${book2.price}<br/><a>${book2.title}</a> <br/>${book2.authorName}<p>
                </center>
            </div>
        </c:if>
    <hr class="space">
    </myJavaTags:BrowseBookTag>
    <hr class="space"/>
</div>

我的BrowseBookTag：

 public void doTag() throws JspException, IOException{
//        if (books ==null){
//            admin = AdminBeanFactory.getAdminInstance();
//            books = admin.browseBook(cat);
//        }
        Iterator bookIt = books.iterator();
        JspContext jsp = getJspContext();
        int i = 0, count = 0;
        System.out.println("Total book size in browse tag: "+books.size());
        while (bookIt.hasNext() && i < pageSize){
            BookDTO b = (BookDTO) bookIt.next();
            if (count == 0){
                jsp.setAttribute("book1", b);
                if ((i+1) == pageSize){
                    jsp.setAttribute("book2", null);
                    getJspBody().invoke(null);
                }
                count++;
            }else{
                jsp.setAttribute("book2", b);
                getJspBody().invoke(null);
                count = 0;
            }
            i++;
        }
    }

- Amumu

---

有一件事我不太明白：似乎在文档加载后自动进行了 Ajax 调用，如果 Ajax 调用成功，则会执行 $(this).load("Components/browseBookArea.jsp")，这将再次在窗口中加载一个新页面（或者是同一个页面？我想此时的 $(this) 是文档元素）。我并不是说这个方法有问题，只是觉得很奇怪，因为缺少一些数据。 - SJuan76

$(this).load("Components/browseBookArea.jsp"); 刷新 div #browseBookArea，该 div 是要刷新的 div。#browsebookArea 位于同一 browseBookArea.jsp 中。ajax 成功后，将使用来自 servlet 的会话数据重新加载仅包含 div #browseBookArea 的页面。 - Amumu

当网站允许您这样做时，您应该将您的答案标记为已接受的，以便其他人明确您的问题已得到解决。不过，您应该真的避免在JSP中使用脚本片段。而应该使用Servlet API。 (见 Scriptlets Considered Harmful?) - Matt Ball

我会在接下来的两天内勾选答案 :( 不过还是谢谢你的建议。 - Amumu

Answer 1

我找到了罪魁祸首。它就是：

$("#browseBookArea").ajaxSuccess(function(){                               
         $(this).show(300);
         $(this).load("Components/browseBookArea.jsp");
    });

糟糕，糟糕，糟糕。这表明我不知道success方法调用的含义。我刚刚意识到，如果我让#browseBookArea div每次加载，它会导致成功操作，然后它将再次执行，最终导致递归。最后我走出了这个陷阱。正确的做法应该是：

$(".categoryItem").click(function(event){
      $("#browseBookArea").fadeToggle(100);
      var currentId = $(this).attr("id");
      $.get("GetBookFromCategoryServlet",{selectedCat:currentId, currentPage:1}, function(data){
             $("#browseBookArea").fadeIn(300); 
             $("#browseBookArea").load("Components/browseBookArea.jsp");                                  
             });
      }); 

我只需要在GET请求之后定义一个成功处理程序，而且这个成功处理程序不能是调用操作的div元素。

- Amumu