jsp页面列表展示ajax异步实现教程

来源：爱站网时间：2021-07-01编辑：网友分享

最近有朋友在讨论关于jsp页面列表展示ajax异步要怎么去实现的话题，今天爱站技术频道小编将会为大家带来这个jsp页面列表展示ajax异步实现的具体教程，给大家做个参考，一起来翻看下文吧。

1. 服务端先返回页面基本结构（如message.jsp），

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');
        html.push(''+message.content+'');
        html.push('' + message.provider + '');
        html.push('' + message.receiver + '');
        html.push('' + cTime + '');
        html.push(' 删除 ');
        html.push('');
      }
      $("#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) {
      var html = [];
      html.push('

' + i + '

' + i + '

' + j + '

' + j + '
...
»

'); $(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 1 && (preObj.next().attr('class').indexOf('hidden')) > 0) preObj.next().removeClass('hidden'); 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 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

/WEB-INF/jsp/message.jspdataMap

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 dataMap = new HashMap();
  
  public Map 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?totalCount/page.getPageSize():totalCount/page.getPageSize()+1;
    int startNum = 1, stopNum = 1;
    startNum = (pageNo-1)*page.getPageSize()+1;
    if((startNum+page.getPageSize()-1) messageListPage = messageService.find(null, null, null, s, max);
    int totalCount = messageService.count(null, null, null, 0);
    int totalPage = totalCount%page.getPageSize()==0?totalCount/page.getPageSize():totalCount/page.getPageSize()+1;
    page.setTotalCount(totalCount);
    page.setTotalPage(totalPage);
    int startNum = 0, stopNum = 0;
    startNum = 1;
    if((startNum+page.getPageSize()-1)0){
      dataMap.put("message", "success");
    }else{
      dataMap.put("message", "error");
    }
    logger.info("rocky>>>>>>>>>>>>delete 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 messageListPage = messageService.find(receiver, from, to, s, max);
    int totalCount = messageService.count(receiver, from, to, 0);
    int totalPage = totalCount%page.getPageSize()==0?totalCount/page.getPageSize():totalCount/page.getPageSize()+1;
    int startNum = 0, stopNum = 0;
    startNum = (pageNo-1)*page.getPageSize()+1;
    if((startNum+page.getPageSize()-1)

以上就是爱站技术频道小编讲解的关于jsp页面列表展示ajax异步实现教程的文章内容，如果对JSP编程的相关资讯及教程感兴趣的朋友们，请关注爱站技术频道小编。

jsp页面列表展示ajax异步实现教程

消息中心消息管理

您可能感兴趣的文章

相关阅读

热门软件源码

最新软件源码下载

jsp页面列表展示ajax异步实现教程

消息中心 消息管理

您可能感兴趣的文章

相关阅读

热门软件源码

最新软件源码下载

消息中心消息管理