簡單的jQuery Mobile/AJAX登錄

我負責構建一個支持用戶登錄的移動應用程序，並使用PhoneGap，jQuery Mobile，AJAX和PHP來執行此操作。我試圖簡單地開始，並建立在基本的HTML和PHP結構上，因爲我不是程序員，也沒有太多的經驗。但即使我簡單的用戶登錄表單不能正常工作。簡單的jQuery Mobile/AJAX登錄

我有以下的HTML代碼將作爲用戶登錄頁面（sampleindex.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（不要讓這種嚇唬你 - 這是類似足夠MySQL程序員應該能夠理解我們的數據庫和FileMaker PHP API將數據庫連接到移動應用程序。數據庫通過「包含的」dbaccess.php文件（此處未顯示）連接，所使用的佈局稱爲「Demo php」。我想通過我的URL（電子郵件地址格式）傳遞的第一個值稱爲「UserName」，並與名爲「UserName」的數據庫列相對應。我想從URL中獲取_GET UserName，然後返回相應的「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。任何人都知道什麼是錯的（還有，我將如何使用傳遞的ID值，例如「UserName」，儘管頁面不能用AJAX/jQuery刷新）？

在此先感謝。

來源

2016-04-12 prophile

我想你沒有正確引用輸入的值。

onClick="userLogin(UserName);"

這裏你有用戶名，但在這種情況下，UserName是一個JavaScript變量，據我所知，它是未定義的。

在你的用戶登陸功能，你要做的第一件事是：

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

在這種情況下

，電子郵件是不確定的（因爲用戶名是不確定的）和JavaScript比較未定義爲「」，這是真實的，空白出你的頁面。

您需要傳遞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-12 20:54:53

馬克，謝謝。儘管如此，我還是無法完成它的工作。將ID添加到用戶名輸入和修訂的onClick行後，我仍然收到一個空白頁。即使沒有填充文本字段，單擊「登錄」按鈕時，結果頁面也會空白。順便說一句，這與我稱之爲URL中的UserName字段有關嗎？我只是使用了特定的大寫字母，因爲這是該示例數據庫中該字段的列。我不知道我對通過什麼以及什麼是一個名字有基本的瞭解。 – prophile

好的，我做了一個JS小提琴，希望能讓你更進一步。 https://jsfiddle.net/xh6651my/我在你的表單和你的字段上加了一個id。我將你的功能改變爲一般的vaildate功能。我引用來自函數的輸入而不是傳入值。我將您的ajax和元素引用轉換爲jquery符號，因爲您已經將它包括在頁面中。我希望這有幫助。你可以在網址上爲你的變量命名，你只需要匹配你的php頁面正在尋找的東西。請注意，由於我沒有目標頁面，小提琴功能不完整。 –

簡單的jQuery Mobile/AJAX登錄

回答

相關問題