2016-02-12 134 views
-1

如何在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"; 
     } 
    } 

回答

0

它的發生,因爲一個提交按鈕的默認操作是發送請求作爲一個正常的請求(不阿賈克斯)。

你必須改變你的形式:

<form onsubmit="return false;" class="navbar-form navbar-right" action="${logoutUrl}" 
        method="post"> 
        <button onclick="function_ajax_to_send_form()" class="btn btn-default" type="submit"> 
         <spring:message code="label.logoutbutton" /> 
        </button> 
        <input type="hidden" name="${_csrf.parameterName}" 
         value="${_csrf.token}" /> 
       </form> 
1

這取決於你的Spring版本。 如果你正在使用Spring 3,JQuery的,你可以做些事情是這樣的:

JSP

<%@ page language="java" contentType="text/html; charset=UTF-8" 
    pageEncoding="UTF-8"%> 
<!doctype html> 
<html lang="es" > 
<head></head> 
<body>  
    Your Name: <input type='text' id='name'> 
    <button id='send-button'>Send</button> 
    <div id='state-bar'></div> 

    <script> 
    window.onload=function() { 
       var stateBar=$("#state-bar"); 
       var name=$("#name"); 
       var sendButton=$("#send-button"); 

       sendButton.click(function(event) { 
        var parameters={ 
         name: name.val() 
        }; 

        $.ajax({ 
         type: 'POST', 
         contentType: "application/json; charset=utf-8", 
         data: JSON.stringify(parameters), 
         dataType: "json", 
         url: "myPage.htm", 
         success: function (data) { 
          stateBar.html(data.response); 
         }, error: function(data){ 
          stateBar.html("Server Error."); 
         } 
        }); 
       }); 
    } 
    </script> 
    <script src="resources/js/jquery.js"></script> 
</body> 

控制器類

package com.company.controllers; 

import org.springframework.stereotype.Controller; 
import org.springframework.web.bind.annotation.RequestBody; 
import org.springframework.web.bind.annotation.RequestMapping; 
import org.springframework.web.bind.annotation.RequestMethod; 
import org.springframework.web.bind.annotation.ResponseBody; 

@Controller 
public class TestController { 

    @RequestMapping(value="/testPage.htm",method=RequestMethod.GET) 
    public String testPage(){ 
     return "testPage"; 
    } 

    @RequestMapping(value="/myPage.htm",method=RequestMethod.POST) 
    @ResponseBody 
    public MyPageResponse myPage(@RequestBody MyPageModel myPageModel){ 
     MyPageResponse res= new MyPageResponse(); 
     res.setResponse("Your name is : "+myPageModel.getName()); 
     return res; 
    } 

} 

輸入VO

package com.company.controllers; 

public class MyPageModel { 
    private String name=""; 

    public String getName() { 
     return name; 
    } 

    public void setName(String name) { 
     this.name = name; 
    } 

} 

輸出VO

package com.company.controllers; 

public class MyPageResponse { 
    private String response=""; 

    public String getResponse() { 
     return response; 
    } 

    public void setResponse(String response) { 
     this.response = response; 
    } 
} 

的web.xml

<servlet> 
    <servlet-name>Spring MVC Dispatcher Servlet</servlet-name> 
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> 
    <init-param> 
     <param-name>contextConfigLocation</param-name> 
     <param-value>/WEB-INF/applicationContext.xml</param-value> 
    </init-param> 
    <load-on-startup>1</load-on-startup> 
    </servlet> 
    <servlet-mapping> 
    <servlet-name>Spring MVC Dispatcher Servlet</servlet-name> 
    <url-pattern>*.htm</url-pattern> 
    </servlet-mapping> 

的applicationContext.xml

<?xml version="1.0" encoding="UTF-8"?> 
<beans xmlns="http://www.springframework.org/schema/beans" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xmlns:context="http://www.springframework.org/schema/context" 
    xmlns:mvc="http://www.springframework.org/schema/mvc" 
    xmlns:tx="http://www.springframework.org/schema/tx" 
    xsi:schemaLocation=" 
     http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd 
     http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd 
     http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd 
     http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.0.xsd"> 

    <context:component-scan base-package="com.company" /> 


    <mvc:interceptors> 
    <bean id="webContentInterceptor" class="org.springframework.web.servlet.mvc.WebContentInterceptor"> 
    <property name="cacheSeconds" value="0"/> 
    <property name="useExpiresHeader" value="true"/> 
    <property name="useCacheControlHeader" value="true"/> 
    <property name="useCacheControlNoStore" value="true"/> 
    </bean> 
    </mvc:interceptors> 

    <mvc:annotation-driven /> 


    <!-- Resolves view names to protected .jsp resources within the /WEB-INF/views directory --> 
    <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver"> 
     <property name="prefix" value="/WEB-INF/views/"/> 
     <property name="suffix" value=".jsp"/> 
    </bean> 
</beans> 
+0

感謝名單的答案,但它並沒有幫助! –

+0

你試過這個例子嗎?日誌文件中是否有錯誤?可能需要一些庫。 – Rubens