关于AJAX，PHP和处理表格

我想使用AJAX处理简单的登录表单。我认为这很容易，但我无法完成所有工作。关于AJAX，PHP和处理表格

的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>

的login.php

<?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"; 
       } 
?>

当我点击 “登录” 按钮，没有任何反应。 :(

来源

2009-11-20 Andrew

我推荐你用一些JavaScript库，例如jQuery的。这使AJAX变得如此简单，并且正在处理所有（或几乎所有）浏览器。 – Franz 2009-11-20 00:14:30

当您单击该表单上的登录名时，它将提交回源URL。为了防止这种情况，你应该真正改变你的事件处理程序，要么是：

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

或者可以从提交处理程序做到这一点的形式，而不是提交按钮单击处理程序上。其次，要做AJAX跨浏览器，你需要大约6个后备条件，而不仅仅是XmlHttpRequest。请参阅Getting Started with AJAX and the XMLHttpRequest Object。

诚实地说，对于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>

有：

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

来源

2009-11-20 00:15:05 cletus

右半部分：因为'onclick'事件未被取消，表单确实会触发提交。但是，直到'logIn（）'函数触发时，AJAX'.send（）'才会被调用，而不是在页面启动时。 – 2009-11-20 00:20:19

另外，虽然跨浏览器兼容性很重要，而且jQuery确实使工作更轻松，但现在所有主流浏览器都支持'XmlHttpRequest'。所以仅仅使用它而没有回退并不像以前那么疯狂。 – 2009-11-20 00:24:05

我想这会解决我的问题。我只是对jQuery产生了一些困惑（当我发现它的时候，我就开始玩弄它），但最近我感到无聊，所以我在我学校的图书馆拿了一本AJAX书。有没有经过它，试图学习AJAX，或者我应该去找一些jQuery教程，并试图学习？ – Andrew 2009-11-20 00:26:14

你的PHP脚本期待变量作为HTTP POST请求通过，但你的XMLHTTPRequest是做一个GET请求

你也做XMLHttpRequestObject.send(null); - 相反，你应该通过你的POST数据到.send()方法。

正如其他人所指出的那样，使用JavaScript库，例如jQuery会让这种事情简单了很多。

来源

2009-11-20 00:14:09

你是不是调用login（）函数的任何地方。最有可能的，它属于onsubmit事件的形式。别忘了

return false;

最后。

来源

2009-11-20 00:14:12

不，他用'onclick =“logIn（）;”'得到了一个''，所以这不是问题。但是'return false;'是一个好主意，因为你想取消'onclick'事件，因为否则它会触发'onsubmit'。 – 2009-11-20 00:18:44

关于AJAX，PHP和处理表格

回答

相关问题