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

Posted rocky-fang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jsp页面 列表 展示 ajax异步实现相关的知识,希望对你有一定的参考价值。

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="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script><![endif]-->
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="<%=path %>/app/css/bootstrap.css">
<!-- Vendor CSS-->
<link rel="stylesheet" href="<%=path %>/vendor/fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="<%=path %>/vendor/animo/animate+animo.css">

<!-- START Page Custom CSS-->
<!-- Data Table styles-->
<link rel="stylesheet" href="<%=path %>/vendor/datatable/extensions/datatable-bootstrap/css/dataTables.bootstrap.css">
<link rel="stylesheet" href="<%=path %>/vendor/datatable/extensions/ColVis/css/dataTables.colVis.css">
<!-- END Page Custom CSS-->
<!-- App CSS-->
<link rel="stylesheet" href="<%=path %>/app/css/app.css">
<link rel="stylesheet" href="<%=path %>/app/css/beadmin-theme-c2.css">
<link rel="stylesheet" href="<%=path %>/vendor/sweetalert/lib/sweet-alert.css" />
<link rel="stylesheet" href="<%=path %>/css/page.css"/>

<!-- Modernizr JS Script-->
<script src="<%=path %>/vendor/modernizr/modernizr.js" type="application/javascript"></script>
<!-- FastClick for mobiles-->
<script src="<%=path %>/vendor/fastclick/fastclick.js" type="application/javascript"></script>.
 <script>
    var basePath = <%=basePath %>;
    var pageNo = ${page.pageNo};
    var totalCount = ${page.totalCount};
    var totalPage = ${page>totalPage};
    var pageSize = ${page.pageSize};
</script>
</head>

<body>
<!-- START Main wrapper-->
<div class="wrapper" > 

  
  <!-- START Main section-->
  <section> 
    <!-- START Page content-->
    <div class="content-wrapper" style="margin-left:-250px;margin-top:-40px;">
      <h3>消息中心
     <!-- <div style="float:right; margin-top:5px;" class="form-group">
                  <button type="button"  onclick="$(‘#myModal‘).modal({backdrop: ‘static‘, keyboard: false});;" class="btn btn-labeled btn-success"> <span class="btn-label"><i class="fa fa-plus"></i> </span>添加</button>
                 
                </div>-->
              <small>消息管理</small>
      </h3>
      
      <!-- START panel--> 
      
      <!-- START DATATABLE 3-->
      <div class="row">
        <div class="col-lg-12">
          <div class="panel panel-default">
              <div class="panel-heading" style="border-bottom:1px solid #eee;">
              <form class="form-inline" id="searchForm" method="post" action="<%=path %>/page/messageSearch.action">
                <div class="form-group"> <b>创建时间: &nbsp;</b>
                  <div class="datetimepicker input-group date mb-lg" data-pick-time="false">
                    <input type="text" class="form-control" id="searchDateStart" name="searchDateStart" value=‘‘ disabled="disabled">
                    <span class="input-group-addon"> <span class="fa-calendar fa"></span> </span> </div>
                  <span style="margin-top:-8px;"></span>
                  <div class="datetimepicker input-group date mb-lg" data-pick-time="false">
                    <input type="text" class="form-control" id="searchDateEnd" name="searchDateEnd" value=‘‘ disabled="disabled">
                    <span class="input-group-addon"> <span class="fa-calendar fa"></span> </span> </div>
                </div>
                <div class="form-group">
                                <b>接收者:&nbsp;</b>
                                <input type="text" class="form-control mb-lg" id="receiver" name="receiver" value=‘‘>
                            </div>
                <div class="form-group"> <a style="margin:-10px 0 0 5px; float:left;" href="javascript:void(0);" class="mb-sm btn btn-primary" type="button" id="searchMessage">搜索</a> </div>
                  <input type="hidden" id="pageNo" name="pageNo" value=‘‘>
              </form>
            </div>
            <div class="table-responsive">
              <table class="table table-bordered table-hover dataTable no-footer" id="table-ext-1" >
                <thead>
                  <tr>
                    <th style="width:300px;">描述</th>
                    <th class="sorting center" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 86px;" aria-label="Rendering engine: activate to sort column ascending">发送者</th>
                    <th class="sorting center" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 86px;" aria-label="Rendering engine: activate to sort column ascending">接收者</th>
                    <th class="sorting center" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 86px;" aria-label="Rendering engine: activate to sort column ascending">创建时间</th>
                    <th class="th150 center">操作</th>  
                  </tr>
                </thead>
                <tbody id="message_body">
                
                </tbody>
                <tfoot>
                  <tr> </tr>
                </tfoot>
              </table>
            </div>
            
            <div class="panel-footer">
              <div class="row">
                <div style="line-height:35px;" class="col-lg-3">
                  <div class="input-group pull-left" id="message_showLines">  </div>
                </div>
                <div class="col-lg-9"></div>
                 <div class="tcdPageCode"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- END DATATABLE 3--> 
      
    </div>
    <!-- END Page content--> 
  </section>
  <!-- END Main section--> 
</div>
<!-- END Main wrapper--> 

<!-- START modal-->
<div id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" class="modal" >
  <div class="modal-dialog" style="width:600px;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>
        <h4 id="myModalLabel" class="modal-title">新建应用</h4>
      </div>
      <div class="modal-body" style="padding-right:20px;">
       <form method="get" action="/" class="form-horizontal">
          <fieldset>
            <div class="form-group" style="padding-bottom:5px;">
              <label class="col-sm-2 control-label">名称</label>
              <div class="col-sm-10">
                <input type="text" class="form-control">
              </div>
            </div>
             <div class="form-group" style="margin-top:10px;">
              <label class="col-sm-2 control-label">描述</label>
              <div class="col-sm-10">
                <input type="text" class="form-control">
              </div>
            </div>
            
            
            <div class="form-group" style="margin-top:10px;">
              <label class="col-sm-2 control-label">URL</label>
              <div class="col-sm-10">
                <input type="text" class="form-control">
              </div>
            </div>
            
            
            <div class="form-group" style="margin-top:5px;">
               <label class="col-sm-2 control-label">类别</label>
               <div class="col-sm-10">
                  <select class="form-control m-b" name="account">
                     <option>Web</option>
                     <option>Mobile</option>
                  </select></div>
                  </div>
                 
                  <div class="form-group" style="margin-top:5px;">
               <label class="col-sm-2 control-label">授权模式</label>
               <div class="col-sm-10">
                  <select class="form-control m-b" name="account">
                     <option>授权</option>
                     <option>不授权</option>
                  </select></div>
                  </div>
                 
                  <div class="form-group" style="margin-top:10px;">
              <label class="col-sm-2 control-label">LOGO</label>
              <div class="col-sm-10">
                <input type="button" class="form-control">
              </div>
            </div>
            
          </fieldset>
        </form>
      </div>
      
      </fieldset>
      <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
        <button type="button" class="btn btn-primary">确定</button>
      </div>
    </div>
  </div>
</div>
</div>
<div id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" class="modal">
  <div class="modal-dialog" style="width:650px;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>
        <h4 id="myModalLabel" class="modal-title">修改密码</h4>
      </div>
      <div class="modal-body">
        <form method="get" action="/" class="form-horizontal">
          <fieldset>
            <div class="form-group" style="padding-bottom:5px;">
              <label class="col-sm-2 control-label">原密码</label>
              <div class="col-sm-10">
                <input type="text" class="form-control">
              </div>
            </div>
            <div class="form-group" style="padding-bottom:5px;">
              <label class="col-sm-2 control-label">新密码</label>
              <div class="col-sm-10">
                <input type="password" name="password" class="form-control">
              </div>
            </div>
            <div class="form-group" style="padding-bottom:5px;">
              <label class="col-sm-2 control-label">确认密码</label>
              <div class="col-sm-10">
                <input type="password" name="password" class="form-control">
              </div>
            </div>
          </fieldset>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<div id="myModal3"以上是关于jsp页面 列表 展示 ajax异步实现的主要内容,如果未能解决你的问题,请参考以下文章

Ajax实现异步上传图片

ajax提交数据以后刷新当前页面,怎么实现

如何实现JSP列表升序或者降序

jsp登录页面,展示错误信息,刷新页面后错误依然存在解决方案

Query Ajax 异步加载显示等待效果

尝试使用 struts 中的 ajax 更新 jsp 页面上的内容时出现问题(触发 onChange 事件时)