Ajaxの部分のバネとPOSTメソッドでリフレッシュしてthymealf

Question

私は部分的upating私のページに問題があります。私は、ビジネス上の問題を説明し、いくつかのsenstencesで 。私は彼が自分自身について などのスキル、個人情報、メイン写真写真Galerryを任意の情報を変更することができ、ユーザープロファイルを持っています。 すべての作業罰金、しかし、私は考えて迷惑なものを持って、私は正確に

<div th:fragment="photoDiv"> 
    <img id="mainPhoto" th:src="@{/profile/main/img}" alt=""/> 
     <div > 
     <form id="mainPhotoForm" action="#"th:action="@{/profile/main/upload}" 
      enctype="multipart/form-data" method="post"> 
       <label for="files" ><img src="../../img/plus.png"/> Upload photo</label> 
       <input id="files" style="display:none;" type="file" accept='image/*'th:name="img" onchange="document.getElementById('mainPhotoForm').submit();"/> 

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

は私のコントローラは

@PostMapping("/profile/main/img") 
    public String uploadingMianPhoto(@RequestParam("img") MultipartFile file, @ModelAttribute("userDto") userDto user) { 
     String path = filesStrorage.storeFiles(file, getCurrentUserID()); 
     if(!path.isEmpty()) { 
      Photo mainPhoto = new Photo(); 
      mainPhoto.setFileName(file.getOriginalFilename()); 
      mainPhoto.setPath(path); 
      user.setProfilePhoto(mainPhoto); 
     } 

      return "/profile/edit"; 
    } 

/** 
* Load mian photo 
**/ 
    @RequestMapping(value="/profile/main/upload") 
    public @ResponseBody 
    byte[] mainPhotoResponse(@ModelAttribute("userDto") UserDto user) throws IOException { 

     Path path = Paths.get(user.getProfilePhoto().getPath()); 
     return Files.readAllBytes(path); 
    } 

は私が唯一の希望の追加メインの写真を表示

ファーストを追加するなどの写真の後に私のページ全体のリフレッシュ私はアヤックスの断片の更新を試してみました

ないページ全体th:fragment="photoDiv"更新しかし、私はスプリンガーパを追加する必要があり、春のWebflowを使用してはいけませんgウェブローの設定か、jqueryでこれを行うことができますか？

だから後

私はuploadingMianPhoto return "/profile/edit :: photoDiv"に追加することをしようとしますが、それだけで私の全体のページに私にちょうどこのフラグメントを返し

いくつかの説明の言葉

を魔女、私はAjaxのポスト機能の一部exaplesを教えてください

Answer 1

はい、あなたはjQueryのことでこれを実現することができます。私はそうすることができましたが、それはいくつかの余分なJavaScriptの努力が必要でした。簡単な例を使って、私がそのようなケースをどのように解決するかという一般的な考えを示します。まず

は、我々は転送するためにいくつかのオブジェクトを持っていると仮定してみましょう。特にない。

SomeDto.java

public class SomeDto { 

    private String fieldA; 
    private String fieldB; 

    // Getters and Setters 
} 

第二に、のは、そうするように、ポスト機能といくつかの標準コントローラを持ってみましょう。通常よりも「余分」を追加した2つのことは、jsonリクエストの本文の内容を受け取り、フラグメントを返すことでした。

SomeController.class

@RequestMapping(path = "/some/endpoint", 
       method = ReqestMethod.POST, 
       consumes = "application/json; charset=utf-8") 
public String postSomeData(@RequestBody SomeDto someDto) { 

    // some action on passed object 

    return "some/view :: some-fragment" 
} 

その後、我々はフラグメントとhtmlファイルを持っています。ここでのトリックは、データを非同期的にjQuery ajaxを介してポストし、レスポンスを待ってフラグメントをこのレスポンスに置き換えることです（再レンダリングされたフラグメントを受け取る必要があるため）。

すべてです一部/ view.html

<!-- Provide id to your fragment element, so that it can be referenced from js --> 
<div id="some-fragment" th:fragment="some-fragment"> 

    <!-- Some rendered data. Omitted --> 

    <!-- 
     Don't provide neither action nor method to form, 
     cause we don't want to trigger page reload 
    --> 
    <form> 
     <label for="fieldA">Some field</label> 
     <input id="fieldA" type="text" /><br /> 
     <label for="fieldA">Some field</label> 
     <input id="fieldA" type="text" /><br /> 

     <!-- onclick calls function that performs post --> 
     <button type="button" onclick="performPost()">Submit</button> 
    </form> 
</div> 

<!-- 
    Script with logic of ajax call. Should be outside updated fragment. 
    Use th:inline so that you could take advantage of thymeleaf's data integrating 
--> 
<script th:inline="javascript"> 

    performPost = function() { 

     /* Prepare data that have to be send */ 
     var data = {}; 
     data.fieldA = $('#fieldA').val(); 
     data.fieldB = $('#fieldB').val(); 

     /* Prepare ajax post settings */ 
     var settings = { 

      /* Set proper headers before send */ 
      beforeSend: function(xhr, options) { 

       /* Provide csrf token, otherwise backend returns 403. */ 
       xhr.setRequestHeader("X-CSRF-TOKEN", [[ ${_csrf.token} ]]); 

       /* Send json content */ 
       xhr.setRequestHeader("content-type" ,"application/json; charset=utf-8"); 
      }, 
      type: 'POST', 
      url: [[ @{/some/endpoint} ]], 
      data: JSON.stringify(data) 
     } 

     /* Send request to backend with above settings and provide success callback */ 
     $.ajax(settings).done(function(result) { 

      /* 
       Replace your fragment with newly rendered fragment. 
       Reference fragment by provided id 
      */ 
      $('#some-fragment').html(result); 
     }); 
    } 

</script> 

を。私はこれが何とかあなたに役立つことを願っています。しばらくしたら、私はあなたのユースケースでこのソリューションをチェックし、答えを更新しようとします。