使用JavaScript向Ajf发送Ajax请求

Currently, I am working on a web application that uses draw2d library to draw shapes and charts. On the server side I am using Java(JSF).

目前,我正在开发一个使用draw2d库绘制形状和图表的Web应用程序。在服务器端,我使用的是Java(JSF)。

I can say that 95% of this application is just pure JavaScript. I like to be able to send Ajax requests from inside my JavaScript with no need of using hidden fields such as <f:inputText> (perhaps using jQuery Ajax components?).

我可以说这个应用程序的95%只是纯JavaScript。我希望能够从我的JavaScript中发送Ajax请求,而不需要使用隐藏字段,如 (可能使用jQuery Ajax组件?)。

I tried to hack around this by adding different hidden JFS component and jsf.ajax.request, but for whatever reason they are not very reliable and sometimes they don't send the ajax request.

我试图通过添加不同的隐藏JFS组件和jsf.ajax.request来解决这个问题,但无论出于何种原因,它们都不是非常可靠,有时它们不会发送ajax请求。

Any suggestion? Also, about jQuery, I am not sure how to process the request on the server side.

有什么建议吗?另外,关于jQuery,我不知道如何在服务器端处理请求。

Answer: I ended up using what Dave suggested. I previously tried to use jsFunction from this link, but I got error. Apparently, the problem is , which is not yet implemented in Richfaces 4. However, if you use , as dave mentioned it works perfectly.

答:我最终使用了戴夫的建议。我之前尝试使用此链接中的jsFunction,但是我收到了错误。显然,问题是,在Richfaces 4中尚未实现。但是,如果你使用,正如戴夫所提到的那样它完美无缺。

One more point, the beans didn't work for me as Dave potsed. I had to change it as follows: @ManagedBean(name = "jsFunctionBean") @SessionScoped public class JsFunctionBean {

还有一点,当Dave喝醉时,豆子对我不起作用。我必须按如下方式更改它:@ManagedBean(name =“jsFunctionBean”)@SessionScoped public class JsFunctionBean {

/**
 * Test String name
 */
private String name;

public String getName() { return this.name; }
public void setName(String name) { this.name = name; }

/**
 * Test boolean
 */
private boolean test;
public boolean getTest() { return this.test; }
public void setTest(boolean test) { this.test = test; }    

/**
 * Action Method 
 * 
 * @return
 */
public String getActionMethod() {
    return null;
}

public String actionMethod(){
    this.test = true;
    this.name = "Dave";
    return null;
}
}

I am not sure why this is the case, but if I remove getActionMethod or actionMenthod I would get error!

我不确定为什么会这样,但如果我删除了getActionMethod或actionMenthod,我会收到错误!

3 个解决方案

#1

If you are up for a third party library Richfaces a4j:jsFunction offers the ability to invoke a server side method with a javascript function as well as the ability to pass a object serialized as json back to a callback function:

如果您要使用第三方库Richfaces a4j:jsFunction提供了使用javascript函数调用服务器端方法的功能,以及将序列化为json的对象传递回回调函数的能力:

<h:form id="form1" prependId="false">

    <a4j:jsFunction 
        name="submitApplication"
        action="#{jsFunctionBean.actionMethod}"
        data="#{jsFunctionBean}"
        oncomplete="processData(event.data)" 
        immediate="true">
    </a4j:jsFunction>

    <script type="text/javascript">
        //example callback function
        function processData(data) {
            alert(data.test);
            alert(data.name);
        }

        //call the ajax method from javascript
        submitApplication();
    </script>

</h:form>

And your Bean:

还有你的豆子:

@ManagedBean(name = "jsFunctionBean")
@SessionScoped
public class JsFunctionBean {

    /**
     * Test String name
     */
    private String name;

    public String getName() { return this.name; }
    public void setName(String name) { this.name = name; }

    /**
     * Test boolean
     */
    private boolean test;
    public boolean getTest() { return this.test; }
    public void setTest(boolean test) { this.test = test; }    

    /**
     * Action Method 
     * 
     * @return
     */
    public String getActionMethod() {
        this.test = true;
        this.name = "Dave";
        return null;
    }


}

#2

Unfortunately, the JSF JS API doesn't support this. This enhancement is however requested as JSF spec issue 613. Feel free to vote for it.

不幸的是,JSF JS API不支持这一点。然而,这个增强要求作为JSF规范问题613.随意投票。

As far now, your best bet is really to have an invisible form with a <f:ajax> which is triggered by a programmatic submit.

到目前为止,您最好的选择是使用创建一个由程序化提交触发的隐形表单。

For example, this Facelet

例如,这个Facelet

<h:form id="form" style="display:none;">
    <h:inputText id="input1" value="#{bean.input1}" />
    <h:inputText id="input2" value="#{bean.input2}" />
    <h:inputText id="input3" value="#{bean.input3}" />
    <h:commandButton value="submit" action="#{bean.submit}">
        <f:ajax execute="@form" />
    </h:commandButton>
</h:form>

with this jQuery

用这个jQuery

<script>
    $('#form\\:input1').val('value1');
    $('#form\\:input2').val('value2');
    $('#form\\:input3').val('value3');
    $('#form').submit();
</script>

and this managed bean

和这个托管bean

private String input1;
private String input2;
private String input3;

public void submit() {
    // ...
}

// ...

#3

I realize this is old, but it still comes up in Google searches regarding the subject.

我意识到这已经过时了,但Google搜索仍会出现这个主题。

A great answer has been provided here (which outlines the most raw usage of the jsf.ajax client side JS namespace): How to use jsf.ajax.request to manually send ajax request in JSF.

这里提供了一个很好的答案(概述了jsf.ajax客户端JS命名空间的最原始用法):如何使用jsf.ajax.request在JSF中手动发送ajax请求。

Also, Oracle documentation on the subject can be found at: http://docs.oracle.com/javaee/6/tutorial/doc/gkiow.html, which details the usage of AJAX with JSF using JSF's provided f:ajax tag.

此外,有关该主题的Oracle文档可以在以下网址找到:http://docs.oracle.com/javaee/6/tutorial/doc/gkiow.html,其中详细介绍了使用JSF提供的f:ajax标记使用AJF和JSF的用法。

#1