浏览器在对servlet执行jquery.ajax POST后未加载HTML响应

Question

我在加载servlet在对多个文件进行jquery.ajax发布后返回的一些html时遇到问题。

我可以上传文件（图片）很好。我有一个servlet，它对照片进行一些处理，并从图片中提取一些元数据。处理完照片后，我想将一些提取的元数据传递到JSP，最终返回到浏览器。

所有这些都很好。我用数据加载请求对象，并将其重定向到JSP。然而每当JSP响应浏览器时，页面都不会被加载。

使用firebug，我可以看到JSP按照我希望的方式正确地生成HTML，浏览器在响应中获得HTML文本。。。它就是无法加载页面。页面保持原样，我可以简单地在Firebug中查看响应中的HTML文本。

你知道问题出在哪里吗？以下是一些相关代码。。。

将文件上传到servlet的Javascript函数。。。

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）生成得很好。Firebug将向我显示servlet调用响应中的HTML代码。。。但是，浏览器停留在上传表单所在的页面上。

谢谢你的帮助。

Answer 1

看起来你真正想要的比你现在做的要简单得多。

<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的全部目的。但是，您可以使用ajax的complete设置强制重新加载页面，如本文所述http://api.jquery.com/jQuery.ajax/

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 时，将调用success

当返回的HTML状态代码为4xx或5xx 时，将调用error

根据您的需要使用

Answer 3

AJAX方法不应该刷新页面。如果您想在ajax请求的success功能中使用window.location

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