瀏覽器在執行jquery.ajax後沒有加載HTML響應POST到一個servlet

Question

我在加載多個由多個文件jquery.ajax後執行的servlet小部件的html時遇到了問題。

我可以上傳文件（圖片）就好了。我有一個servlet對照片進行一些處理，並從照片中提取一些元數據。處理完照片後，我想將一些提取的元數據傳遞給JSP，最終返回瀏覽器。

所有這些工作正常。我用我的數據加載請求對象，並將其重定向到我的JSP。但是，只要JSP響應瀏覽器，頁面就不會被加載。

使用firebug我可以看到JSP以我想要的方式正確生成HTML，並且瀏覽器獲取響應中的html文本...它只是不加載頁面。頁面停留在原來的位置，我可以簡單地在Firebug中查看響應中的HTML文本。

任何想法可能是什麼問題？下面是一些相關的代碼...

的Javascript功能，上傳文件到servlet ...

function uploadPictures() { 
    var input = document.getElementById('filesToUpload'); 
    var fileList = []; 
    var files = new FormData(); 

    for(var i = 0; i < input.files.length; i++) {  
     files.append("file", input.files[i]); 
    } 

    $.ajax({ 
     type  : "POST", 
     url   : "/uploadPhotos", 
     data  : files, 
     dataType : "HTML", 
     processData : false, 
     contentType : false 
    }); 
} 

servlet代碼

@MultipartConfig 
public class UploadPhotosServlet extends HttpServlet { 

    @Override 
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException { 
     String url = "/uploadForm.jsp"; 
     RequestDispatcher dispatcher = 
      getServletContext().getRequestDispatcher(url); 
     String basePath = getInitParameter("photosRoot"); 
     HashMap<String,String> files = new HashMap<String,String>(); 

     java.util.Collection<Part> parts = request.getParts(); 
     for (Part part : parts) { 
      String filename = getFilename(part); 
      InputStream fileContent = part.getInputStream(); 

      OutputStream outFile = new FileOutputStream(new File(basePath + "screen/" + filename)); 
      int read = 0; 
      byte[] bytes = new byte[1024]; 

      while((read = fileContent.read(bytes)) != -1) { 
       outFile.write(bytes, 0, read); 
      } 

      fileContent.close(); 
      outFile.flush(); 
      outFile.close(); 

      File img = new File(basePath + "screen/" + filename); 
      File thumb = new File(basePath + "screen/thumbnails/" + filename); 

      try { 
       Metadata metadata = ImageMetadataReader.readMetadata(img); 

       for(Directory directory : metadata.getDirectories()) { 
        if(directory.containsTag(ExifSubIFDDirectory.TAG_DATETIME_ORIGINAL)) { 
         Date date = directory.getDate(ExifSubIFDDirectory.TAG_DATETIME_ORIGINAL); 
         SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); 
         files.put(filename, sdf.format(date)); 
         break; 
        } else if(directory.containsTag(ExifIFD0Directory.TAG_DATETIME)) { 
         Date date = directory.getDate(ExifIFD0Directory.TAG_DATETIME); 
         SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); 
         files.put(filename, sdf.format(date)); 
         break; 
        } 
       } 

       BufferedImage buffImg = ImageIO.read(img); 
       BufferedImage buffThumb = Scalr.resize(buffImg, 150); 

       ImageIO.write(buffThumb, "jpg", thumb); 
      } catch (IOException e) { 
       e.printStackTrace(); 
      } catch (ImageProcessingException e) { 
       e.printStackTrace(); 
      } 
     } 

     request.setAttribute("files", files); 
     dispatcher.forward(request, response); 
    } 

    private static String getFilename(Part part) { 
     for (String cd : part.getHeader("content-disposition").split(";")) { 
      if (cd.trim().startsWith("filename")) { 
       String filename = cd.substring(cd.indexOf('=') + 1).trim().replace("\"", ""); 
       return filename.substring(filename.lastIndexOf('/') + 1).substring(filename.lastIndexOf('\\') + 1); // MSIE fix. 
      } 
     } 
     return null; 
    } 
} 

正如我上面所說，在JSP中重定向到（uploadForm.jsp）生成得很好。在調用servlet的響應中，Firebug將向我顯示HTML代碼...但是，瀏覽器停留在上載表單所在的頁面上。

感謝您的任何幫助。

Answer 1

它看起來像你真正想要的是比你目前正在做的事情更簡單的success功能使用window.location，如果你想。

<form action="/uploadPhotos" method="post" enctype="multipart/form-data"> 
    <input type="file" multiple name="filesToUpload" /> 
    <button type="submit">Upload</button> 
</form> 

Answer 2

ajax不會爲你重新加載頁面，這就是使用ajax的全部目的。但是，您可以強制頁面使用complete設置AJAX的重裝這裏記載阿賈克斯http://api.jquery.com/jQuery.ajax/

complete回調總是被調用Ajax響應回來不管結果（成功或失敗）

後把它放在一起，你會想要做的事，如：

$.ajax({ 
    type  : "POST", 
    url   : "/uploadPhotos", 
    data  : files, 
    dataType : "HTML", 
    processData : false, 
    contentType : false, 
    complete: function() { 
     location.reload(); //or other browser specific reload method 
    } 
}); 

如果complete是不是你想要的，儘量使用success或error代替。當返回HTML狀態代碼爲2XX或3XX

error將當返回HTML狀態代碼爲4XX或者5XX

根據您的需要利用它被稱爲

success將被稱爲

Answer 3

AJAX方法不應該刷新頁面。您可以在ajax要求

$.ajax({ 
    type  : "POST", 
    url   : "/uploadPhotos", 
    data  : files, 
    dataType : "HTML", 
    processData : false, 
    contentType : false, 
    success: function(){ 
     window.location = "uploadForm.jsp"; 
    } 
});