0

我的任务是构建一个支持用户登录的移动应用程序,并使用 PhoneGap、jQuery Mobile、AJAX 和 PHP 来完成它。我试图从简单的开始并建立在基本的 HTML 和 PHP 结构上,因为我不是程序员,在这方面没有太多经验。但即使是我简单的用户登录表单也无法正常工作。

我有以下 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 PHP API 使用 FileMaker(不要让这吓到你——它与 MySQL 非常相似,程序员应该能够理解正在发生的事情)来将该数据库连接到移动应用程序。数据库通过“包含”的 dbaccess.php 文件(此处未显示)连接,使用的布局称为“Demo php”。我想在我的 URL 中传递的第一个值(电子邮件地址格式)称为“用户名”,对应于名为“用户名”的数据库列。我想从 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。任何人都知道出了什么问题(而且,尽管页面没有使用 AJAX/jQuery 刷新,但我如何能够使用传递的 ID 值,例如“UserName”)?

提前致谢。

4

1 回答 1

0

我认为您没有正确引用输入的值。

 onClick="userLogin(UserName);"

在这里你有用户名,但在这种情况下,用户名是一个 javascript 变量,据我所知,它是未定义的。

在您的 userLogin 函数中,您要做的第一件事是:

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-12T20:54:53.183 回答