SPA登录系统无法使用ajax/jquery/php

我正在创建一个单页应用程序。在初始加载页面时，我希望看到一个登录表单和一个注册表单（我会这样做）。登录后，我应该会看到一个配置文件页面，但是会出现一个空白页面，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');
        }
    });
});

...

$("#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');
    }
});

...

$(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);
    });
});

我也尝试过：

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');
        }
    });
});

...

$("#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');
    }
});

...

$(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);
    });
});

index.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调用成功时-

templates/login\u success.php

被加载到

main

div中，并且登录和注册表单被删除。正如我上面所说，应用程序似乎无法通过表单提交功能中的post调用。

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

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');
        }
    });
});

...

$("#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');
    }
});

...

$(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);
    });
});

---

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

快速提示：

session_start（）

需要出现在使用的每个

.php

文件中。正如你所知。@Fred如果它已经在加载到索引页的模板中，我是否需要它在我的索引页上？最好这样做，是的。尝试不同的组合。@Fred我在index.php中添加了

session\u start（）

，但仍然存在相同的问题-我在所有其他php页面上都有这个问题…@Fred我想我明白了…我必须移动一些jquery-我会回答我自己的问题…你能看看它并向我解释一下流程吗？我当然不是

pro

，但就我目前所知，我认为这看起来是对的。嘿，如果它有效而且看起来不错，那么我会说它很完美；-）@弗雷德，谢谢！但是我遇到了另一个问题：（关于我的注册脚本…我要提出一个新问题…这个问题很奇怪-我会将url发布到itI，我可能不会立即回复，这里是连接问题。我正在进行故障排除。@Fred很酷-只要可以-问题如下：