私は、ユーザー ログインが可能なモバイル アプリを構築し、それを行うために 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 値をどのように使用できるでしょうか)?
前もって感謝します。