如何在我的jsp Web應用程序中顯示「加載更多故事」？

Question

首先，讓我明確你的疑慮，我在找什麼。我用Google搜索已經和成噸的結果，但我的問題是：

我想告訴Load more stories到我的web應用程序，它獲取從MySQL數據庫的故事，是這樣的：

<div align="center"><font color="#CC0099" size="4">&#9733;·.·´¯`·.·&#9733; HAPPY NEW YEAR &#9733;·.·´¯`·.·&#9733;<br></font></div> 
<% 
    try{ 
     Class.forName("com.mysql.jdbc.Driver"); 
     Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/news", "foo", "foo"); 
     Statement st=con.createStatement(); 
     ResultSet rs=st.executeQuery("select * from main_news order by news_id desc"); 
      while(rs.next()){ 
       String my_news=rs.getString("my_news"); 
    %> 
<div class="wpb_wrapper" style="border-bottom: 1px solid #bcbcbc;"> 
<section> 
<!-- Here, would be my news.... --> 
    <%=my_news %> 
</section> 
</div><br><br><br> 
<% 
      } 
    } 
    catch(Exception e){ 
     e.printStackTrace(); 
    } 
%> 
<p style="text-align:center;">No more stories here..</p> 
</div> 

能否請您只是幫助我，我有很多故事，現在我想改變它像'加載更多的故事。

當然，幫助將不勝感激！

Answer 1

這正是你所需要的。

https://github.com/paulirish/infinite-scroll - > Scrolldown已至底部看到效果 - >可以使用jQuery

http://www.infinite-scroll.com/集成。

Answer 2

您可以使用Ajax，請點擊w3school。

中的JavaScript功能頁：

var xmlHttp 
function loadmore() 
{ 
    //here you can send a request to a jsp(such as getmorestory.jsp) or a servlet to get data of stories. 
    xmlHttp=GetXmlHttpObject() 
    if (xmlHttp==null) 
    { 
     alert ("Browser does not support HTTP Request") 
     return 
    } 
    var url="getmorestory.jsp" 
    xmlHttp.onreadystatechange=stateChanged 
    xmlHttp.open("GET",url,true) 
    xmlHttp.send(null) 
} 
function stateChanged() 
{ 
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") 
    { 
    document.getElementById("news").innerHTML=xmlHttp.responseText 
    } 
} 
function GetXmlHttpObject() 
{ 
    var xmlHttp=null; 
    try 
    { 
     // Firefox, Opera 8.0+, Safari 
     xmlHttp=new XMLHttpRequest(); 
    } 
    catch (e) 
    { 
     // Internet Explorer 
     try 
     { 
     xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); 
     } 
     catch (e) 
     { 
     xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
    } 
    return xmlHttp; 
} 

---

你可以改變你的html代碼：

<section id="news"> 
    <!-- Here, would be my news.... --> 
    <%=my_news %> 
</section> 

<p style="text-align:center;" onclick="loadmore()">No more stories here..</p> 

---

在getmorestory.jsp，你可以像這樣的代碼：

<% 
    try{ 
     if(session.getAttribute("RequestNum")!=null){ 
      session.SetAttribute("RequestNum") = 0; 
    } 
    Class.forName("com.mysql.jdbc.Driver"); 
    Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/news", "foo", "foo"); 
    Statement st=con.createStatement(); 
//add a param like RequestNum to session to control 
    ResultSet rs=st.executeQuery("select * from main_news order by news_id desc limit session.getParameter("RequestNum"), session.getParameter("RequestNum")+10 "); 
    session.SetAttribute("RequestNum") = session.getAttribute("RequestNum")+10; 
     while(rs.next()){ 
      String my_news=rs.getString("my_news"); 
    //here output my_news, it will be send back to xmlHttp.responseText 
    out.print(my_news); 
%> 

---

代碼可能有很多錯誤，但你可以做這樣的方式......