jsp页面列表展示 ajax异步实现方法

网络编程 2024/11/16 佚名

3 1 2

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">&nbsp;删除&nbsp;</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="#">&laquo;</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="#">&raquo;</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,异步

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“jsp页面列表展示 ajax异步实现方法”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

2024年11月16日

jsp页面列表展示 ajax异步实现方法

纯JSP实现的简单登录示例

jsp中自定义Taglib详解

评论“jsp页面列表展示 ajax异步实现方法”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

jsp页面 列表 展示 ajax异步实现方法

纯JSP实现的简单登录示例

jsp中自定义Taglib详解

评论“jsp页面 列表 展示 ajax异步实现方法”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

jsp页面列表展示 ajax异步实现方法

评论“jsp页面列表展示 ajax异步实现方法”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存