通过本文主要向大家介绍了ajax实现jsp页面表格,jsp页面ajax,jsp ajax,jsp ajax实例,jsp ajax局部刷新等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.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="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>创建时间: </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>接收者: </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="myModa