2017-12-04 2 views
1

jsp 페이지에서 아약스 컨트롤러로 데이터를 보내려고합니다. 그러나 나는 그것을 끝내지 않으며 때마다 나는 포스트의 제목에서 보여지는 오류를 얻는다.XHR로드 실패 : POST java spring

JSP 내용 : (이것은 내가 내 컨트롤러에 내 사용자 ID와 내 현재 프로젝트 ID를 모두 보내 내가 프로젝트에 추가하려면, 내 모든 사용자를로드 내 모달)

<div class="modal fade" id="myModal" role="dialog"> 
     <div class="modal-dialog"> 
      <!-- Modal content--> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
        <h4 class="modal-title"></h4> 
       </div> 
       <div class="modal-body"> 
        <h1 class="text-center">UserList</h1> 
        <br><br> 
        <table class="table table-hover"> 
         <thead> 
          <tr> 
           <th>Photo</th> 
           <th>Firstname</th> 
           <th>Lastname</th> 
           <th>Function</th> 
           <th>Email</th> 
          </tr> 
         </thead> 
         <tbody> 
          <c:forEach var="u" items="${users}"> 
           <tr> 
            <td><img src="${u.getPhoto()}" 
              alt="Alternate Text" class="img-responsive" /></td> 
            <td>${u.getFirstname()}</td> 
            <td>${u.getLastname()}</td> 
            <td>${u.getFunction()}</td> 
            <td>${u.getEmail()}</td> 
            <td><Button type="Button" onclick="myFunction()" id="addButton" class="btn btn-default">Add</button></td> 
          <input type="hidden" id="currentProjectId" value="${p.getProjectId()}"> 
          <input type="hidden" id="userId" value="${u.getUserId()}"> 
          </tr> 
         </c:forEach> 
         </tbody> 
        </table> 

        <script> 
         function myFunction() 
         { 
          var currentProjectId = $('#currentProjectId').val(); 
          var userId = $('#userId').val(); 

          $.ajax({ 
           type: "POST", 
           contentType: "application/json", 
           url: "addUserToProject", 
           data: JSON.stringify({projectId: currentProjectId, userId: userId}), 
           dataType: 'json', 
           timeout: 600000, 
           success: function (data) { 
            console.log("SUCCESS: ", data); 
           }, 
           error: function (e) { 
            console.log("ERROR: ", e); 
           } 
          }); 
         } 
        </script> 

       </div> 
      </div> 
     </div> 
    </div> 

컨트롤러 내용 :

@RequestMapping(value = "/addUserToProject", method = RequestMethod.POST) 
public @ResponseBody 
String addUser(@RequestParam("projectId") String projectId, @RequestParam("userId") String userId) { 

    UUID uid = UUID.fromString(userId); 
    UUID pid = UUID.fromString(projectId); 
    User u = UserList.getInstance().readUserById(uid); 
    Project p = ProjectList.getInstance().readProjectByID(pid); 

    ProjectList.getInstance().addUsertoProject(u, p); 
    return "redirect:/projectpage"; 
} 

지금 얻을 결과는 다음과 같습니다 Console output

내가 잘못 여기서 뭐하는 거지? 어떤 도움이라도 대단히 감사하게 될 것입니다!

url: "/addUserToProject?projectId=" + currentProjectId + "&userId=" + userId; 

을 그리고 당신의 아약스 게시물에서 '데이터'섹션을 제거하는 것을 잊지 마세요 :

+1

'$ .ajax.data'에서 POST * body *를 설정했지만'@ RequestParam'에서 POST * 매개 변수 *를 예상하고 있습니다. – kryger

+0

Thnks! 어떻게해야 제대로 할 수 있겠 어? 응답을위한 –

답변

1

당신은 당신이 같은 게시하고자하는 URL에 매개 변수를 전달해야한다.

추 신 : ajax 요청에서 '데이터'를 사용하려면 Java 메소드에서 @RequestParam 주석을 제거해야합니다. 대신 새 모델 클래스를 만들고 getter 및 setter 메서드와 함께 매개 변수를 넣을 수 있습니다. 해당 모델을 @RequestBody 주석을 사용하여 Java 메소드에 전달하십시오. 그런 다음 아약스 요청에서 "데이터"를 사용할 수 있습니다.

+0

thnks! URL에 매개 변수를 전달할 수 있지만 새 페이지를 열고 싶지 않습니다. –

+0

@RequestBody를 시도하면 "지원되지 않는 미디어"에 대한 415 오류가 발생합니다. –