jQuery将更多新闻从数据库加载到页面

jQuery load more news from database to page

本文关键字：加载 数据库 新闻 jQuery      更新时间：2023-09-26

在告诉你我的问题之前，Hava先看看这个例子： JSFIDDLE

现在，我正在尝试使用所示的相同示例，但我正在使用列表从数据库中获取数据。但是当我运行时，它会显示两个故事，如果我单击以显示加载更多新闻。什么也没发生。我被困在那里。我正在尝试从 12 小时内解决这个问题。

请帮帮我！！

看看我的源代码：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ page language="java" import="java.sql.*" %>
<html>
    <head>
        <title>Title...</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <style>
#myList li{ display:none;
}
#loadMore {
    color:green;
    cursor:pointer;
}
#loadMore:hover {
    color:black;
}
        </style>
        <script type="text/javascript">
            $(document).ready(function () {
                size_li = $("#myList li").size();
                x=3;
                $('#myList li:lt('+x+')').show();
                $('#loadMore').click(function () {
                    x= (x+5 <= size_li) ? x+5 : size_li;
                    $('#myList li:lt('+x+')').show();
                });
            });
</script>
    </head>
    <body>
<%
    try{
        Class.forName("com.mysql.jdbc.Driver");
        Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/news", "root", "1234");
        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">
<section>
<ul id="myList">
    <li>
<!-- Here, would be my news.... -->
    <%=my_news %>
    </li>
</ul>
</section>
</div>
<%
            }
    }
    catch(Exception e){
        e.printStackTrace();
    }
%>
<div id="loadMore">Load more</div><br>

</body>
</html>

当然，帮助将不胜感激！

根据jquery逻辑，你正在计算$（"#myList li"）.size（），根据你的代码是1。 因此，当您单击Loadmore时，它会检查逻辑是否在并找到X大小大于size_li，因此它不执行任何操作。

解决方案：可以使用修改代码 

<% for(int i = 0; i < my_news.size(); i++) { %>
   <li>      
       <%=my_news[i] %>
   </li>
   <%{ %>

您也可以使用 JSLT 标记来编写代码。

相关文章：