java +jsp實現的點擊加載更多，實現數據的異步加載

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt"%>
<%@	taglib uri="/WEB-INF/tld/struts-logic.tld" prefix="logic"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sss</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/alike.css"/>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/main.css"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/public/option.js"></script>
<script>
	$(function(){
			$("#table0 tr td").each(function(){
				//alert(3);
				//alert($(this).find("input[name='df']").html());
				//$(this).find("input[name='df']").attr("checked","checked");
				
				$(this).find("input[name='df']").each(function(){
					if($(this).attr("checked")){
						//alert("000");
					}
				});
			  });
	});
	//checkbox選中事件
	function afterchecked(obj){
	 	//alert();
	 	$(obj).css("display","block");
		$(obj).parent().removeClass();
		$(obj).parent().addClass("hp_new_xz");
		
	}
	//td添加樣式
	function tdover(obj,num0){
		document.getElementById('df_'+num0).style.display='block';
		//this.className='hp_new_xz';
		$(obj).removeClass();
		$(obj).addClass("hp_new_xz");
	}
	function tdout(obj,num0){
		//判斷td裏的checkbox是否被選中
		if(document.getElementById('df_'+num0).checked){
			document.getElementById('df_'+num0).style.display='block';
			//this.className='hp_new_xz';
			$(obj).removeClass();
			$(obj).addClass("hp_new_xz");
		}else{
			document.getElementById('df_'+num0).style.display='none';
			//this.className='hp_new';
			$(obj).removeClass();
			$(obj).addClass("hp_new");
		}
		
	}
	
	function sub1(){ 
		var name=$("#name").val();
		if(name==''){
			alert("名稱不能爲空！");
			return  false;
		}
	}
	function sub2(){
		var name=$("#name1").val();
		if(name==''){
			alert("名稱不能爲空！");
			return  false;
		}
	}
	function cmm(){
		var id=cb();
		if(id!=''){
		var id1=(id+"").split(",");
		if(id1.length==1){
			$.ajax({
				type:"post",
				url:"jcjgfzhyl_getName.action",
				data:{	
					"id":id
				},
				dataType:"json",
				async: false,
				success:function(data){
					$("#id1").val(data.jcjgglfzTbl.id);
					$("#name1").val(data.jcjgglfzTbl.groupName);
					document.getElementById('make_enter_ckebh_01xg').style.display='block';
				}
			});
		}else{
			alert("只能選擇一條要修改的數據");
			return  false;
		}
		}else{
			alert("請選擇一條要修改的數據！");
			return  false;
		}
		
	}
	
	function cb(){
		var id="";
		$("input[type=checkbox][name='df']").each(function (){
			if($(this).attr("checked")){
				if($(this).attr("checked")){
					if(id==""){
						id=$(this).val();
					}else{
						id+=","+$(this).val();
					}
				}
			}
	});
		return id;
	}
	function del(){
		var id=cb();
		if(id==''){
			alert("至少選擇一條刪除數據！");
		}else{
			$.ajax({
				type:"post",
				url:"jcjgfzhyl_del.action",
				data:{	
					"id":id
				},
				dataType:"json",
				async: false,
				success:function(data){
					if(data==0){
						alert("刪除成功！");
						window.location.href='jcjgfzhyl_list.action'
					}else{
						alert("刪除失敗！");
					}
				}
			});
		}
	}
	//點擊加載更多
	var pagenow = 1;
	function nextpage(){
		$("#getmore").html("加載中...");
		$.ajax({
			type:"post",
			url:"jcjgfzhyl_ajaxmore.action",
			data:{	
				"pagenow":pagenow+1
			},
			dataType:"html",
			async: false,
			success:function(data){
				//alert(data);
				if(data==""){
					$("#getmore").html("數據已經全部加載");
				}else{
					$("#table0").append(data);
					$("#getmore").html("加載更多...");
					pagenow=pagenow+1;
				}
			}
		});
	}
	//加載圖片
	function loadimage(obj){
		obj.src='${pageContext.request.contextPath }/images/folder.png';
	}
</script>
</head>

<body>
<!-- 將map對象（操作）設置到request域中 -->
<c:set value="${sessionScope.user.map }"  var="maps" scope="request"/>

    <!--新增彈窗-->
	<form action="jcjgfzhyl_save.action" method="post" onsubmit="return  sub1();">
   <div class="make_enter_zjtc" id="make_enter_ckebh_01" style="display:none;">
    	<div>
            <div class="tc_left"></div>
            <div class="tc_top">
            	<strong class="left">檢查結果管理</strong>
                <input type="button" class="btn_close right" onclick="document.getElementById('make_enter_ckebh_01').style.display='none';document.getElementById('bgdiv').style.display='none';"/>
            </div>
            <div class="tc_right"></div>
        </div>
    	<div class="margin">
            <table width="100%" border="0" cellpadding="0" cellspacing="0" class="show_table_yel">
                          <tr >
                            <th style="width:4%;">結果名稱：</th>
                            <td style="width:10%;">
                            <input type="text" class="ty_text" name="groupName" id="name" maxlength="25" />
                            <strong class="allred">*</strong>
                            </td>
                          </tr>
                          
                          
             </table>
        </div>
        <div class="tcbt_bottom center">
            	<input type="submit" class="btn_xzfj margin"  value="保存" />
                <input type="button" class="btn_xzfj margin"  value="取消" onclick="document.getElementById('make_enter_ckebh_01').style.display='none';document.getElementById('bgdiv').style.display='none';"/>
     </div>
</div>
</form>



 <!--修改彈窗-->
	<form action="jcjgfzhyl_update.action" method="post" onsubmit="return  sub2();">
   <div class="make_enter_zjtc" id="make_enter_ckebh_01xg" style="display:none;">
    	<div>
            <div class="tc_left"></div>
            <div class="tc_top">
            	<strong class="left">檢查結果管理</strong>
                <input type="button" class="btn_close right" onclick="document.getElementById('make_enter_ckebh_01xg').style.display='none';document.getElementById('bgdiv').style.display='none';"/>
            </div>
            <div class="tc_right"></div>
        </div>
    	<div class="margin">
            <table width="100%" border="0" cellpadding="0" cellspacing="0" class="show_table_yel">
                          <tr >
                            <th style="width:4%;">結果名稱：</th>
                            <input type="hidden" class="ty_text" name="id" id="id1" maxlength="20" />
                            <td style="width:10%;">
                            <input type="text" class="ty_text" name="groupName" id="name1" maxlength="25" />
                            <strong class="allred">*</strong>
                            </td>
                          </tr>
                          
                          
             </table>
        </div>
        <div class="tcbt_bottom center">
            	<input type="submit" class="btn_xzfj margin"  value="修改" />
                <input type="button" class="btn_xzfj margin"  value="取消" onclick="document.getElementById('make_enter_ckebh_01xg').style.display='none';document.getElementById('bgdiv').style.display='none';"/>
     </div>
</div>
</form>
   <div id="bgdiv" class="black_overlay" style="display:none;"></div>

<!--right-->
	<div class="big">
    	<div class="right_title">
        	<span>當前位置：檢查管理 >> 檢查結果管理</span>    	
        </div>
    	<div class="clearfix margin">
        	<div class="allmar">
            	<!--<h2 class="avtiveH">
                                    <span class="left cur">水果</span>
                                    <span class="left last">蔬菜</span>
                                    <span class="left last">乾果</span>
                                    <span class="left last">糧油</span>
                                    <label class="right"><img src="../images/xz_sg.png" alt=""  title="添加圖片" style="margin-right:10px; cursor:pointer; margin-top:2px;"/></label>
                                </h2>-->               
                <div class="activeCo">
                	<div class="jsgl_table_tab">
				        
               	<div class="right">
               		<c:if test="${maps.get('6.2.1').updateauthority == 0}">
                	<input type="button" class="btn_bj margin"  value="重命名" onclick="cmm()"/>
                    </c:if>
                     <c:if test="${maps.get('6.2.1').addauthority == 0}">
                    <input type="button" class="btn_bj margin"  value="新增" onclick="document.getElementById('make_enter_ckebh_01').style.display='block';"/>
                    </c:if>
                     <c:if test="${maps.get('6.2.1').delauthority == 0}">
                    <input type="button" class="btn_bj margin"  value="刪除" onclick="del();"/>
                    </c:if>
             </div>         
          </div>
          <div class="bor">
              <div id="marquee_new">
                  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="table_tp_new" id="table0">
                  										<c:forEach items="${_page.data }" var="p" varStatus="index">
                                                   				 <c:if test="${index.index%5==0}"><tr></c:if>
                                                                    <td width="20%" align="center"  onmouseover="tdover(this,${index.index});"  onmouseout="tdout(this,${index.index});" id="td">
                                                                        <input type="checkbox" id="df_${index.index}" name="df" style="display:none;" class="xz_check" value="${p.id }" onclick="afterchecked(this);"/>
                                                                        <div class="hp_new" onclick="location.href='jcjgfzhyl_detaillist.action?groupid=${p.id}';">
                                                                        <a href="#">
                                                                            <img src="${pageContext.request.contextPath}/images/folder.png" alt="" />
                                                                        </a>
                                                                        <span>${p.groupName }</span>
                                                                        
                                                                        </div>
                                                                    </td>
                                                                 <c:if test="${index.index%5==4}"></tr></c:if>
                                                                  </c:forEach>                    
                                                   			          
                                            </table>                                          	
              </div>
           </div>
           <c:if test="${datasize>10 }">
        	<div style="margin-top:2px; border-top:1px solid #CCC" class="center">
            	<div class="margin"><a href="javascript:nextpage();" style="color:#333;"><strong style="font-size:16px" class="five" id="getmore">查看更多...</strong></a></div>
            </div>
           </c:if>
           <div class="margin" style="border-top:1px solid #CCC">
        </div>      	                                                       
                </div>           
            </div>
      </div>
    </div>		
</body>
</html>

上面是頁面代碼，點擊nextpage()加載方法

public void ajaxmore(){
		String pagenow=getParameter("pagenow");
		if(pagenow!=null&&!"".equals(pagenow)){
			Pager p=get_page() ;
			p.setCurPage(Integer.parseInt(pagenow));
			p =jcjgglfzTblService.getAllByPage("from JcjgglfzTbl", "select count(*)  from JcjgglfzTbl", false, _page);
			List<JcjgglfzTbl> list=p.getData();
			StringBuilder sb = new StringBuilder("");
			//String imagepath=ServletActionContext.getServletContext().getRealPath("/images")+"/folder.png";
			if(list!=null&&list.size()>0){
				for (int i = 0; i < list.size(); i++) {
					if(i%5==0){
						sb.append("<tr>");
					}
					sb.append("<td width=\"20%\" align=\"center\"  onmouseover=\"document.getElementById('df_"+list.get(i).getId()+"').style.display='block';this.className='hp_new_xz';\"  onmouseout=\"tdout(this,"+list.get(i).getId()+");\" id=\"td\">");  //onmouseout=\"document.getElementById('df_"+list.get(i).getId()+"').style.display='none';this.className='hp_new';\"
					sb.append("<input type=\"checkbox\" id=\"df_"+list.get(i).getId()+"\" name=\"df\" style=\"display:none;\" class=\"xz_check\" value=\""+list.get(i).getId()+"\"/>");
					sb.append("<div class='hp_new' onclick=\"location.href='jcjgfzhyl_detaillist.action?groupid="+list.get(i).getId()+"';\">");
					sb.append("<a href=\"#\"><img src=\" \" alt=\"\" onerror=\"loadimage(this); \"/></a>");
					sb.append("<span>"+list.get(i).getGroupName()+"</span>");
					sb.append("</div></td>");
					if(i%5==4){
						sb.append("</tr>");
					}
				}
				//System.out.println(sb.toString());
				setAjaxData(sb.toString());
			}
		}
		
	}

java +jsp實現的點擊加載更多，實現數據的異步加載

再談23種設計模式（3）：行爲型模式（學習筆記）

Power Automate Desktop 安裝完，登錄後老是提示one driver 錯誤

微前端學習筆記(4):從微前端到微模塊之EMP與hel-micro方案探索

微前端學習筆記（1）：微前端總體架構概述，從微服務發微

985 碩士程序員，空窗 4 個月沒有 Offer！

一文搞懂 Spring 循環依賴

賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。

VScode右鍵打開(添加到右鍵)

記一次 .NET某工控視覺自動化系統卡死分析

WindowsServer--SQL Server搭建主從同步實現讀寫分離 - 事務性分發

buffer-slayer簡介

xxl-job2.2.1源碼執行器端源碼分析

buffer-slayer源碼說明

查詢最開始的登錄記錄

java +jsp實現的點擊加載更多，實現數據的異步加載

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結