0

私は、ユーザー ログインが可能なモバイル アプリを構築し、それを行うために PhoneGap、jQuery Mobile、AJAX、および PHP を使用する任務を負っています。私はプログラマーではなく、このような経験があまりないので、基本的な HTML および PHP 構造に基づいて、やや単純に開始しようとしています。しかし、単純なユーザー ログイン フォームでさえ、正しく機能していません。

ユーザー ログイン ページ (sampleindex.html) として機能する次の HTML コードがあります。

<!doctype html>
<html>

<head>

<meta charset="UTF-8">

<title>Untitled Document</title>

<link rel="stylesheet" type="text/css" href="/themes/P32-Manager.css">   
<link rel="stylesheet" type="text/css" href="/themes/jquery.mobile.icons.min.css">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css">    
<link rel="stylesheet" type="text/css" href="/themes/jQuery-Overrides.css">    
<link rel="stylesheet" type="text/css" href="/css/styles.css">

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<script>
function userLogin(email) {
    if (email == "") {
        document.getElementById("logincontainer").innerHTML = "";
        return;
    }
    else {
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        }
        else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("logincontainer").innerHTML = xmlhttp.responseText;
            }
        };
        xmlhttp.open("GET","samplehome.php?UserName="+email,true);
        xmlhttp.send();
    }
}
</script>

</head>

<body>

<div data-role="page" id="logincontainer">

    <form action="sampleindex.html" method="get">

        <div style="text-align:center; display:inline-block;">

            <div data-role="fieldcontain" style="text-align:center; position:relative; top:0em; left:0.5em; width:100%; margin:auto; border:0;">
                <label for="username" style="display:block; width:350px; text-align:left;">Username (Email)
                <input data-clear-btn="false" name="UserName" type="text" value="" class="ui-input-text" style="height:40px; font-size:18px;">
                </label>
            </div>

            <div data-role="fieldcontain" style="text-align:center; position:relative; top:-1.25em; left:0.5em; width:100%; margin:auto; border:0;">
                <label for="password" style="display:block; width:350px; text-align:left;">Password
                <input data-clear-btn="false" name="Password" type="password" value="" class="ui-input-text" autocomplete="off" style="height:40px; font-size:18px;">
                </label>
            </div>

        </div>

        <div data-role="fieldcontain" style="text-align:center; position:relative; top:-0.5em; left:-1em; width:100%; margin:auto; border:0;">
            <div id="login-button" style="position:relative; left:0em; width:300px; height:62px; margin:auto; border:0; background-color:#ffffff;" data-inline="true">
                <input data-role="button" name="loginbutton" type="submit" value="Login" style="position:absolute; left:0em;" onClick="userLogin(UserName);">
            </div>
        </div>

    </form>         

</div>

</body>

</html>

データベースと FileMaker PHP API を使用して、そのデータベースをモバイル アプリに接続します。データベースは「含まれている」dbaccess.php ファイル (ここには表示されていません) を介して接続され、使用されるレイアウトは「Demo php」と呼ばれます。URL で渡したい最初の値 (電子メール アドレス形式) は "UserName" と呼ばれ、"UserName" というデータベース列に対応します。URL からその UserName を $_GET してから、対応する「FirstName」を返したいと思います。さらに、送信されたクエリに対応するデータベース行から RecordID を取得して、ログインしている各ユーザーに固有の情報を提供できるようにします。

ここに私のPHPファイル(samplehome.php)があります:

<?php
session_start();
$_SESSION['logged-in']=0;
?>

<?php 

include ("../../dbaccess.php"); 

$username = urldecode($_GET['UserName']);

if(isset($_GET['loginbutton']) and (!empty($_GET['UserName']) and !empty($_GET['Password'])) )
{
$username = '==' . urldecode($_GET['UserName']);
$password = md5($_GET['Password']);
$request = $fm->newFindCommand('Demo php');
$request->addFindCriterion('UserName', $username);
$request->addFindCriterion('Password', $password);
$result = $request->execute();

if (FileMaker::isError($result)) 
    {
    $request = $fm->newFindAllCommand('Demo php');
    $result = $request->execute();
    }

$found = $result->getFoundSetCount();

$records = $result->getRecords();

if($found == 1)
    {
    $_SESSION['logged-in']=1;

    echo '<table border="1">
              <tr>
                    <th>First Name</th>
              </tr>';

    foreach ($records as $record)
    {
        echo '<tr>';
        echo '<td>' . $record->getField('FirstName') . '</td>';
        echo '</tr>';
    }

    echo '</table>';

    }

else
    {
    $_SESSION['logged-in']=0;

    echo 'nope';
    }

}   

?>

現在、[ログイン] をクリックしても何も返されず、jQuery テーマの背景色の空白ページが表示されます。(この空白の結果は、jQuery スタイルシートとスクリプトを使用しない場合にも発生します。) "get" を使用しているにもかかわらず、URL には何も渡されません。これは、jQuery と AJAX を使用しているためだと思います。誰が何が悪いのか知っていますか (また、ページが AJAX/jQuery で更新されていないにもかかわらず、「UserName」などの渡された ID 値をどのように使用できるでしょうか)?

前もって感謝します。

4

1 に答える 1

0

入力した値を正しく参照していないと思います。

 onClick="userLogin(UserName);"

ここに UserName がありますが、このコンテキストでは、UserName は javascript 変数であり、私が知る限り定義されていません。

userLogin 関数で最初に行うことは次のとおりです。

function userLogin(email) {
    if (email == "") {
        document.getElementById("logincontainer").innerHTML = "";
        return;
    }

この場合、email は未定義 (UserName が未定義であるため) であり、javascript は undefined と "" を比較します。これは true であり、ページを空白にします。

UserName 入力の値を渡すか、関数から値を取得する必要があります。

まず、ユーザー名の入力に ID を割り当てます。

<input data-clear-btn="false" name="UserName" type="text" value="" class="ui-input-text" style="height:40px; font-size:18px;" id="UserName">

次に、onclick を変更します。

 onClick="userLogin(document.getElementById('UserName').value);"

これにより、最初の html ブランクを通過できるはずです。その後どうなるかわかりません。

ユーザー名フィールドが空白の場合にページをリロードする必要がないように、html の空白をアラートなどに置き換えることもできます。

于 2016-04-12T20:54:53.183 に答える