关于AJAX、PHP和处理表单_Php_Ajax

关于AJAX、PHP和处理表单

php ajax

关于AJAX、PHP和处理表单,php,ajax,Php,Ajax,我想使用AJAX处理一个简单的登录表单。我原以为这很容易，但我就是没法把它都做好 index.php <html> <head> <title>AJAX Login</title> <script type="text/javscript"> var XMLHttpRequestObject = false; if(window.XMLHttpRequest) { XMLHttpRequestObject = new XMLH

我想使用AJAX处理一个简单的登录表单。我原以为这很容易，但我就是没法把它都做好

index.php

<html>
<head>
<title>AJAX Login</title>
<script type="text/javscript">
var XMLHttpRequestObject = false;

if(window.XMLHttpRequest) {
    XMLHttpRequestObject = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
        XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
        }

    function logIn() {
        if(XMLHttpRequestObject) {
            var obj = document.getElementById("show");
            XMLHttpRequestObject.open("GET", "login.php");

            XMLHttpRequestObject.onreadystatechange = function() {
                if(XMLHttpRequestObject.readyState == 4
                   && XMLHttpRequestObject.status == 200) {
                        obj.innerHtml = XMLHttpRequestObject.responseText;
                    }
                }

                XMLHttpRequestObject.send(null);
            }
        }

</script>
</head>
<body>
<form action="" method="post">
<table>
    <tr>
        <td>Username:</td>
        <td><input type="username" name="username" /></td>
    </tr>
    <tr>
        <td>Password:</td>
        <td><input type="password" name="password" \ /></td>
    </tr>
    <tr>
        <td colspan="2"><input type="submit" name="submit" value="login" onclick="logIn();" /></td>
    </tr>
</table>
</form>
<div id="show">should go here</div>
</body>
</html>

<?php
$username = "andrew";
$password = "andrew";

if($_POST['username'] != "") {
    if($_POST['password'] != "") {
        if(($_POST['username'] == $username) && ($_POST['password'] == $password)) {
            echo "Login Success!";
            }
            else {
                echo "Login Failure!";
                }
            }
            else {
                echo "You didn't enter a password";
                }
            }
            else {
                echo "You didn't enter a username";
                }
?>

当我单击“登录”按钮时，什么也没有发生：

PHP脚本希望变量作为HTTP POST请求传递，但XMLHTTPRequest正在执行GET请求

您还正在执行XMLHttpRequestObject.sendnull；-相反，您应该将POST数据传递给.send方法

正如其他人所指出的，使用类似JavaScript的库将使这类事情变得更加简单。

您没有在任何地方调用登录函数。很可能，它属于表单的onsubmit事件。别忘了

return false;

最后。

当您单击该表单上的登录时，它会提交回源URL。要防止出现这种情况，您应该将事件处理程序更改为：

function logIn() {
  ...
  return false;
}

或者，您也可以从表单上的提交处理程序而不是提交按钮上的单击处理程序执行此操作

其次，要实现AJAX跨浏览器，您需要大约6个回退条件，而不仅仅是XmlHttpRequest。看

老实说，对于AJAX来说，没有助手库，我不可能考虑这样做。我的首选是jQuery，在这种情况下，代码最终会如下所示：

<form id="loginform" method="post">
<table>
  <tr>
    <td>Username:</td>
    <td><input type="username" id="username" name="username" /></td>
  </tr>
  <tr>
    <td>Password:</td>
    <td><input type="password" id="password" name="password" \ /></td>
  </tr>
  <tr>
    <td colspan="2"><input type="button" id="login" value="Login"/></td>
  </tr>
</table>
</form>

与：

我建议您使用一些JavaScript库，例如jQuery。这使得AJAX变得非常简单，并且可以在所有或几乎所有浏览器上使用；，所以这不是问题所在。但回报是虚假的；这是一个好主意，因为您希望取消onclick事件，否则它会触发onsubmit。对了一半：因为onclick事件没有取消，所以表单会触发submit。但是，只有在启动登录函数时才会调用AJAX.send，而登录函数并不是在页面启动时启动的。此外，尽管跨浏览器兼容性很重要，jQuery确实让这项工作更容易，但如今所有主流浏览器都支持XmlHttpRequest。所以，仅仅使用它而不使用回退已经不像以前那么疯狂了。我想这会解决我的问题。当我发现jQuery时，我只是对它做了一些修改，但最近我觉得很无聊，所以我在学校的图书馆里买了一本AJAX书籍。是否有任何一点通过它并尝试学习Ajax，或者我应该去找一些jQuery教程并尝试学习吗？老实说，我认为jQuery对于JavaScript开发来说是必不可少的，尤其是对于Ajax。它只是解决了太多的跨浏览器问题，而且在20K以下非常小，并且可以缓存。我想，现在没有任何理由知道要创建的对象的正确序列来执行跨浏览器XmlHttpRequest。它很简单：$'loginForm'.ajaxForm；

<script type="text/javascript">
$(function() {
  $("#login").click(function() {
    $("#show").load("login.php", {
      username: $("#username").val(),
      password: $("#password").val()
    }, function() {
      $("#loginform").hide(); // for example
    });
  });
});
</script>