jquery ajax配合SpringMVC實現區域性重新整理DIV

阿新 • • 發佈：2019-02-09

<%@ page language="java"import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
String imgPath = request.getParameter("imgPath") == null ? ""
: request.getParameter("imgPath").toString().trim();
System.out.println(imgPath);
%>
<!DOCTYPE HTML>
<html class="no-js">
<head>
<base href="<%=basePath%>"

>
<title>反饋資訊</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css"
href="<%=basePath%>bootstrap-3.2.0-dist/css/bootstrap.css"></link>
<link rel="stylesheet"
href="<%=basePath%>bootstrap-3.2.0-dist/css/bootstrap-theme.css"
type="text/css"></link>
<script type="text/javascript" src="<%=basePath%>bootmetro/js/jquery-1.10.0.min.js"></script>
<script src="<%=basePath%>bootmetro/js/modernizr-2.6.2.min.js"></script>
<script type="text/javascript"
src="<%=basePath%>js/jquery-1.11.1.min.js"></script>
<script src="<%=basePath%>bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
<style type="text/css">
.footer {
position: absolute;
bottom: 0;
width: 100%;
/*margin-left:-40px;*/
/* Set the fixed height of the footer here */
height: 60px;
background-color: #2F2F2F;/*#f5f5f5;*/
}
body{
/*padding:50px;*/
}
.footer>.container {
padding-right: 15px;
padding-left: 15px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container" style="line-height:50px;">
<div style="text-align: center;">
<a style="color:white;font-size: 18px;text-decoration: none">反饋資訊</a>
</div>
</div>
</nav>
<div class="container" style="margin-top:20px;padding:50px">
<div class="row-fluid">
<div id="flushDIV"class="col-xs-12 col-sm-12 col-md-12" style="box-shadow:0 0 10px #666666;border-radius:8px;">
<table class="table table-hover" style="text-align: center;table-layout: fixed;">
<thead>
<tr>
<th style="text-align: center;">郵箱地址</th>
<th style="text-align: center;">裝置ID</th>
<th style="text-align: center;">電話號碼</th>
<th style="width:200px; text-align: center;">正文</th>
<th style="text-align: center;">時間</th>
</tr>
</thead>
<c:forEach items="${page.datas}" var="utcFeedback" varStatus="vs">
<tr id="${utcFeedback.deviceId }">
<td>${utcFeedback.email }</td>
<td>${utcFeedback.deviceId }</td>
<td>${utcFeedback.phoneNo }</td>
<!--
<td><a data-toggle="modal" data-target=".bs-example-modal-sm" href="javascript:void(0)">${utcFeedback.content }</a></td>
-->
<td>${utcFeedback.content }</td>
<td>${utcFeedback.opTimer }</td>
</tr>
</c:forEach>
<tr>
<td colspan="5">
<c:if test="${page.totalCount > 0}">
<c:choose>
<c:when test="${page.pageNo == 1}">
<a style="text-decoration: none">首頁</a>
<a style="text-decoration: none">上一頁</a>
</c:when>
<c:otherwise>
<a href="javascript:doPage(1);">首頁</a>
<a href="javascript:doPage(${page.upPage});">上一頁</a>
</c:otherwise>
</c:choose>
<c:choose>
<c:when test="${page.pageNo == page.totalPage || page.totalPage == 0}">
<a style="text-decoration: none">下一頁</a>
<a style="text-decoration: none">末頁</a>
</c:when>
<c:otherwise>
<a href="javascript:doPage(${page.nextPage});">下一頁</a>
<a href="javascript:doPage(${page.totalPage});">末頁</a>
</c:otherwise>
</c:choose>
<a style="text-decoration: none">當前第${page.pageNo}頁</a>
<a style="text-decoration: none">共${page.totalPage}頁</a>
</c:if>
<a style="text-decoration: none">共${page.totalCount}條資料</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="footer">
<div class="container">
</div>
</div>
<script type="text/javascript">
function doPage(n){
$('#flushDIV').html("");
$.ajax({
type:"POST",
url:"<%=basePath%>apps/queryFeedBackInfo.do",
data:{pageNo:n},
dataType: "html", //返回值型別使用json的話也可以，但是需要在JS中編寫迭代的html程式碼，如果格式樣式
cache:false,
success:function(data){
//var json = eval('('+msg+')');//拼接的json串
$('#flushDIV').html(data);
},
error:function(error){alert(error);}
});
}
</script>
</body>
</html>

conroller(具體DAO和Page類省略):

/**
* 顯示不同頁碼的反饋資訊
* @param request
* @param response
* @return
* @throws Exception
*/
@RequestMapping(value="/queryFeedBackInfo")
public ModelAndView queryFeedBackInfo(HttpServletRequest request,HttpServletResponse response)throws Exception{
UtcFeedbackDao utcFeedbackDao = new UtcFeedbackDao();
int currentPage = request.getParameter("pageNo")==null?1:request.getParameter("pageNo").toString().trim()==""?1:Integer.parseInt(request.getParameter("pageNo").toString().trim());
Pagination<UtcFeedback> page = null;//分頁幫助類
page = utcFeedbackDao.findByCondition(currentPage,pagesize);
HashMap map = new HashMap();
map.put("page", page);
returnnew ModelAndView("app/temp",map);
}

temp.jsp:

<%@ page language="java"import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'temp.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<table class="table table-hover" style="text-align: center;table-layout: fixed;">
<thead>
<tr>
<th style="text-align: center;">郵箱地址</th>
<th style="text-align: center;">裝置ID</th>
<th style="text-align: center;">電話號碼</th>
<th style="width:200px; text-align: center;">正文</th>
<th style="text-align: center;">時間</th>
</tr>
</thead>
<c:forEach items="${page.datas}" var="utcFeedback" varStatus="vs">
<tr id="${utcFeedback.deviceId }">
<td>${utcFeedback.email }</td>
<td>${utcFeedback.deviceId }</td>
<td>${utcFeedback.phoneNo }</td>
<td>${utcFeedback.content }</td>
<td>${utcFeedback.opTimer }</td>
</tr>
</c:forEach>
<tr>
<td colspan="5"><c:if test="${page.totalCount > 0}">
<c:choose>
<c:when test="${page.pageNo == 1}">
<a style="text-decoration: none">首頁</a>
<a style="text-decoration: none">上一頁</a>
</c:when>
<c:otherwise>
<a href="javascript:doPage(1);">首頁</a>
<a href="javascript:doPage(${page.upPage});">上一頁</a>
</c:otherwise>
</c:choose>
<c:choose>
<c:when
test="${page.pageNo == page.totalPage || page.totalPage == 0}">
<a style="text-decoration: none">下一頁</a>
<a style="text-decoration: none">末頁</a>
</c:when>
<c:otherwise>
<a href="javascript:doPage(${page.nextPage});">下一頁</a>
<a href="javascript:doPage(${page.totalPage});">末頁</a>
</c:otherwise>
</c:choose>
<a style="text-decoration: none">當前第${page.pageNo}頁</a>
<a style="text-decoration: none">共${page.totalPage}頁</a>
</c:if> <a style="text-decoration: none">共${page.totalCount}條資料</a>
</td>
</tr>
</table>
</body>
</html>

jquery ajax配合SpringMVC實現區域性重新整理DIV

<%@ page language="java"import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="

ajax非同步載入實現區域性重新整理

這是用jquery進行資料互動<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-2.1.0.js"></script> <scri

前端jquery 後端 thinkphp 實現區域性重新整理

本例用jquery 實現通過把一個標籤的變數傳遞給後臺處理後，然後返回給前臺另外一個變數大致流程是這樣的：前端編寫html程式碼，加入要區域性重新整理的 jquery程式碼並指定要響應的url，首先得知道 jquery 是 javascript 的一個框架接著

SpringMVC配合EL表示式以及AJAX實現區域性重新整理

現在專案使用的是SpringMVC,前臺通過EL表示式取值展現，現在前臺頁面點選查詢按鈕時需要非同步重新整理列表內容。傳統方式就是拼接HTML返回，無論是後臺返回和前臺拼接方式都不是很好，標籤如果過多排錯，修改都很麻煩。可以採用如下的方式進行動態重新整理：如下是需要展現以

jquery load()方法實現區域性重新整理，多張網頁切換（li標籤實現上下頁的切換）

---學習借鑑中--- （1）父頁面插入的位置 <div id="content" > //id為要重新整理顯示的子頁面的內容 </div> （2）父頁面顯示標籤切換不同html頁面 <ul class="userMenu"> <li

jquery實現區域性重新整理Iframe

1，reload 方法，該方法強迫瀏覽器重新整理當前頁面。　　語法：location.reload([bForceGet]) 　　引數： bForceGet，可選引數，預設為 false，從客戶端快取裡取當前頁。true, 則以 GET 方式，從服務端取最新的頁面,

jquery通過ajax在jsp中區域性重新整理頁面

在jquery中ajax的呼叫已經非常方便了。也提供了一些新的呼叫方式。這裡有兩個在jsp中區域性重新整理頁面的例子。一種是json返回內容再拼接 html 一種是直接返回一個jsp 到另一個jsp中這裡的框架用的是springMVC 其它框架類推 js

Ajax實現區域性重新整理和非同步處理簡單應用（實現簡單註冊驗證）

4.//從資料庫中查詢相應欄位並反饋給servlet 部分 @SuppressWarnings({ "unused", "null" }) public User find(String name){ List<Map<String,Object>> lists=new Arra

Highcharts：bar折線圖+jQuery+Ajax+json+springMVC

Highcharts：純JavaScript圖表庫 bar折線圖，統計報表 Highcharts 上圖是成品。首先，匯入highcharts的資原始檔。再然後，在html中定義一個div層

Vue.js 通過jQuery ajax獲取資料實現更新後重新渲染頁面

1. 引入jquery和vue.js <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script

hexo next主題深度優化之加入pjax，實現區域性重新整理，讓我們的部落格上高速公路吧~~~~

特別宣告：看不懂沒關係，往下讀，因為我寫的邏輯可能不是很清晰~ 本人原始碼在github上實在不懂的 git clone自己扣一扣，github在部落格中有連線本人部落格mmmmmm.me 背景：我有強迫症，遇到好的東西就想給自己整上去，在這裡想忠誠的奉勸大家一句，不要再搭

jquery ajax+mysql+php實現資料庫驗證使用者名稱是否存在

總共需要兩個頁面和一個名為test的資料庫，裡頭有一個名為bbs的表： nameExisit.php（使用者前端頁面當然也可以寫成html頁面） reg.php （用於處理資料的後臺頁面） nameExisit.php <!DOCTYP

easyUI dataGrid頁面實現區域性重新整理

我們在修改狀態的時候往往希望是點選一個按鈕，然後狀態改變其他東西不變，其實很簡單使用ajax提交資料，成功後加上一句話就可以了。 $('#teacherDataGrid').datagrid('r

React實現區域性重新整理

【專案結構】流程：入口檔案 -> 路由 -> layout -> Analysi/Monitor/Workspace 1.入口檔案 -> src/index.js 2.元件 -> src/coms 3.佈局 -> src/layout 4.路由

使用Ajax和JSP實現無重新整理的登入頁面

JSP頁面程式碼： $(document).ready(function () { $("button").click(function () { $.post("/untitled/Servlet"

利用iframe實現區域性重新整理

利用iframe來實現註冊 1.reg.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w

Android開發---ListView實現區域性重新整理及刪除

1.行佈局,及簡單的點選控制元件重新整理Activity程式碼public class MainActivity extends Activityimplements IControl { private ArrayList<MyListEntity> l

實現區域性重新整理的三種方法

1、 AJAX主要應用到的是區域性重新整理。也就是當頁面上的摸一個標籤內容需要重新整理，為了不引起整個頁面的回發，通常利用AJAX來解決。 2、獲取其他網頁的內容。當本頁內容基於其他網站時（例如天氣預報），通常也使用AJAX+正則表示式的方法，從外網截獲自己需要的內容。

php通過iframe實現區域性重新整理

reg.html reg.html頁面中有個iframe標籤，通過iframe去請求php校驗使用者名稱是否可用。 <!DOCTYPE html> <html> <h

Timer和UpdatePanel實現區域性重新整理

1.將Timer放在UpdatePanel裡面和外面實現的重新整理效果大不一樣。 A.如果放在裡面，將看不到重新整理效果，很贊，而且正在進行的js程式碼不會因為重新整理而毀滅掉，比如說，我在頁面彈出另一個頁面，重新整理的時候，這個頁面還是彈出的，不會重重新整理。 B.如果放

jquery ajax配合SpringMVC實現區域性重新整理DIV

相關推薦