使用Ajax提交表单

您的代码不起作用的原因有几个。请允许我把它分解开来，逐一讨论这些问题。我将从最后一个（但最大的）问题开始：

xmlRequest.send(null);

我的猜测是，您的代码基于一个GET示例，其中使用null甚至undefined作为参数（xhr.send()）来调用send方法。这是因为url包含GET请求（.php?param1=val1&param2=val2...）中的数据。使用post时，需要将数据传递给send方法。

但我们不要超前：

function persistPage(divID,url,method)
{   
    var scriptId = "inlineScript_" + divID;
    var xmlRequest = getXMLHttpRequest();//be advised, older IE's don't support this
    xmlRequest.open("POST",url,true);
    //Set additional headers:
    xmlRequest.setRequestHeader('X-Requested-With', 'XMLHttpRequest');//marks ajax request
    xmlRequest.setRequestHeader('Content-type', 'application/x-www-form-urlencode');//sending form

两个标题中的第一个并不总是必要的，但安全总比抱歉好。现在，继续：

    xmlRequest.onreadystatechange = function()
    {
        alert(xmlRequest.readyState + " :" + xmlRequest.status);
        if (xmlRequest.readyState ==4 || xmlRequest.status == 200)
            document.getElementById(divID).innerHTML=xmlRequest.responseText;
    };

此代码存在许多问题。您正在为对象分配一个方法，因此不需要使用xmlRequest来引用您的对象，尽管在这里技术上是有效的，但一旦您将回调函数移到persistPage函数之外，这将中断。xmlRequest变量是函数作用域的本地变量，不能在函数作用域之外访问。此外，正如我之前所说，它是一种方法：this直接指向对象
您的if语句也有点奇怪：readystate必须为4，且状态===200，而不是或。因此：

    xmlRequest.onreadystatechange = function()
    {
        alert(this.readyState + " :" + this.status);
        if (this.readyState === 4 && this.status === 200)
        {
            document.getElementById(divID).innerHTML=this.responseText;
        }
    };
    xmlRequest.open("POST", url, false);
    alert(xmlRequest.readyState);//pointless --> ajax is async, so it will alert 0, I think
    xmlRequest.send(data);//<-- data goes here
}

如何填充数据取决于您，但请确保格式与标头匹配：在本例中为'content type','x-www-form-urlencode'。这是一个完整的例子，它并不是一个世界级的请求，因为当时我正在抛弃jQ，转而使用纯JS，但它是有用的，你可能会学到一两件事。特别是仔细看一下function ajax()的定义。在它中，你会看到一种X浏览器创建xhr对象的方法，其中还有一个函数可以字符串形式，也可以是

无点更新：

为了完整起见，我将添加一个完整的示例：

function getXhr()
{
    try
    {
        return XMLHttpRequest();
    }
    catch (error)
    {
        try
        {
            return new ActiveXObject('Msxml2.XMLHTTP');
        }
        catch(error)
        {
            try
            {
                return new ActiveXObject('Microsoft.XMLHTTP');
            }
            catch(error)
            {
                //throw new Error('no Ajax support?');
                            alert('You have a hopelessly outdated browser');
                            location.href = 'http://www.mozilla.org/en-US/firefox/';
            }
        }
    }
}
function formalizeObject(form)
{//we'll use this to create our send-data
    recursion = recursion || false;
    if (typeof form !== 'object')
    {
        throw new Error('no object provided');
    }
    var ret = '';
    form = form.elements || form;//double check for elements node-list
    for (var i=0;i<form.length;i++)
    {
        if (form[i].type === 'checkbox' || form[i].type === 'radio')
        {
            if (form[i].checked)
            {
                ret += (ret.length ? '&' : '') + form[i].name + '=' + form[i].value;
            }
            continue;
        }
        ret += (ret.length ? '&' : '') + form[i].name +'='+ form[i].value; 
    }
    return encodeURI(ret);
}
function persistPage(divID,url,method)
{   
    var scriptId = "inlineScript_" + divID;
    var xmlRequest = getXhr();
    xmlRequest.open("POST",url,true);
    xmlRequest.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xmlRequest.setRequestHeader('Content-type', 'application/x-www-form-urlencode');
    xmlRequest.onreadystatechange = function()
    {
        alert(this.readyState + " :" + this.status);
        if (this.readyState === 4 && this.status === 200)
        {
            document.getElementById(divID).innerHTML=this.responseText;
        }
    };
    xmlRequest.open("POST", url, false);
    alert(xmlRequest.readyState);
    xmlRequest.send(formalizeObject(document.getElementById('formId').elements));
}

只是为了好玩：这个代码，未经测试，但应该可以正常工作。但是，在每次请求时，persistPage将创建一个新的函数对象，并将其分配给xmlRequest的onreadystate事件。您可以编写此代码，这样您只需要创建一个函数。我现在不打算讨论我心爱的闭包（我认为你对此已经有足够的想法了），但重要的是要知道函数是对象，并且具有属性，就像其他一切一样：
Replace:

    xmlRequest.onreadystatechange = function()
    {
        alert(this.readyState + " :" + this.status);
        if (this.readyState === 4 && this.status === 200)
        {
            document.getElementById(divID).innerHTML=this.responseText;
        }
    };

有了这个：

//inside persistPage function:
xmlRequest.onreadystatechange = formSubmitSuccess;
formSubmitSuccess.divID = divID;//<== assign property to function
//global scope
function formSubmitSuccess()
{
    if (this.readyState === 4 && this.status === 200)
    {
        console.log(this.responseText);
        document.getElementById(formSubmitSuccess.divID).innerHTML = this.responseText;
        //^^ uses property, set in persistPAge function
    }
}

不过，不要使用这种方法，因为在重新分配属性时，异步调用可能仍在运行，从而造成混乱。如果id总是一样的，你可以（但闭包会更好）。

好的，我把它留在

这段代码可以让您理解。函数SendRequest发送请求并通过GetXMLHttpRequest函数构建xmlRequest

function SendRequest() {
    var xmlRequest = GetXMLHttpRequest(),
    if(xmlRequest) {
        xmlRequest.open("POST", '/urlToPost', true)
        xmlRequest.setRequestHeader("connection", "close");
        xmlRequest.onreadystatechange = function() {
            if (xmlRequest.status == 200) {
                // Success          
            }
            else {
                // Some errors occured                  
            }               
        };
        xmlRequest.send(null);
    }
}
function GetXMLHttpRequest() {
    if (navigator.userAgent.indexOf("MSIE") != (-1)) {
        var theClass = "Msxml2.XMLHTTP";
            if (navigator.appVersion.indexOf("MSIE 5.5") != (-1)) {
            theClass = "Microsoft.XMLHTTP";
        }
        try {
            objectXMLHTTP = new ActivexObject(theClass);
            return objectXMLHTTP;
        }
        catch (e) {
            alert("Errore: the Activex will not be executed!");
        }
    }
    else if (navigator.userAgent.indexOf("Mozilla") != (-1)) {
        objectXMLHTTP = new XMLHttpRequest();
        return objectXMLHTTP;
    }
    else {
        alert("!Browser not supported!");
    }
}

看看这个页面。在这一行中：req.send(postData);发布数据是一个数组，其值应该发布到服务器。你有空。所以没有发布任何内容。您只需调用请求，不发送任何数据。在您的情况下，您必须从表单中收集所有值，因为XMLHTTPRequest不能简单地提交表单

   var postData = {};
   postData.value1 = document.getElementById("value1id").value;
   ...
   xmlRequest.send(postData);

其中value1将在服务器上可用，如$_POST['value']（在PHP中）

此外，URL或您如何调用persistPage也可能存在问题。persistPage代码对我来说还可以，但可能我遗漏了什么。若在控制台中并没有错误，也可以查看一下。在任何浏览器中按F12，找到控制台选项卡。在FF中，您可能需要安装Firebug扩展。此外，您将拥有包含所有请求的"网络"选项卡。打开Firebug/Web检查器（Chrome）/开发者工具栏（IE），并在调用persistPage后检查新请求是否在其网络选项卡中注册。

我发现您调用了

xmlRequest.open（）

方法两次，一次异步参数为true，另一次为false。你到底打算做什么？

xmlRequest.open("POST", url, true);
...
xmlRequest.open("POST", url, false);

如果你想发送异步请求，请将参数传递为true。此外，要使用"POST"方法，您最好按照的Elias的建议发送请求标头

xmlRequest.setRequestHeader('Content-type', 'application/x-www-form-urlencode');

否则，您可能仍然会遇到意想不到的问题。

如果你想要一个同步请求，实际上你可以在发送请求后立即处理响应，就像：

xmlRequest.open("POST", url, false);
xmlRequest.send(postData);
// handle response here
document.getElementById(scriptId).innerHTML = xmlRequest.responseText;

希望这能有所帮助。