Concerning AJAX, PHP, and processing forms_问答_开发者

Concerning AJAX, PHP, and processing forms

开发者 https://www.devze.com 2022-12-12 14:25 出处：网络

I want to use AJAX to process a simple login form. I thought it\'d be pretty easy, but I just can\'t get it all to work.

相关专题：php

I want to use AJAX to process a simple login form. I thought it'd be pretty easy, but I just can't get it all to work.

index.php

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

if(window.XMLHttp开发者_高级运维Request) {
    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";
                }
?>

When I click the "Login" button, nothing happens. :(

When you click login on that form it submits back to the source URL. To prevent this you should really change your event handler to either this:

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

Alternatively you can do it from the submit handler on the form instead of the click handler on the submit button.

Secondly, to do AJAX cross-browser you need about 6 fallback conditions, not just XmlHttpRequest. See Getting Started with AJAX and the XMLHttpRequest Object.

In all honesty, for AJAX there's no way I'd consider doing it without a helper library. My preferred choice is jQuery, in which case the code ends up looking like this:

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

with:

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

Your PHP script is expecting variables to be passed as an HTTP POST request, but your XMLHTTPRequest is doing a GET request.

You're also doing XMLHttpRequestObject.send(null); -- instead, you should be passing your POST data to the .send() method.

As others have pointed out, using a JavaScript library like jQuery will make this kind of thing a lot simpler.

You are not calling the logIn() function anywhere. Most likely, it belongs into the onsubmit event of the form. Don't forget to