0

我正在创建一个单页应用程序。在页面初始加载时，我希望看到一个登录表单和一个注册表单（我会这样做）。登录后，我应该会看到一个个人资料页面 - 但是会出现一个空白页面，并且 URL 显示为：localhost/xxx/checklogin.php。我认为这意味着我的应用程序由于某种原因卡在 checklogin.php 脚本上。这是一些代码 - 所以你可以开始理解我的问题：

js/application.js

$(document).ready(function() {

    //load login form
    $.get('templates/loginform.php', function(data) {
        $('#login').html(data);
    });

    //load registration form
    $.get('templates/regform.php', function(data) {
        $('#register').html(data);
    });    

    //on login form submit do
    $("#loginform").submit(function(e) {
        e.preventDefault();
        if ($('#myusername').val() != '' || $('#mypassword').val() != '') {
            $.post("checklogin.php", $(this).serialize(), function() {
                $.get("templates/login_success.php", function(data) {
                    $("#main").html(data);
                    $("#login").remove();
                    $("#register").remove();
                });
            });
        } else {
            alert('Please enter a Username/Password');
        }
    });
});

我也试过：

js/application.js

...

$("#loginform").submit(function(e) {
    e.preventDefault();
    if ($('#myusername').val() != '' || $('#mypassword').val() != '') {
        $.post("checklogin.php", $(this).serialize(), function() {
            $("#main").load("templates/login_success.php");
            $("#login").remove();
            $("#register").remove();
        });
    } else {
            alert('Please enter a Username/Password');
    }
});

...

索引.php

<!DOCTYPE html>
<html>
<head>
<title>it IT</title>
    <script src="reqscripts/jquery.js" type="text/javascript"></script>
    <script src="js/application.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="css/application.css">
    <link href='http://fonts.googleapis.com/css?family=Londrina+Solid' rel='stylesheet' type='text/css'>
</head>
<body>  
    <div id="login"></div>
    <div id="register"></div>
    <div id="main"></div>
</body>
</html>

模板/loginform.php

<?php
session_start(); 
?>

<form id="loginform" method="post" action="checklogin.php">
    <h1 class="textaligncenter">Login</h1>
     <div id="loginuser">
        <input name="myusername" type="text" id="myusername">
    </div>
    <div id="usertext">
        <p>Username:</p>
    </div>
    <div id="loginpass">
        <input name="mypassword" type="password" id="mypassword">
    </div>
    <div id="passtext">
        <p>Password:</p>
    </div>
    <div id="submitbutton">
        <input type="submit" name="Submit" value="Login">
    </div>
</form>

首先（在 application.js 中），注册表单和登录表单被加载。登录时 - jquery 检查字段是否有内容，然后执行对 checklogin.php 脚本的 post 调用。该脚本执行登录用户所需的一切。在 post call 成功时 -templates/login_success.php被加载到maindiv 中，登录和注册表单被删除。就像我上面所说的，该应用程序似乎没有通过表单提交函数中的 post 调用。

4

1 回答 1

1

需要将初始获取请求中的登录表单提交功能移动到登录表单，如下所示：

js/application.js

$(document).ready(function() {
    $.get('templates/loginform.php', function(data) {
        $('#login').html(data);

        $("#loginform").submit(function(e) {
            e.preventDefault();
            if ($('#myusername').val() != '' || $('#mypassword').val() != '') {
                $.post("checklogin.php", $(this).serialize(), function() {
                    $("#main").load("templates/login_success.php");
                    $("#login").remove();
                    $("#register").remove();
                });
            } else {
                alert('Please enter a Username/Password');
            }
        });
    });

    $.get('templates/regform.php', function(data) {
        $('#register').html(data);
    });
});

我只需要有人来验证这是正确的——我不想要有错误的代码！

于 2013-06-21T16:47:49.967 回答