Question

托盘将数据保存到服务器并使用添加的数据刷新视图。将多部分请求发送到服务器后。在服务器部分，可以将数据保存到基础和后退json对象。问题是，不可能刷新相同的视图，服务器通过action方法发送json响应。我可以重定向，但这没有选择。没有错误出现。我发现simile的帖子是在触发器click（）函数和Ajax选项覆盖中使用e.preventDefault（）的吸引力：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未在你的情况下通过。

修改了格式数据a＆amp;修剪了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>

在Ajax请求和Spring响应之后回到相同的视图

1 个答案: