在文件输入ajax之后，JSF没有重定向请求 [英] JSF no redirect request after file input ajax

问题描述

我在JSF 2.2中有一个表单:

I have a form in JSF 2.2:

<h:form enctype="multipart/form-data">
    <h:outputLabel>title *</h:outputLabel>
    <h:inputText value="#{bean.title}" required="" />

    <h:outputLabel>Image *</h:outputLabel>
    <h:inputFile value="#{bean.picutreFile}" a:accept="image/*">
        <f:ajax listener="#{bean.uploadPicture}" />
    </h:inputFile>

    <h:commandLink action="#{bean.save}">
        Save
    </h:commandLink>
</h:form>

功能:

public String save() {
    return "/index?faces-redirect=true";
}

public void uploadPicture() {
    // Do nothing
}

但是选择图像并调用uploadPicture函数后，save函数无法重定向页面.它调用save，但是重定向不起作用，仅刷新当前页面.

But after I choose an image and get the call of uploadPicture function, the save function can't redirect the page. It calls to save but the redirect is not working, and just refresh the current page.

如果我跳过文件上传，它将正常重定向.我该如何使其正常工作?

If I skip the file upload, it redirects normally. How can I make it to work?

编辑
我注意到，如果删除ajax <f:ajax listener="#{bean.uploadPicture}" />，它将按预期工作.但是我必须拥有该Ajax，因为我想在上传后显示图像.

EDIT
I have noticed that if I remove the ajax <f:ajax listener="#{bean.uploadPicture}" /> it works as expected. But I must to have that ajax because I want to display the image after upload.

编辑2
我可以看到，在ajax调用之后，JSF在页面底部创建了一个奇怪的iframe，其中的主体中带有partial-response标签，当我按下保存" 时，iframe重定向到了目的地.为什么会这样?

EDIT 2
I can see that after the ajax called, the JSF creates a weird iframe at the bottom of the page with partial-response tag in it's body, and when I press 'Save` that iframe is redirects to the destination. Why is that??

推荐答案

我复制了它.我确实同意这种行为是令人困惑和不直观的，但是我不会说这是JSF实现中的错误，因为您本质上是将ajax与常规请求混合在一起，这首先是错误的.另请参阅此相关问题 httpError:Http传输返回了0状态代码.

I reproduced it. I do agree that the behavior is confusing and unintuitive, but I wouldn't say this is a bug in the JSF implementation, because you're essentially mixing ajax with regular requests which is wrong in first place. See also this related question httpError: The Http Transport returned a 0 status code.

正确的方法是或者，也可以将命令链接也设置为ajax链接，

The correct approach is either to make the command link an ajax link as well,

<h:commandLink action="#{bean.save}">
    Save
    <f:ajax execute="@form" />
</h:commandLink>

或从<h:inputFile>中删除<f:ajax>(并在save()中执行上载处理).

or to remove <f:ajax> from the <h:inputFile> (and perform upload processing in save()).

<h:inputFile value="#{bean.picutreFile}" a:accept="image/*" />

您看到的iframe就是在文件上传期间模拟异步行为的古老技巧，该技巧早于如何使用iframe进行异步(AJAX)文件上传?

That iframe you're seeing is by the way the age-old trick to simulate asynchronous behavior during file uploads, invented long before XHR2 / FormData API was standardized. This approach was during JSF 2.2 development preferred over XHR2 due to better backwards compatibility in webbrowsers (particularly MSIE). See also a.o. How to make Asynchronous(AJAX) File Upload using iframe?

这篇关于在文件输入ajax之后，JSF没有重定向请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！