困惑于AJAX的基础知识

Question

所以现在,我只是使用基本表单来检查密码.我希望它检查密码并基本保留在page.html上,以便我可以使用JavaScript来提醒错误的密码或其他内容.我真的不确定该怎么做.它似乎会带我到check.php.我对整个过程不太确定,任何帮助表示赞赏!谢谢!

page.html中

<form action="check.php" method="post">
    <input type="password" name="password" />
    <input type="submit" value="Submit" />

</form>

check.php

   <?php
    $password = $_POST['password'];
    if ( $password != "testing" ) {
        die();
    }
?>

Answer 1

PHP运行在Web服务器上,该服务器通常在物理上不同的机器(服务器端)上运行,而不是运行webbrowser(客户端).这些机器通常通过网络连接.HTTP是一种网络协议.webbrowser发送HTTP请求.Web服务器检索HTTP请求,其URL指示应将其转发到PHP以进行进一步处理.PHP检索HTTP请求并执行处理并返回HTTP响应.通常是普通的香草HTML页面的味道.Web服务器将HTTP响应发送回Web浏览器.

JavaScript在webbrowser上运行,因为它在Web服务器上运行,所以对PHP一无所知.PHP反过来也对JavaScript一无所知(尽管它可以产生一些JS代码,而这些代码又通过HTTP发送到webbrowser).在JS和PHP之间进行通信的唯一方法是HTTP.让JS触发HTTP请求并检索HTTP响应的方法之一就是使用XMLHttpRequest.这是Ajax背后的核心技术.

我在你的问题历史中看到你已经熟悉了jQuery.它是一个JS库,具有许多方便的函数来触发ajaxical请求.在这种特殊情况下,您想使用$.post.例如

$('#formId').submit(function() {
    $.post('check.php', $(this).serialize(), function(valid) {
        if (valid) {
            alert('Valid!');
        } else {
            alert('Invalid!');
        }
    });
    return false; // Important! This blocks form's default action.
});

在check.php:

<?php
    echo $_POST['password'] != "testing";
?>

然而,这不是不引人注目的.如果用户已禁用JS,则所有操作都将失败.最好的办法是检查PHP是否有jQuery触发了ajaxical请求并进行相应处理:

if ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {
    // Ajax.
} else {
    // No ajax.
}

或者,您可以让jQuery也可以访问不同的URL或附加额外的参数.

更新:以下是不使用jQuery时JavaScript的外观:

document.getElementById('formId').onsubmit = function() {
    var xhr = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            if (xhr.responseText) {
                alert('Valid!');
            } else {
                alert('Invalid!');
            }
        }
    }
    xhr.open('POST', 'check.php', true);
    xhr.send(serialize(this));
    return false; // Important! This blocks form's default action.
}

function serialize(form) {
    var query = '';
    for(var i = 0; i < form.elements.length; i++) {
        var e = form.elements[i];
        if (!e.disabled && e.name 
            && ((e.type != 'checkbox' && e.type != 'radio') || e.checked)
            && (e.type != 'submit' || e == document.lastClicked))
        {
            if (query.length) query += '&';
            query += e.name + '=' + encodeURIComponent(e.value);
        }
    }
    return query;
}   

document.onclick = function(e) {
    e = e || event;
    document.lastClicked = e.target || e.srcElement;
}

臃肿和冗长,是的;)