将 Ajax 与 JSF 命令按钮或表单一起使用

Question

我什至可能没有正确解决这个问题，但这就是正在发生的事情。我有一些想要调用的 RESTful Web 服务。调用它们的代码在 JavaScript 中。它是这样称呼的：

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

每当页面加载时，我都会进行 2 次 Ajax 调用。这些调用成功。每当提交表单时，我想再进行 2 次 Ajax 调用。但是，这些调用失败。我没有看到来自 Firebug 的任何错误，所以我对正在发生的事情感到困惑。

为了详细说明我说它们失败的意思，在 Netbeans 中，我为 Rest 调用设置了断点。触发 onload 事件时，我遇到了断点。然而，当 onsubmit 事件被触发时，我并没有遇到断点。

我现在唯一的理论是 Ajax 调用在页面提交上不起作用。这个对吗？页面更改是否会导致 Ajax 调用在完成之前被终止？

无论如何，任何见解都会很好。这是被调用的 JavaScript：

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

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();
}

Answer 1

您需要在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;
}