如何在JSP頁面提交表單時不重新加載?這裏是用戶發送消息和AJAX腳本(它在我的jsp中)爲用戶取回所有消息。但是,當我發送消息(做POST方法)刷新我的頁面,需要一些時間來加載所有消息與AJAX。 幫助請幫助! 這是我的JSP頁面沒有刷新頁面的POST方法。 Spring MVC。 JAVA。 JSP
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/security/tags"
prefix="security"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Сообщения | Haine and Vold</title>
<link rel="shortcut icon" href="<c:url value="/resources/faviicon/iconHV.ico"/>" type="image/x-icon">
<link href="<c:url value="/resources/bootstrap/bootstrap.css"/>"
rel="stylesheet" type="text/css">
<link href="<c:url value="/resources/CSS/styles.css"/>" rel="stylesheet"
type="text/css">
<link href="<c:url value="/resources/CSS/tableMessFixedHeader.css"/>" rel="stylesheet"
type="text/css">
<script src="<c:url value="/resources/Angular/angular.min.js"/>"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Haine and Vold</a>
</div>
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-expanded="false"><spring:message
code="label.menuprofile" /><span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="/haine/user"><spring:message
code="label.menuprofile" /></a></li>
<li><a href="/haine/user/updateinfo"><spring:message
code="label.menusettinginfo" /></a></li>
</ul></li>
<li><a href="/haine/user/messages"><spring:message
code="label.menumessages" /> (${allUserMess})</a></li>
<li><a href="/haine/user/search"><spring:message
code="label.menusearch" /></a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-expanded="false"><spring:message
code="label.menuinformation" /><span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="/haine/user/rules"><spring:message
code="label.menurules" /></a></li>
<li class="divider"></li>
<li><a href="/haine/user/feedback"><spring:message
code="label.menusendfeedback" /></a></li>
</ul></li>
<security:authorize ifAnyGranted="ROLE_ADMIN">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-expanded="false"><spring:message
code="label.menuadministration" /><span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="/haine/admin"><spring:message
code="label.menuadminpanel" /></a></li>
<li><a href="/haine/admin/feedbacklist"><spring:message
code="label.menufeedbacks" />(${countOfFeedbacks})</a></li>
<li><a href="/haine/admin/newusers"><spring:message
code="label.newusers" />(${countOfNewUsers})</a></li>
</ul></li>
</security:authorize>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="?locale=ru"><img
src="<c:url value="/resources/languageicons/rus.png"/>"
alt="Russian Language" title="Сменить язык интерфейса на русский"></a>
</li>
<li><a href="?locale=en"><img
src="<c:url value="/resources/languageicons/usa.png"/>"
alt="USA Language" title="Change interface language to american"></a>
</li>
</ul>
<c:url var="logoutUrl" value="/j_spring_security_logout" />
<form class="navbar-form navbar-right" action="${logoutUrl}"
method="post">
<button class="btn btn-default" type="submit">
<spring:message code="label.logoutbutton" />
</button>
<input type="hidden" name="${_csrf.parameterName}"
value="${_csrf.token}" />
</form>
</div>
</div>
</nav>
<div class="container">
<img class="img-responsive logo" src="/haine/resources/logo.jpg">
</div>
<br>
<div class="scrollTableMessages" id="mess">
</div>
<form:form method="POST" modelAttribute="message"
accept-charset="utf-8" ng-app="vandh" ng-controller="validateCtrl"
name="messageForm" novalidation="true">
<form:textarea path="text" class="form-control" rows="1"
id="message" ng-model="message" required="true"></form:textarea>
<div style="color: black"
ng-show="messageForm.message.$dirty && messageForm.message.$invalid">
<span ng-show="messageForm.message.$error.required"><spring:message
code="label.entermessage" /></span>
</div>
<br>
<div class="text-center">
<button class="btn btn-success" type="submit"><spring:message
code="label.sendmessage"/></button>
</div>
</form:form>
<script>
var app = angular.module('vandh', []);
app.controller('validateCtrl', function($scope) {
$scope.message = '';
});
</script>
</body>
<script src="<c:url value="/resources/Jquery/jquery-2.1.4.min.js"/>"
type="text/javascript"></script>
<script src="<c:url value="/resources/bootstrap/bootstrap.js"/>"
type="text/javascript"></script>
<script>
</script>
<script>
var oldC = 0, newC = -1;
function getMessages() {
$.ajax({
type : 'GET',
url : '/haine/user/countofmess/${iddialog}',
success : function(rs)
{
newC = rs;
if(oldC != newC)
{
$.ajax({
type : 'GET',
url : '/haine/user/mess/${iddialog}',
success : function(r)
{
$('#mess').html(r);
document.getElementById("mess").scrollTop = 9999;
console.log(r);
},
error : function(r) {
alert(r);
}
});
oldC = newC;
}
},
error : function(rs) {
alert(rs);
}
});
}
setInterval(getMessages, 1000);
</script>
</html>
這是我的控制器
@RequestMapping(value = "/user/messages/{iddialog}", method = RequestMethod.POST)
public String messages(@ModelAttribute("message") Message message, @RequestParam(value = "text") String text,
@PathVariable(value = "iddialog") int iddialog, Model model, Principal principal) {
if(checkingMessage(text)!=true)
{
sendMessage(iddialog, text, principal.getName());
System.out.println("message sent!");
return "messagesWithUser";
}
else
{
return "redirect:/user/messages";
}
}
感謝名單的答案,但它並沒有幫助! –
你試過這個例子嗎?日誌文件中是否有錯誤?可能需要一些庫。 – Rubens