阿賈克斯後法與彈簧偏清爽thymealf

我有偏upating我的網頁的問題。我很少解釋商業問題。我有用戶配置文件，在那裏他可以改變你自己等技能，個人信息，主要寫真照片Galerry的任何信息。所有的工作很好，但我有一個惱人想以後等照片添加阿賈克斯後法與彈簧偏清爽thymealf

首先，我展示了主要的相片中添加究竟

<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"不是整個頁面

我嘗試AJAX片段更新，但我不使用彈簧的Webflow，我應該加入SPRIN g weblow配置，或者我可以通過jQuery來做到這一點？

所以後試圖

我uploadingMianPhoto return "/profile/edit :: photoDiv"增加，但它只返回我，我的整個頁面上僅此片段

請給我ajax開機自檢功能的一些exaples，巫婆幾個解釋的話

來源

2017-02-26 Monika Galińska

是的，你可以通過jQuery完成。我能夠這樣做，但它需要一些額外的JavaScript努力。我將用簡單的例子來展示我如何解決這種情況的一般想法。

首先，讓我們假設我們有一些對象轉移。沒什麼特別的。

SomeDto.java

public class SomeDto { 

    private String fieldA; 
    private String fieldB; 

    // Getters and Setters 
}

其次，讓我們有一些標準的控制器功能後這樣做。我比平時增加了「額外」的兩件事是接受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>

這就是全部。我希望這會對你有所幫助。如果我找到一段時間，我會嘗試使用您的用例檢查此解決方案並更新答案。

來源

2017-02-28 00:00:37

阿賈克斯後法與彈簧偏清爽thymealf

回答

相關問題