私は、ユーザーログイン可能なモバイルアプリケーションを構築し、それを行うためにPhoneGap、jQuery Mobile、AJAX、およびPHPを使用することを任されます。私は幾分簡単に始め、基本的なHTMLとPHPの構造を構築しようとしています。私はプログラマーではないので、このようなことはあまり経験がありません。しかし、私のシンプルなユーザーログインフォームでさえ、正しく動作していません。シンプルなjQueryモバイル/ AJAXログイン
私は、ユーザーのログインページ（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>
私たちは、ファイルメーカーを使用している（あなたを怖がらせることせてはいけない - それはに十分似ていますプログラマが何が起きているのかを理解できるはずのMySQL）とFileMaker PHP APIを使用してデータベースをモバイルアプリケーションに接続することができます。データベースは "included" 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値を使用する方法もあります）。
ありがとうございます。
マークありがとうございます。私はそれを働かせることができませんでした。 UserName入力と改訂されたonClick行にIDを追加した後でもまだ空白のページが表示されています。テキストフィールドに何も入力せずに[ログイン]ボタンをクリックすると、結果のページにも空白が読み込まれます。ところで、私はURLのUserNameフィールドと呼ばれるものが重要ですか？私はその特定の大文字を使用したばかりです。これは、フィールドの列がサンプルデータベースにあったためです。私は、何が渡され、ちょうど名前であるかを基本的に理解していることはわかりません。 – prophile
私はJSフィドルを作って、もう少しあなたを得ることができます。 https://jsfiddle.net/xh6651my/あなたのフォームとあなたのフィールドにIDを入れます。私はあなたの機能を一般的なvaildate関数に変更しました。私は値を渡すのではなく関数からの入力を参照します。私はあなたのajaxと要素参照をjquery表記法に変換しました。あなたが既にページにそれを含めているからです。私はこれが役立つことを願っていますあなたは、あなたがあなたのPHPページが探しているものと一致する必要がありますあなたのURLにしたいあなたの変数に名前を付けることができます。私はターゲットページを持っていないので、フィドルは完全に機能していないことに注意してください。 –