dongmei9961 2009-11-20 00:12
浏览 17
已采纳

关于AJAX，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.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";
                }
?>

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

  • 写回答

3条回答 默认 最新

  • douzhuo8871 2009-11-20 00:15
    关注

    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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥20 完全没有学习过GAN，看了CSDN的一篇文章，里面有代码但是完全不知道如何操作
  • ¥15 使用ue5插件narrative时如何切换关卡也保存叙事任务记录
  • ¥20 软件测试决策法疑问求解答
  • ¥15 win11 23H2删除推荐的项目，支持注册表等
  • ¥15 matlab 用yalmip搭建模型，cplex求解，线性化处理的方法
  • ¥15 qt6.6.3 基于百度云的语音识别 不会改
  • ¥15 关于#目标检测#的问题：大概就是类似后台自动检测某下架商品的库存，在他监测到该商品上架并且可以购买的瞬间点击立即购买下单
  • ¥15 神经网络怎么把隐含层变量融合到损失函数中？
  • ¥15 lingo18勾选global solver求解使用的算法
  • ¥15 全部备份安卓app数据包括密码，可以复制到另一手机上运行