Question

在执行mutliple文件的jquery.ajax帖子后，我无法加载servlet返回的一些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;
    }
}

如上所述，重定向到（uploadForm.jsp）的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的全部目的。但是，您可以使用此处记录的http://api.jquery.com/jQuery.ajax/

的ajax complete设置强制重新加载页面无论结果如何（成功或失败），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方法不应该刷新页面。如果您想要window.location请求的success函数，可以使用ajax

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

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

3 个答案: