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

网络编程 2024/9/20 佚名
3 2 1
无为清净楼资源网 Design By www.qnjia.com
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,异步
标签：
jsp,ajax,异步

无为清净楼资源网 Design By www.qnjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
评论“jsp页面列表展示 ajax异步实现方法”

暂无评论...
www.qnjia.com 无为清净楼资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源
更新日志

2024年09月20日
jsp页面列表展示 ajax异步实现方法

jsp,ajax,异步

纯JSP实现的简单登录示例

jsp中自定义Taglib详解

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

更新日志

友情链接

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

jsp,ajax,异步

纯JSP实现的简单登录示例

jsp中自定义Taglib详解

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

更新日志

友情链接

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

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