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

...

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 呼び出しを実行します。このスクリプトは、ユーザーのログインに必要なすべてを行います。ポスト コールが成功すると、 div にtemplates/login_success.php読み込まれ、ログイン フォームと登録フォームが削除されます。main上で述べたように、アプリはフォーム送信機能内からのポスト呼び出しを通過していないようです。

4

1 に答える 1