回到阿贾克斯后请求和响应春季

Question

相同的观点我托盘数据保存到服务器，并刷新查看与添加的数据。将多部分请求发送到服务器之后。在服务器部分，可以将数据保存到base和back json对象。问题是，无法刷新相同的视图，服务器通过操作方法发送json响应。我可以重定向，但这个不行。没有错误出现。我发现simile后，它呼吁使用e.preventDefault（）触发click（）函数和Ajax选项覆盖：true，但这没有帮助。如何bypath呢？

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没有被传递给你的情况。

改性的形式上的DAT &修整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>