ajax在春季啓動應用POST請求

Question

我想在沒有導航或刷新頁面的服務器上執行操作。據我所知，我需要使用AJAX調用。 我試過兩種方法，但遇到問題。

Controller版本1：

@RequestMapping(value = "/vote", params = {"match","player", "voteValue"}, method = RequestMethod.POST) 

       public @ResponseBody String voteup(@RequestParam("match") int match, @RequestParam("player") int player, @RequestParam("voteValue") int voteValue){ 

       voteService.save(match, player, voteValue); 
       String returnText = "Vote has been recorded to the list"; 
       return returnText; 

       } 

Controller版本2：

@RequestMapping(value = "/vote", method = RequestMethod.POST, produces = MediaType.APPLICATION_JSON_VALUE, consumes = MediaType.APPLICATION_JSON_VALUE) 
    public String voteup(@RequestBody Vote vote ){ 
     vote.getMatch(); 

       //voteService.save(match, player, voteValue); 
      String returnText = "Vote has been recorded to the list"; 
      return returnText; 
    } 

JSP：

<c:if test = "${not empty matchform.lineup }"> 
           <c:forEach var="lineup" items="${matchform.lineup}"> 

            <c:if test = "${lineup.team.apiTeamId eq matchform.homeTeam.apiTeamId}"> 
            <hr>${lineup.player_name} - ${lineup.position} 
              <form action="/vote" method=post id = vote-form> 
               <button class="btn btn-xs btn-primary btn-block" type="submit" >Vote Up</button> 
               <input type="hidden" id = match name="match" value="${lineup.matchId.id}" /> 
               <input type="hidden" id = player name="player" value="${lineup.player.id}" /> 
               <input type="hidden" id = voteValue name="voteValue" value="1" />           
              </form> 
              <form action="/vote" method=post id = vote-form1> 
               <button class="btn btn-xs btn-primary btn-block" type="submit" >Vote down</button> 
               <input type="hidden" name="match" value="${lineup.matchId.id}" /> 
               <input type="hidden" name="player" value="${lineup.player.id}" /> 
               <input type="hidden" name="voteValue" value="0" />           
              </form> 
            </c:if>    
           </c:forEach>    
          </c:if> 

...和JS

jQuery(document).ready(function($) { 
     $("#vote-form").submit(function(event) { 

      // Prevent the form from submitting via the browser. 
      event.preventDefault(); 
      voteViaAjax(); 

     }); 
    }); 

    jQuery(document).ready(function($) { 
     $("#vote-form1").submit(function(event) { 

      // Prevent the form from submitting via the browser. 
      event.preventDefault(); 
      voteViaAjax(); 

     }); 
    }); 


    function voteViaAjax() { 

     var match = $('#match').val(); 
     var player = $('#player').val(); 
     var voteValue = $('#voteValue').val(); 
     var vote = {"player" : player, "match" : match, "voteValue": voteValue}; 


     var token = $("meta[name='_csrf']").attr("content"); 
     var header = $("meta[name='_csrf_header']").attr("content"); 

     $.ajax({ 
      type : "POST", 
      contentType : "application/json", 
      beforeSend: function(xhr) { 
       xhr.setRequestHeader(header, token) 
       }, 
      url : "/vote", 
      data : JSON.stringify(vote), 
      dataType : 'json', 
      timeout : 100000, 
      success : function(data) { 
       console.log("SUCCESS: ", data); 
       $('#info').html(data); 
      }, 
      error : function(e) { 
       console.log("ERROR: ", e); 

      }, 
      done : function(e) { 
       console.log("DONE"); 
      } 
     }); 
    } 

與控制器的版本1我收到錯誤的問題：

「」 狀態 「：400，」 錯誤 「：」 壞 請求 「 」異常「：」 org.springframework.web.bind .UnsatisfiedServletRequestParameterException「‘消息’：‘參數 條件\’的比賽，球員，voteValue \」不符合實際要求 參數：」

第二控制器我不能使用，因爲我的比賽和球員的對象，我發現只有如何發送字符串值作爲投票對象的一部分。

謝謝大家提前!!!!!

Answer 1

您需要混合兩個控制器。

控制器方法需要有@ResponseBody，所以響應是序列化的，也許你想發回一個對象而不是字符串。在Spring中，如果一個控制器返回一個沒有@ResponseBody的字符串，那麼該字符串標識要轉發的「View」。

JavaScript是發送一個JSON對象，所以你應該有@RequestBody，像控制器2.

如果控制器僅用於休息終點，你應該考慮使用@RestController註解，它會自動添加@RequestBody ，@ResponseBody，併產生/使用語義到您的控制器方法。

我在Java上比JavaScript好得多，所以我通常使用PostMan測試我的服務，或者編寫一個測試。一旦我知道了Json應該看起來如何，我會編寫JavaScript，如果我收到錯誤，我會檢查瀏覽器使用開發人員工具發送的內容。

就我個人而言，在過去的13年裏我寫了很多JSP應用程序。我不是前端開發人員，但在過去的兩年中，我已經構建了一些內部應用程序來幫助我們的開發團隊。今天我會選擇Angular（JS）用於任何需要ajax功能的應用程序（唯一的服務器端邏輯是讓你的spring模型進入JS變量）。如果我需要構建一個使用服務器端渲染的應用程序，我不會使用JSP，那麼我會使用Tymeleaf。