XHRの読み込みに失敗しました：POST java spring

Question

jspページからajaxを使用してコントローラにデータを送信しようとしています。 しかし、私はそれが完了し、私は投稿のタイトルに表示されるエラーを取得することはできません。

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

私はここで間違って何をしているのですか？どんな助けも非常に高く評価されるでしょう！

Answer 1

次のような、あなたが投稿したいURLにパラメータを渡す必要があります。

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

そして、あなたのAjaxのポストからの「データ」セクションを削除することを忘れないでください。

PS：ajaxリクエストで 'data'を使用する場合は、Javaメソッドから@RequestParam注釈を削除する必要があります。代わりに、新しいモデルクラスを作成し、getterメソッドとsetterメソッドとともにパラメータを配置することができます。そのモデルを@RequestBodyアノテーションを使用してJavaメソッドに渡します。次に、ajaxリクエストで "data"を使用することができます。