AjaxリクエストおよびSpringレスポンス後の同じビューへ戻る

Question

Iトレイは、データをサーバーに保存し、追加されたデータでビューを更新します。マルチパートリクエストをサーバーに送信した後。サーバー側では、データをベースおよびバックjsonオブジェクトに保存することができます。問題は、同じビューをリフレッシュすることはできません、サーバーはアクションメソッドでjsonレスポンスを送信します。私はリダイレクトすることができますが、このオプションはありません。エラーは発生しません。私は、トリガclick（）関数とAjaxオプションoverride：e.preventDefault（）を使用することが魅力的であることを偶然発見したが、これは助けにはならない。それはどのようにそれ？

Template code . 

     <form action="/video/addCasePost" id="formAddPoster" method="post" enctype="multipart/form-data" > 

        <div class="form-group">  
        <label for="caseTitle" class="col-sm-2 control-label">title</label> 
       <div class="col-sm-10"> 
       <input type="text" class="form-control input-sm" id="caseTitle" name="caseTitle" value="" placeholder=“add” title here … /> 
       </div> 
        </div> 
<div class="form-group"> 

        <label for="casePosterLoad" class="col-sm-2 control-label">post</label> 
        <div class="col-sm-10 "> 
          <input type="file" name="file" required id="fileLoader" /> 
        </div> 
         </div> 
      <div class="form-group"> 
        <div class="col-sm-offset-2 col-sm-10"> 
         <input type="hidden" class="form-control input-sm" id="postId" name="postId" value="{{item.postId}}" /> 
         <button type="submit" id="btnSaveCasePost" class="btn btn-default"></button> 
         <!-- save content --> 
        </div> 
        </div> 



function casePostUpload() 
    { 
var myForm = form.find('formAddPoster'); 
    myData = new FormData(); 
    myData.append('multipart', myForm); 

     $ 
      .ajax({ 

       url : "/video/addCasePost", 
       data : myForm, 
       type : 'POST', 
       headers: {'Content-Type': undefined}, 
       enctype: 'multipart/form-data', 
       processData: false, 
       contentType:false, 
       success : function(data, textStatus, jqXHR){ 


        $('#casePost').prepend('<br/>Poster: '+data.casePoster+' :: title '+data.caseTitle+' at '+data.timestampAsStr+'<br/></td></tr>'); 


      }, 
       error : function(result){ 
        //...; 

       alert('add contnt error: ' + errorThrown); 
       } 
      }); 
    } 






Spring MVC controller method 


    @RequestMapping(value = "/video/addCasePost", method = RequestMethod.POST) 
public @ResponseBody CasePost addcasepost(@RequestPart("caseTitle") String caseTitleString, 
    @RequestPart("file") MultipartFile file, HttpServletRequest request, Model model, @ModelAttribute("currentuser") User currentuser) throws Exception { 
    CasePost jsResponse = new CasePost(); 


    String filePath = new String(); 
    //save file to directory 
    if (!file.isEmpty()) { 
     try { 
      String uploadsDir = “/fd/ct/images/"; 
      String realPathtoUploads = request.getServletContext().getRealPath(uploadsDir); 
      if(! new File(realPathtoUploads).exists()) 
       { 
       new File(realPathtoUploads).mkdir(); 
       } 


      String orgName = file.getOriginalFilename(); 
      filePath = realPathtoUploads + orgName; 

      File dest = new File(filePath); 
      file.transferTo(dest); 

      }catch (Exception e) { 
       log.error(e); 
      } 

    } 

    try { 
     if (caseTitleString != null) { 



      jsResponse.setCaseTitle(caseTitleString); 

      jsResponse.setCasePoster(filePath); 

      jsResponse = graphStoryInterface.getCasePostInterface().add(jsResponse, currentuser); 

     } 
    } 
    catch (Exception e) { 
     log.error(e); 
    } 

return jsResponse; 


} 

Answer 1

form dataはあなたのケースでは渡されません。

形式を変更しました。&は、formActionを必須ではないものとしてトリミングしました。

function casePostUpload() { 
myData = new FormData($('#formAddPoster')); 
myData.append('multipart', myForm); 
$.ajax({ 
     url : "/video/addCasePost", 
     data : myData, 
     type : 'POST', 
     headers: {'Content-Type': undefined}, 
     enctype: 'multipart/form-data', 
     processData: false, 
     contentType:false, 
     success : function(data, textStatus, jqXHR){ 
      $('#casePost').prepend('<br/>Poster: '+data.casePoster+' :: title '+data.caseTitle+' at '+data.timestampAsStr+'<br/></td></tr>'); 
    }, 
     error : function(result){ 
      //...; 

     alert('add contnt error: ' + errorThrown); 
     } 
    }); 
} 

<form id="formAddPoster" enctype="multipart/form-data"> 
    <div class="form-group"> 
    <label for="caseTitle" class="col-sm-2 control-label">title</label> 
    <div class="col-sm-10"> 
     <input type="text" class="form-control input-sm" id="caseTitle" name="caseTitle" value="" placeholder=“add” title here … /> 
    </div> 
    </div> 
    <div class="form-group"> 

    <label for="casePosterLoad" class="col-sm-2 control-label">post</label> 
    <div class="col-sm-10 "> 
     <input type="file" name="file" required id="fileLoader" /> 
    </div> 
    </div> 
    <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10"> 
     <input type="hidden" class="form-control input-sm" id="postId" name="postId" value="{{item.postId}}" /> 
     <button type="submit" id="btnSaveCasePost" class="btn btn-default"></button> 
     <!-- save content --> 
    </div> 
    </div>