Question

我需要使用带有POST方法的Ajax提交表单。代码如下，

function persistPage(divID,url,method){ 
    var scriptId = "inlineScript_" + divID;
    var xmlRequest = getXMLHttpRequest();   
    xmlRequest.open("POST",url,true);
    xmlRequest.onreadystatechange = function(){
    alert(xmlRequest.readyState + " :" + xmlRequest.status);
    if (xmlRequest.readyState ==4 || xmlRequest.status == 200)
          document.getElementById(divID).innerHTML=xmlRequest.responseText;
    };
    xmlRequest.open("POST", url, false);
    alert(xmlRequest.readyState);
    xmlRequest.send(null);
}

但表单未提交（请求未执行或未发布数据）。如何使用Ajax提交表单。

由于

Answer 1

您的代码不起作用的原因有几个。请允许我将其分解并逐一解决问题。我将从最后（但最大）的问题开始：

xmlRequest.send(null);

我的猜测是，您的代码基于GET示例，其中调用send方法时使用null，甚至undefined作为参数调用xhr.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

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

    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 必须< / em>是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'。 Here's a full example of just such a request，它并不是一个世界级的打击者，因为我当时正在放弃jQ而不是纯JS，但它是可用的，你可能会选择一两件事。特别是仔细看看function ajax()定义。在其中你会看到一个X浏览器的方式来创建一个xhr对象，并且还有一个函数来对表单进行字符串化

POINTLESS UPDATE：

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

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会在每次请求时创建一个新的函数对象，并将其分配给onreadystate xmlRequest事件。您可以编写此代码，这样您只需要创建1个函数。我现在不打算进入我心爱的封口（我认为你已经足够了），但重要的是要知道函数是对象，并且具有属性，就像其他一切一样：
替换：< / p>
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总是相同的，你可以（但是闭包会更好）。

好的，我会把它留在那个

Answer 2

此代码可以让您了解。函数 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!");
    }
}

Answer 3

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

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

value1将在服务器上提供，例如$ _POST [＆＃39; value＆＃39;]（在PHP中）

此外，网址可能存在问题或您如何调用persistPage。 persistPage代码看起来不错，但也许我错过了一些东西。如果您在控制台中没有错误，也可以查看。在任何浏览器中按F12，然后找到控制台选项卡。在FF中，您可能需要安装Firebug扩展。此外，您将拥有包含所有请求的“网络”选项卡。打开Firebug / Web Inspector（Chrome）/开发人员工具栏（IE），并在调用persistPage后检查其网络选项卡中是否已注册新请求。

Answer 4

我发现你已经调用了

xmlRequest.open（）

方法两次，一次async param为true，另一种为false。你究竟打算做什么？

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

如果要发送异步请求，请将param作为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;

希望这有帮助。

表单使用Ajax提交

4 个答案: