Ich habe den Auftrag, eine benutzeranmeldungsfähige mobile App zu erstellen und dazu PhoneGap, jQuery Mobile, AJAX und PHP zu verwenden. Ich versuche etwas einfach zu starten und baue eine einfache HTML- und PHP-Struktur auf, da ich kein Programmierer bin und nicht viel Erfahrung in diesem Bereich habe. Aber selbst mein einfaches Benutzeranmeldeformular funktioniert nicht richtig.Einfache jQuery Mobile/AJAX-Anmeldung
Ich habe den folgenden HTML-Code, wie der Benutzer Login-Seite (sampleindex.html) dienen: Sie
<!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>
Wir verwenden Filemaker (lassen Sie sich nicht, dass erschrecken - es ähnlich ist genug MySQL, dass Programmierer in der Lage sein sollten zu verstehen, was los ist) für unsere Datenbank und die FileMaker PHP API, um diese Datenbank mit der mobilen App zu verbinden. Die Datenbank ist über die "included" Datei dbaccess.php verbunden (hier nicht gezeigt) und das verwendete Layout heißt "Demo php". Der erste Wert, den ich in meiner URL übergeben möchte, ein E-Mail-Adressformat, heißt "UserName" und entspricht der Datenbankspalte namens "UserName". Ich möchte $ _GET diesen Benutzernamen von der URL und dann den entsprechenden "FirstName" zurückgeben. Darüber hinaus möchte ich die RecordID aus der Datenbankzeile abrufen, die der gesendeten Abfrage entspricht, sodass ich jedem angemeldeten Benutzer ihre spezifischen Informationen bereitstellen kann. (Nicht zu Sorgen um die Sicherheit noch, wie ich versuche nur ein Proof of Concept zu zeigen, damit die "get" in Form.)
Hier ist meine PHP-Datei (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';
}
}
?>
Momentan wird nichts zurückgegeben, wenn ich auf "Login" klicke, nur eine leere Seite mit der Hintergrundfarbe meines jQuery-Themes. (Dieses leere Ergebnis tritt auch auf, wenn ich die jQuery-Stylesheets und -Skripts nicht verwende.) Die URL enthält trotz der Verwendung von "get" nichts. Was ich vermute, ist wegen meiner Verwendung von jQuery und AJAX. Wer weiß, was falsch ist (und auch, wie ich die übergebenen ID-Werte wie "UserName" verwenden könnte, obwohl die Seite nicht mit AJAX/jQuery aktualisiert wurde)?
Vielen Dank im Voraus.
Mark, danke. Ich konnte es jedoch nicht zur Arbeit bringen. Ich bekomme immer noch eine leere Seite, nachdem ich die ID zur UserName-Eingabe und der überarbeiteten onClick-Zeile hinzugefügt habe. Wenn Sie auf die Schaltfläche "Anmelden" klicken, auch wenn nichts in die Textfelder eingegeben wurde, wird die resultierende Seite ebenfalls leer geladen. Übrigens spielt es eine Rolle, wie ich das Feld UserName in der URL nenne? Ich habe gerade diese Groß- und Kleinschreibung verwendet, weil die Spalte des Feldes in der Beispieldatenbank enthalten war. Ich weiß nicht, dass ich ein grundlegendes Verständnis davon habe, was passiert ist und was nur ein Name ist. – prophile
Ok, ich habe eine JS Fiddle gemacht, die dich hoffentlich ein bisschen weiter bringen wird. https://jsfiddle.net/xh6651my/ Ich lege eine ID auf dein Formular und dein Feld. Ich habe Ihre Funktion in eine allgemeine Vaildate-Funktion geändert. Ich referenziere die Eingaben von der Funktion, anstatt Werte zu übergeben. Ich habe deine Ajax- und Elementreferenzen in die Jquery-Notation konvertiert, da du sie bereits auf der Seite einfügst. Ich hoffe das hilft. Sie können Ihre Variablen benennen, was auch immer Sie auf der URL wollen, Sie müssen nur übereinstimmen, wonach Ihre PHP-Seite sucht. Beachten Sie, dass die Geige nicht voll funktionsfähig ist, da ich die Zielseiten nicht habe. –