将Ajax与JSF命令按钮或表单结合使用

Using Ajax with JSF command button or form

本文关键字:表单 结合 按钮 Ajax JSF 命令      更新时间:2023-09-26

我甚至可能没有正确解决这个问题,但这是发生的事情。我有一些RESTful Web服务要调用。调用它们的代码是用JavaScript编写的。它被称为:

<h:body onload="smaInit();">
    <h:form onsubmit="smaSignUp();">

每当页面加载时,我都会进行2次Ajax调用。这些调用成功。每当提交表单时,我想再进行两次Ajax调用。但是,这些调用失败了。我没有看到任何来自Firebug的错误,所以我不知道发生了什么。

为了详细说明我说它们失败的意思,在Netbeans中,我为Rest调用设置了断点。当onload事件被触发时,我碰到了断点。但是,当onsubmit事件被触发时,我不会碰到断点。

我现在唯一的理论是Ajax调用不适用于页面提交。这是正确的吗?页面更改是否会导致Ajax调用在完成之前被终止?

无论如何,任何见解都是好的。以下是正在调用的JavaScript:

函数getUrlVars(){var vars={};var parts=window.location.href.replace(/[?&]+([^=&]]+)=([^&**)/gi,函数(m,键,值){vars[key]=值;});返回vars;}

function post(req, json, url)
{
    req.open("POST", url, true);
    req.setRequestHeader("Content-Type",
            "application/json");
    req.send(json);
}
function createRequest() {
    var result = null;
    if (window.XMLHttpRequest) {
        // FireFox, Safari, etc.
        result = new XMLHttpRequest();
        if (typeof result.overrideMimeType !== 'undefined') {
            result.overrideMimeType('text/xml'); // Or anything else
        }
    }
    else if (window.ActiveXObject) {
        // MSIE
        result = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else {
        // No known mechanism -- consider aborting the application
    }
    return result;
}
function createClientRecord(ip)
{
    //get users id from url
    var id = getUrlVars()["said"];
    //get time
    var timeStamp = new Date().getTime();
    var url = [location.protocol, '//', location.host, location.pathname].join('');
    var map = {"userId": id, "ip": ip, "timeStamp": timeStamp, "url": url};
    return JSON.stringify(map);
}
function signUp(clientInfo)
{
    var req = createRequest(); // defined above
    // Create the callback:
    req.onreadystatechange = function() {
        if (req.readyState !== 4)
            return; // Not there yet
        if (req.status !== 200) {
            // Handle request failure here...
            return;
        }
        // Request successful, read the response
        var resp = req.responseText;
        // ... and use it as needed by your app.
    };
    var url = '/ui/webresources/signup';
    post(req, clientInfo, url);
}
function mark(clientInfo)
{
    var req = createRequest(); // defined above
    // Create the callback:
    req.onreadystatechange = function() {
        if (req.readyState !== 4)
            return; // Not there yet
        if (req.status !== 200) {
            // Handle request failure here...
            return;
        }
        // Request successful, read the response
        var resp = req.responseText;
        // ... and use it as needed by your app.
    };
    var url = '/ui/webresources/mark';
    post(req, clientInfo, url);
}

function smaInitGetIp()
{
    var req = createRequest(); // defined above
    // Create the callback:
    req.onreadystatechange = function() {
        if (req.readyState !== 4) {
            return; // Not there yet
        }
        if (req.status !== 200) {
            // Handle request failure here...
            return;
        }
        // Request successful, read the response
        var resp = req.responseText;
        // ... and use it as needed by your app.
        var clientInfo = createClientRecord(resp);
        mark(clientInfo);
    };
    var url = '/ui/webresources/ip';
    req.open("GET", url, true);
    req.send();
}
function smaSignUpGetIp()
{
    var req = createRequest(); // defined above
    // Create the callback:
    req.onreadystatechange = function() {
        if (req.readyState !== 4) {
            return; // Not there yet
        }
        if (req.status !== 200) {
            // Handle request failure here...
            return;
        }
        // Request successful, read the response
        var resp = req.responseText;
        // ... and use it as needed by your app.
        var clientInfo = createClientRecord(resp);
        signUp(clientInfo);
    };
    var url = '/ui/webresources/ip';
    req.open("GET", url, true);
    req.send();
}
function smaInit()
{
    var temp = getUrlVars()["said"];
    if (temp === null || temp === 'undefined')
    {
        //a social advertiser did not send them here
        return;
    }
    smaInitGetIp();
}

function smaSignUp()
{
    //get the id, if id isnt present, send null
    var temp = getUrlVars()["said"];
    if (temp === null || temp === 'undefined')
    {
        temp = null;
    }
    smaSignUpGetIp();
}

您需要停止要在onsubmit方法中使用return false;触发的默认事件(在本例中为提交事件)。

这样可以防止发生同步回发。

function smaSignUp() {
    //get the id, if id isnt present, send null
    var temp = getUrlVars()["said"];
    if (temp === null || temp === 'undefined')
    {
        temp = null;
    }
    smaSignUpGetIp();
    //to prevent the default event to be fired
    return false;
}