无法使用 AJAX 将值发布到 PHP 页面答案

【问题标题】：Unable to post values to a PHP page using AJAX无法使用 AJAX 将值发布到 PHP 页面
【发布时间】：2015-01-05 13:35:43
【问题描述】：

我想使用 AJAX 将登录电子邮件和密码发布到 PHP 页面

<form onsubmit="authenticate()">
<input type="text" placeholder="E-mail" name="email" id="email" />
<input type="password" placeholder="Password" name="password" id="password" />
<input type="submit" value="Login"/>
</form>

AJAX：

function authenticate() {
var email = document.getElementById("email").value;
var pass = document.getElementById("password").value;
var params = 'email=' + email + '&pass=' + pass; 
var httpc = new XMLHttpRequest(); // simplified for clarity
var url = "http://127.0.0.1/login/login.php";
httpc.open("POST", url, true); // sending as POST

httpc.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
httpc.setRequestHeader("Content-Length", params.length); // POST request MUST have a Content-Length header (as per HTTP/1.1)

httpc.onreadystatechange = function() { //Call a function when the state changes.
if(httpc.readyState == 4 && httpc.status == 200) { // complete and no errors
    if(httpc.responseText == "success") {
        window.location.replace("files.html");
    }
    else if (httpc.responseText == "fail")
        alert("Invalid details");        
}
httpc.send(params);
}
}

如果选择查询在认证后返回一行，则回显“成功”，否则回显“失败”

【问题讨论】：

1).你的问题不清楚。2).在你的 Javascript 中你是如何传递参数的？
我有一个页面 login.html 必须使用 AJAX 将数据发布到 login.php。我在一些教程中得到了这个，但这不是我尝试的唯一方法。我一直没有得到结果。
试试这个教程...没有 jquery 1).w3schools.com/php/php_ajax_database.asp 。使用 Jquery 2).formget.com/submit-form-using-ajax-php-and-jquery
不工作。我不知道是什么问题。我过去创建过 PHP 应用程序，但都在 htdocs 下，但这个 html 文件不是，我不能将其保留为 PHP 页面。我直接用 PHP 尝试了 GET，所以我的 PHP 绝对没问题。

标签： php ajax

【解决方案1】：

我认为您的问题是您正在从函数 onreadystatechange 内部发送您的 params，它现在可能根本不起作用，因为一旦您发送某些东西，“状态”就会改变，但是您的在“状态”改变之前，代码不会发送任何东西......这应该可以解决它：

function authenticate() {
var email = document.getElementById("email").value;
var pass = document.getElementById("password").value;
var params = 'email=' + email + '&pass=' + pass; 
var httpc = new XMLHttpRequest(); // simplified for clarity
var url = "http://127.0.0.1/login/login.php";
httpc.open("POST", url, true); // sending as POST

httpc.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
httpc.setRequestHeader("Content-Length", params.length); // POST request MUST have a Content-Length header (as per HTTP/1.1)

httpc.onreadystatechange = function() { //Call a function when the state changes.
    if(httpc.readyState == 4 && httpc.status == 200) { // complete and no errors
        if(httpc.responseText == "success") {
            window.location.replace("files.html");
        }
        else if (httpc.responseText == "fail")
            alert("Invalid details");      
        else
            alert(httpc.responseText);  
    }
    // Your httpc.send was here
}

httpc.send(params); // <-- should be here
}

您还必须更改 HTML 以在调用 authenticate 函数后添加 return false;，以防止表单执行其“默认”操作（在“GET”模式下提交给自身）。

<form onsubmit="authenticate(); return false;">
<input type="text" placeholder="E-mail" name="email" id="email" />
<input type="password" placeholder="Password" name="password" id="password" />
<input type="submit" value="Login"/>
</form>

【讨论】：

它到底是做什么的？没有？还是每次都提示“无效的详细信息”？另外，能否请您添加 PHP 代码...它可能会有所帮助。
没有警报，没有迹象。我看到的只是 URL：www/index.html?email=keval&password=keval
忽略其他的回声，没有它们也一样。
哦，是的，您必须在调用 authenticate() 函数后添加 return false; 以防止表单元素的“默认”操作（在这种情况下，它提交到当前 url，在“获取”模式）。改成这样：<form onsubmit="authenticate(); return false;">