1. 服务端先返回页面基本结构（如message.jsp），
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="ie ie6 lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="ie ie7 lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="ie ie8 lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="ie ie9" lang="en"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-ie">
<!--<![endif]-->
<head>
<!-- Meta-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<title>消息中心</title>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]><script src="/UploadFiles/2021-04-02/html5shiv.js">
2. example.js加载的时候，再去异步请求获取页面数据（表格、分页等），再动态创建表，分页链接等
$(function(){
initTable();
$("#searchMessage").on("click",function(){
messageSearch(pageNo);
});
//获取message列表 "pageNo" : pageNo
function initTable(){
$.ajax({
url : basePath + "page/message_list.action",
type : "get",
dataType : "json",
success : function(dataMap){
createTBody(dataMap);
createTFoot(dataMap);
},
error : function(errorData){
}
});
}
//查询message
function messageSearch(pageNo){
var searchDateStart = $("#searchDateStart").val();
var searchDateEnd = $("#searchDateEnd").val();
var startDate = new Date(searchDateStart);
var endDate = new Date(searchDateEnd);
var num = endDate - startDate;
if(num<0){
$("#searchDateEnd").val('');
swal({
title: "结束日期不能晚于开始日期",
text: "",
type: "error"
});
return false;
}
var receiver = $("#receiver").val();
$.ajax({
url : basePath + "page/message_search.action",
type : "POST",
data : {
"pageNo" : pageNo,
"searchDateStart" : searchDateStart,
"searchDateEnd" : searchDateEnd,
"receiver" : receiver
},
dataType : "json",
success : function(dataMap){
createTBody(dataMap);
createTFoot(dataMap);
},
error : function(errorData){
}
});
}
function createTBody(dataMap){
if(dataMap!=null){
var messageListPage = dataMap.messageListPage;
var html = [];
for(var i=0; i<messageListPage.length; i++){
var message = messageListPage[i];
var cTime = message.createtime.replace(/T/g," ");
html.push('<tr class="gradeX center">');
html.push('<td style="text-align:left;">'+message.content+'</td>');
html.push('<td>' + message.provider + '</td>');
html.push('<td>' + message.receiver + '</td>');
html.push('<td>' + cTime + '</td>');
html.push('<td message_id=' + message.id + '><a href="#" class="message_del btn btn-danger btn-xs"> 删除 </a></td>');
html.push('</tr>');
}
$("#message_body").empty().html(html.join(''));
}
}
function createTFoot(dataMap){
if(dataMap!=null){
startNum = dataMap.startNum;
stopNum = dataMap.stopNum;
totalCount = dataMap.totalCount;
pageNo = dataMap.pageNo;
pageSize = dataMap.pageSize;
var str = '显示 ' + startNum + '至' + stopNum + '项 ， 共' + totalCount +' 项。';
$("#message_showLines").html(str);
}
}
$('#message_body').on('click','a.message_del',function(){
var message_id = $(this).parent("td").attr("message_id");
swal({
title : "确认要删除吗",
text : "删除后将不能恢复!",
type : "warning",
showCancelButton : true,
confirmButtonColor : "#DD6B55",
confirmButtonText : "Yes, delete it!",
cancelButtonText : "No, cancel plx!",
closeOnConfirm : false,
closeOnCancel : false
}, function(isConfirm) {
if (isConfirm) {
$.ajax({
url:basePath + "page/message_del.action",
data:{
"id":message_id
},
type:"get",
dataType:"json",
success:function(dataMap){
if(dataMap!=null && dataMap.message=="success"){
swal("删除!",
"已经成功删除.",
"success");
initTable();
}else{
swal("删除!",
"删除失败.",
"error");
}
},
error : function(errorMsg){
swal("删除失败!",
errorMsg,
"error");
}
});
} else {
swal("Cancelled", "Your imaginary file is safe :)",
"error");
}
});
});
$('.tcdPageCode').extendPagination({
pageId : pageNo,
totalCount : totalCount,
showPage : 5,
limit : pageSize,
callback : function(pageNo, limit, totalCount) {
messageSearch(pageNo);
}
});
});
注意： 表格是动态创建的，其中的按钮绑定事件时，一定要先找到它的父节点（或祖先节点），再到指定节点，绑定事件
如上面的 $("#serviceRepo_body").on('click','a.record_view',function(){});
分页js插件（page.js）, 同时引入jquery-1.11.1.min.js 和 bootstrap.js
/**
* Created by Hope on 2014/12/28.
*/
(function ($) {
$.fn.extendPagination = function (options) {
var defaults = {
pageId:'',
totalCount: '',
showPage: '10',
limit: '5',
callback: function () {
return false;
}
};
$.extend(defaults, options || {});
// alert(defaults.pageId);
if (defaults.totalCount == '') {
//alert('总数不能为空!');
$(this).empty();
return false;
} else if (Number(defaults.totalCount) <= 0) {
//alert('总数要大于0!');
$(this).empty();
return false;
}
if (defaults.showPage == '') {
defaults.showPage = '10';
} else if (Number(defaults.showPage) <= 0)defaults.showPage = '10';
if (defaults.limit == '') {
defaults.limit = '5';
} else if (Number(defaults.limit) <= 0)defaults.limit = '5';
var totalCount = Number(defaults.totalCount), showPage = Number(defaults.showPage),
limit = Number(defaults.limit), totalPage = Math.ceil(totalCount / limit);
if (totalPage > 0) {
var html = [];
html.push(' <ul class="pagination">');
html.push(' <li class="previous"><a href="#">«</a></li>');
html.push('<li class="disabled hidden"><a href="#">...</a></li>');
if (totalPage <= showPage) {
for (var i = 1; i <= totalPage; i++) {
if (i == defaults.pageId) html.push(' <li class="active"><a href="#">' + i + '</a></li>');
else html.push(' <li><a href="#">' + i + '</a></li>');
}
} else {
for (var j = 1; j <= showPage; j++) {
if (j == defaults.pageId) html.push(' <li class="active"><a href="#">' + j + '</a></li>');
else html.push(' <li><a href="#">' + j + '</a></li>');
}
}
html.push('<li class="disabled hidden"><a href="#">...</a></li>');
html.push('<li class="next"><a href="#">»</a></li></ul>');
$(this).html(html.join(''));
if (totalPage > showPage) $(this).find('ul.pagination li.next').prev().removeClass('hidden');
var pageObj = $(this).find('ul.pagination'), preObj = pageObj.find('li.previous'),
currentObj = pageObj.find('li').not('.previous,.disabled,.next'),
nextObj = pageObj.find('li.next');
function loopPageElement(minPage, maxPage) {
var tempObj = preObj.next();
for (var i = minPage; i <= maxPage; i++) {
if (minPage == 1 && (preObj.next().attr('class').indexOf('hidden')) < 0)
preObj.next().addClass('hidden');
else if (minPage > 1 && (preObj.next().attr('class').indexOf('hidden')) > 0)
preObj.next().removeClass('hidden');
if (maxPage == totalPage && (nextObj.prev().attr('class').indexOf('hidden')) < 0)
nextObj.prev().addClass('hidden');
else if (maxPage < totalPage && (nextObj.prev().attr('class').indexOf('hidden')) > 0)
nextObj.prev().removeClass('hidden');
var obj = tempObj.next().find('a');
if (!isNaN(obj.html()))obj.html(i);
tempObj = tempObj.next();
}
}
function callBack(curr) {
defaults.callback(curr, defaults.limit, totalCount);
}
currentObj.click(function (event) {
event.preventDefault();
var currPage = Number($(this).find('a').html()), activeObj = pageObj.find('li[class="active"]'),
activePage = Number(activeObj.find('a').html());
if (currPage == activePage) return false;
if (totalPage > showPage) {
var maxPage = currPage, minPage = 1;
if (($(this).prev().attr('class'))
&& ($(this).prev().attr('class').indexOf('disabled')) >= 0) {
minPage = currPage - 1;
maxPage = minPage + showPage - 1;
loopPageElement(minPage, maxPage);
} else if (($(this).next().attr('class'))
&& ($(this).next().attr('class').indexOf('disabled')) >= 0) {
if (totalPage - currPage >= 1) maxPage = currPage + 1;
else maxPage = totalPage;
if (maxPage - showPage > 0) minPage = (maxPage - showPage) + 1;
loopPageElement(minPage, maxPage)
}
}
activeObj.removeClass('active');
$.each(currentObj, function (index, thiz) {
if ($(thiz).find('a').html() == currPage) {
$(thiz).addClass('active');
callBack(currPage);
}
});
});
preObj.click(function (event) {
event.preventDefault();
var activeObj = pageObj.find('li[class="active"]'), activePage = Number(activeObj.find('a').html());
if (activePage <= 1) return false;
if (totalPage > showPage) {
var maxPage = activePage, minPage = 1;
if ((activeObj.prev().prev().attr('class'))
&& (activeObj.prev().prev().attr('class').indexOf('disabled')) >= 0) {
minPage = activePage - 1;
if (minPage > 1) minPage = minPage - 1;
maxPage = minPage + showPage - 1;
loopPageElement(minPage, maxPage);
}
}
$.each(currentObj, function (index, thiz) {
if ($(thiz).find('a').html() == (activePage - 1)) {
activeObj.removeClass('active');
$(thiz).addClass('active');
callBack(activePage - 1);
}
});
});
nextObj.click(function (event) {
event.preventDefault();
var activeObj = pageObj.find('li[class="active"]'), activePage = Number(activeObj.find('a').html());
if (activePage >= totalPage) return false;
if (totalPage > showPage) {
var maxPage = activePage, minPage = 1;
// if ((activeObj.next().next().attr('class'))
// && (activeObj.next().next().attr('class').indexOf('disabled')) >= 0) {
// maxPage = activePage + 2;
// if (maxPage > totalPage) maxPage = totalPage;
// minPage = maxPage - showPage + 1;
// loopPageElement(minPage, maxPage);
// }
if ((activeObj.next().next().attr('class'))
&& (activeObj.next().next().attr('class').indexOf('disabled')) >= 0) {
maxPage = activePage + 2;
if (maxPage > totalPage) maxPage = totalPage;
minPage = maxPage - showPage + 1;
loopPageElement(minPage, maxPage);
}
}
$.each(currentObj, function (index, thiz) {
if ($(thiz).find('a').html() == (activePage + 1)) {
activeObj.removeClass('active');
$(thiz).addClass('active');
callBack(activePage + 1);
}
});
});
}
};
})(jQuery);
3.项目采用struts2， 返回json, 在struts中配置， 并在action中使用map来封装数据， 并添加get方法
struts.xml
<package name="message" namespace="/" extends="struts-default, json-default">
<action name="message_*" class="messageAction" method="{1}">
<result name="index">/WEB-INF/jsp/message.jsp</result>
<result name="success" type="json">
<param name="root">dataMap</param>
</result>
</action>
</package>
action
package com.cdv.mediastar.action;
import java.io.IOException;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.log4j.Logger;
import org.apache.struts2.ServletActionContext;
import org.apache.struts2.json.annotations.JSON;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;
import com.cdv.mediastar.model.Message;
import com.cdv.mediastar.service.MessageService;
import com.cdv.mediastar.util.PageParameter;
import com.opensymphony.xwork2.ActionSupport;
@Scope("request")
@Controller("messageAction")
public class MessageAction extends ActionSupport {
/**
*
*/
private static final long serialVersionUID = 3731009117710718470L;
private Logger logger = Logger.getLogger(MessageAction.class);
@Resource
private MessageService messageService;
Map<String, Object> dataMap = new HashMap<String, Object>();
public Map<String, Object> getDataMap() {
return dataMap;
}
public String index(){
HttpServletRequest request = ServletActionContext.getRequest();
PageParameter page = new PageParameter();
int pageNo = page.getPageNo();
int totalCount = messageService.count(null, null, null, 0);
int totalPage = totalCount%page.getPageSize()==0"page", page);
request.setAttribute("startNum", startNum);
request.setAttribute("stopNum", stopNum);
return "index";
}
public String list(){
dataMap.clear();
PageParameter page = new PageParameter();
int s = 0, max = page.getPageSize();
List<Message> messageListPage = messageService.find(null, null, null, s, max);
int totalCount = messageService.count(null, null, null, 0);
int totalPage = totalCount%page.getPageSize()==0"startNum", startNum);
dataMap.put("stopNum", stopNum);
dataMap.put("totalCount", totalCount);
dataMap.put("totalPage", totalPage);
dataMap.put("pageNo", page.getPageNo());
dataMap.put("messageListPage", messageListPage);
return "success";
}
public String del(){
dataMap.clear();
HttpServletRequest request = ServletActionContext.getRequest();
Long id = Long.parseLong(request.getParameter("id"));
int deleteFlag = messageService.delete(id);
if(deleteFlag>0){
dataMap.put("message", "success");
}else{
dataMap.put("message", "error");
}
logger.info("rockydelete message flag======"+deleteFlag);
return "success";
}
public String search() throws ParseException, IOException{
dataMap.clear();
HttpServletRequest request = ServletActionContext.getRequest();
Date from = null, to = null ;
String searchDateStart = request.getParameter("searchDateStart");
if(searchDateStart!=null && searchDateStart!="") {
from = new SimpleDateFormat("MM/dd/yyyy").parse(searchDateStart);
}
String searchDateEnd = request.getParameter("searchDateEnd");
if(searchDateEnd!=null && searchDateEnd!="") {
to = new SimpleDateFormat("MM/dd/yyyy").parse(searchDateEnd);
}
String receiver = request.getParameter("receiver");
String pageNoStr = request.getParameter("pageNo");
PageParameter page = new PageParameter();
int pageNo = page.getPageNo();
int s = 0, max = page.getPageSize();
if(pageNoStr!=null && pageNoStr!=""){
pageNo = Integer.parseInt(pageNoStr);
s = (pageNo-1)*page.getPageSize();
}
List<Message> messageListPage = messageService.find(receiver, from, to, s, max);
int totalCount = messageService.count(receiver, from, to, 0);
int totalPage = totalCount%page.getPageSize()==0"startNum", startNum);
dataMap.put("stopNum", stopNum);
dataMap.put("pageNo", pageNo);
dataMap.put("totalCount", totalCount);
dataMap.put("pageSize", page.getPageSize());
dataMap.put("searchDateStart", searchDateStart);
dataMap.put("searchDateEnd", searchDateEnd);
dataMap.put("receiver", receiver);
dataMap.put("messageListPage", messageListPage);
return "success";
}
}
以上就是小编为大家带来的jsp页面 列表 展示 ajax异步实现方法全部内容了，希望大家多多支持~
标签：
jsp,ajax,异步
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
暂无“jsp页面 列表 展示 ajax异步实现方法”评论...
一口气升级7个大模型SaaS应用，百度智能云：突出一个“开箱即用” - 2024/11/26
这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。
一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。
另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。
这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。
一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。
另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。
稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！
昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？
更新动态
2024年11月26日
2024年11月26日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]