Question

我正在尝试使用AJAX来改进我的登录系统，以便在不刷新页面的情况下运行。我对ajax很新。我发现的教程都使用GET。我不想用get。这是我的代码：

login.php（我从中删除了CSS代码）

<html>
<script type="text/javascript" src = "login/loginJS.js"></script>
    <body>
    <center>
        <div class="rounded">
        <form method='POST' action = "processLogin.php">
            Username:<input type="text" class = "input1" name = "username"/><br>
            Password:<input type="password" class = "input1" name = "password"/><br>
            Remember Me?<input type="checkbox" name = "remember"/?><br>
            <?php
            session_start();
            echo'<p id="errorField" class="error"></p>';
            ?>
            <input type="submit" value = "Login" class = "button" onclick='process()'/>
            <b><p>New User? <a href="register.php">Register</a></p></b>
        </form>
        </div>
    </center>
    </body>
</html>

loginJS.js

xmlHttp = createXmlHttpRequestObject();

function createXmlHttpRequestObject()
{
    var xmlHttp;

    if (window.ActiveXObject){
        try{
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }catch(e){
        xmlHttp = false;
        }
    }else{
        try{
            xmlHttp = new XMLHttpRequest();
        }catch(e){
            xmlHttp = false;
        }
    }

    if(!xmlHttp){
        alert("The XML Http Request Failed");
    }else{
        return xmlHttp;
    }
}

function process(){
    if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0){
        login = encodeURIComponent(document.getElementById("loginField").value);
        xmlHttp.open("POST", "login/processLogin.php",true);
        xmlHttp.onreadystatechange = handleServerResponse;
        xmlHttp.send();
    }else{
        setTimeout('process()',1000);
    }
}

function handleServerResponse(){
    if(xmlHttp.readyState == 4){
        if(xmlHttp.status == 200){
            xmlResponse = xmlHttp.responseXML;
            xmlDocumentElement = xmlResponse.documentElement;
            message = xmlDocumentElement.firstChild.data;
            document.getElementById("errorField").innerHTML = message;
        }
    }
}

processLogin.php

      <?php
    session_start();
    header('Content-Type: text/xml');
    echo '<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>';
    echo "<response>";
        $username = $_POST['username'];
        $password = $_POST['password'];
        if ($username == '' or $password == '')
        {
            echo 'The username/password fields may not be blank.';
        }else{
            echo 'This is a test';
        }
    echo "</response>";
?>

所以我的问题是，我应该怎么做才能将变量放在输入文本和密码字段中，作为post变量放置，然后用javascript发送它。我只需要发送用户名和密码字段。要查看该网站， http://rukiryo.bugs3.com 这就是网站的样子。当我使用页面刷新方法时，登录按钮工作，但我无法弄清楚最后一步使其适用于非刷新。

谢谢，亚历

Answer 1

在上面的代码中，您似乎没有使用AJAX请求发送登录参数。此外，您忘记显式设置为Content-type标头，这在执行POST请求时是必需的。

    xmlHttp.open("POST", "login/processLogin.php",true);
    xmlHttp.onreadystatechange = handleServerResponse;
    xmlHttp.send();  // <--This is your problem

您发布没有参数的空白发送

以下是添加参数的方法

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
xmlhttp.send("username=carl&password=XYZ");

显然你必须对这些参数进行url编码，所以请使用它（这样就可以在URL中显示+，*等等并不会破坏你的生活）

var params= "username="+encodeURIComponent("carl")+"&password="+encodeURIComponent("XYZ");
xmlhttp.send(params);

哦，在PHP方面你应该运行urldecode来取回你的字符串

Answer 2

好的，这里是漫长的，简单的“香草”JavaScript方式。我假设你需要支持＆lt; IE6首先要做的是检查浏览器支持的xhr对象。

function createXHR() {
    if (typeof XMLHttpRequest !== "undefined") {
        return new XMLHttpRequest();
    } else {
        var versions = ["MSXML2.XmlHttp.6.0", "MSXML2.XmlHttp.3.0"];

        for (var i = 0, len = versions.length; i < len; i++) {
            try {
                var xhr = new ActiveXObject(versions[i]);
                return xhr;
            } catch (e) {
                // do nothing
            }
        }
    }
    return null;
}

接下来是将onsubmit事件处理程序附加到表单。这里是jQuery处理非DOM兼容浏览器的好地方。尽量不要冗长，这是解释这个问题的简短方法。

var form = document.form[0];

function addEventListener(el, evt, fn) {
    if (typeof addEventListener === "function") {
        el.addEventListener(evt, fn, false);
    } else {
        e.attachEvent("on" + evt, fn);
    }
}

然后添加onclick事件处理程序并传入要在submit上调用的函数：

addEventListener(form, 'click', process);

在深入研究过程函数之前，我将创建一个序列化表单字段的函数。这是我使用的一个：

function serialize(form) {
var parts = [],
    field = null,
    i,
    len,
    j,
    optLen,
    option,
    optValue;

for (i = 0, len = form.elements.length; i < len, i++) {
    field = form.elements[i];

    switch(field.type) {
        case "select-one":
        case "select-multiple":

            if (field.name.length) {
                for ( j = 0, optLen = field.options.length; j < optLen; j++) {
                    option = field.options[j];
                    if (option.selected) {
                        optValue = "";
                        if (option.hasAttribute) { //DOM compliant browsers
                            optValue = (option.hasAttribute("value") ? 
                                option.value : option.text);
                        } else {
                            optValue = (option.attributes["value"].specified ? 
                                option.value : option.text);
                        }
                        parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
                    }
                }
            }
            break;

        case undefined: //fieldset 
        case "file":    //file input
        case "submit":  //submit button
        case "reset":   //reset button
        case "button":  //custon button
            break;

        case "radio":    //radio button
        case "checkbox": //checkbox
            if (!field.name) {
                break;
            }
            /* falls through */

        default: 
            //don't include form fields without names
            if (field.name.length) {
                parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
            }
    }
}
return parts.join("&");
}

现在在流程函数中我们可以做这样的事情：

process(e) {
    var data = serialize(form);
    handlePostRequest(data, handleResponse); //initiates ajax request and passes in callback function
    e.preventDefault(); //prevents default behavior of loading new page with results;
}

Ok..whew。我们差不多完成了。

这是处理ajax调用的函数：

function handlePostRequest(data, callback) {
    var xhr = createXHR(),
        data = data;

    xhr.open("POST", "login/processLogin.php");
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            var status = xhr.status;
            if ((status >= 200 && status < 300)) || status === 304) {
                 callback(xhr.responseXML);
            } else {
              alert("An error occurred");
            }
        }
    };
    xhr.send(data);
}

然后最后一个和最后一个部分将是回调函数。

function handleResponse(response) {
    var xmlResponse = response,
        xmlDocumentElement = xmlResponse.documentElement,
        message = xmlDocumentElement.firstChild.data;

    document.getElementById("errorField").innerHTML = message;
}

看起来似乎势不可挡，但大多数帖子请求都遵循这种模式。老实说，这就是jQuery的美妙之处。但是，看看如何使用纯JavaScript完成它总是一个很好的教育体验。我确定我可能错过了什么，所以如果有任何问题让我知道！我要睡觉了！

Answer 3

我建议你使用jQuery，它的代码较少，而且更容易这是一个链接：http://api.jquery.com/jQuery.ajax/

Answer 4

我建议您使用jQuery，而不是手动创建XmlHttpRequest对象，因为它设法解决浏览器之间的一些兼容性问题，并使整个事情变得更简单。

使用jQuery，您将能够使用以下内容执行请求：

$.post({
    url: "http://example.com/....",
    data: {"username": "your_user_here", "password": "your_password_here"},
    success: function(){
        alert('Success!');
    }
});

无论如何，那里有很多选项，主题很长，很适合SO答案，所以我建议你看一下jQuery Ajax文档：http://api.jquery.com/category/ajax/

，特别是：http://api.jquery.com/jQuery.ajax/

更新

这里唯一的问题是php通常希望以表格编码格式接收数据，但是这样你的脚本将获得json数据..（所以，期望不能够使用$_POST）与其他语言（python，nodejs，..）这不是问题;我不知道如何处理这个问题，但我很有信心有办法做到这一点。当然，您可以回退发送表单编码数据，但JSON现在是这些事情的事实标准..

很抱歉，我记得不正确，但jQuery的默认行为是对POST数据进行urlencode，因此在使用上面的代码执行请求时，您可以从$_POST读取值。

如何正确发送POST数据？

4 个答案:

更新