对于一个项目,我们必须创建一个基本的登录系统。我正在尝试使用 REST 来管理我的整个页面。现在我相信我在这里遗漏或误解了一些关键概念,但我多年来一直试图弄清楚如何做到这一点。本练习不允许使用库,因此我无法使用 JQuery。
所以这是我的问题:我有一个 .js 文件,用于检查用户名长度和密码长度等......在这个 .js 文件中,我还有一个 ajax 函数,用于将用户名和电子邮件发送到 PHP 来验证尚无使用 SQL 的现有用户使用该电子邮件或用户名。
function checkUser()
{
var ajax = new Ajax(); // instantiates my external ajax class
var email = document.getElementById("newEmail").value;
var username = document.getElementById("newUserName").value
ajax.post("index.php?method=register&check=check", "newEmail=" + email + "&newUserName=" + username, callbackCatch)
}
function callbackCatch(param)
{
var responseMessages = JSON.parse(param.responseText);
emailMessage = responseMessages.emailMessage;
userNameMessage = responseMessages.userNameMessage;
userEmailIsOk = responseMessages.userEmailIsOk;
userNameIsOk = responseMessages.userNameIsOk;
release = true;
if((userEmailIsOk + userNameIsOk) != 2)
{
console.log(userEmailIsOk + userNameIsOk);
release = false;
}
updateMessageFields();
}
我得到一个 JSON 字符串,我对其进行解析,然后与我的表单值进行比较。当一切都找到后,我点击表单页面上的注册按钮,将所有字段发送回我的 php 文件。然而,似乎当我这样做时,每次都会以某种方式访问我的外部ajax类,并且我收到错误: NS_NOINTERFACE:组件没有请求的接口(interface)。
我假设,因为每当我发帖时 AJAX 都会在后台运行,即使从我的表单中,它也会尝试发回我的参数,在这种情况下,该参数是不兼容的。
我不知道如何解决这个问题。我的 PHP 文件应该处理传输,如下所示:
require_once("../database/table.php");
类测试{
private $SQLtable;
private $newEmail;
private $newPswrd;
private $newUserName;
private $newFullName;
public function test()
{
$this->SQLtable = new table();
$this->initClassVars();
$this->generateUserName();
$this->regUser();
}
function initClassVars()
{
if(isset($_POST["newPassword"]))
{
$this->newPswrd = $_POST["newPassword"];
}
if(isset($_POST['newUserName']))
{
$this->newUserName = $_POST['newUserName'];
}
if(isset($_POST["newEmail"]))
{
$this->newEmail = $_POST["newEmail"];
}
if(isset($_POST["newFullName"]))
{
$this->newFullName = $_POST["newFullName"];
}
}
function generateUserName()
{
if(isset($_POST["newFullName"]))
{
$suggestedUserName = str_replace(" ", "", $this->newFullName);
$this->newUserName = $suggestedUserName;
}
}
function regUser()
{
$this->SQLtable->registerUser($this->newEmail, $this->newPswrd, $this->newFullName, $this->newUserName);
$sessionKey = $this->genKey();
$this->SQLtable->authUser($this->newEmail, $this->newPswrd, $sessionKey);
header("location:Location:index.php?method=feed&key=$sessionKey&user=$this->newEmail");
exit;
}
function genKey($length = 16)
{
$options = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; //Range
$key = ""; //Empty holder for key
for($i = 0; $i < $length; $i++)
{
$code = rand(0, strlen($options) - 1);
$key .= $options[$code]; // Loops through as long as the $length is set and adds a random string char from $options to build a new key.
}
return $key;
}
}
如您所见,我正在尝试使用 API key 来控制身份验证。我还没有让 cookie 与它一起使用,但在我弄清楚如何解决这个注册问题后,我会这样做。
抱歉,如果我不清楚。这是我在 stackoverflow 上的第一个问题,基本上我一生中从未写过一行代码,直到大约 8 个月前,所以请忍受我的新代码 :D。谢谢..
好的,这是 HTML 以及调用函数的位置: 这是我的表单 html 文件。当我一遍又一遍地使用它们时,文档类型和标题是单独添加的。
<body>
<h1> Thanks! <!-- $user -->, you're almost there. We just need a few more details </h1>
<form id="registerUser" name="registerUser" action="index.php?method=test" method="post">
<p>
<label for="newFullName">Full Name: </label>
<input type="text" id="newFullName" name="newFullName" value="$newFullName" />
<span id="nameMessage"></span>
</p>
<p>
<label for="newUserName">User Name: </label>
<input type = "text" id="newUserName" name="NewUserName" value="$newUserName" />
<span id="nicknameMessage"><!-- $newUserNameMessage --></span>
</p>
<p>
<label for="newEmail">Email: </label>
<input type="text" id="newEmail" name="newEmail" value="$newEmail" />
<span id = "newEmailMessage"><!-- $newEmailMessage --></span>
</p>
<p>
<label for ="newPassword">Password: </label>
<input type="password" id="newPassword" name="newPassword" value="$newPswrd" />
<span id = "newPasswordMessage"></span>
</p>
<input type="submit" id="register" disabled="disabled" value="Register" onclick=""/>
</form>
<p><a href="../../../Index.html"> Click here to go back to the login site and login. </a></p>
<script type="text/javascript" language="javascript" src="../../js/net/ajaxHandler.js"> </script>
<script type="text/javascript" language="javascript">var bootstrap = new ajaxHandler(); bootstrap.init(); </script>
</body>
</html>
整个JS文件是这样的..它有点乱,但这是因为我一直在玩弄它:
var ajaxHandler = function()
{
var self = this;
var release = true;
var nameField;
var userField;
var emailField;
var passWordField
var emailMessage;
var userNameMessage;
self.init = function()
{
addEventListeners();
checkFormForErrors();
}
self.redirect = function ()
{
}
function addEventListeners()
{
nameField = document.getElementById("newFullName");
userField = document.getElementById("newUserName");
emailField = document.getElementById("newEmail");
passWordField = document.getElementById("newPassword");
Event.addEventListener(nameField, 'click', checkFormForErrors);
Event.addEventListener(userField, 'click', checkUser);
Event.addEventListener(emailField, 'click', checkUser);
Event.addEventListener(passWordField, 'click', checkFormForErrors);
Event.addEventListener(nameField, 'keyup', checkFormForErrors);
Event.addEventListener(userField, 'keyup', checkUser);
Event.addEventListener(emailField, 'keyup', checkUser);
Event.addEventListener(passWordField, 'keyup', checkFormForErrors);
}
function checkPassword()
{
var passWordIsOk;
var patt = /\s/;
var whiteSpace = patt.test(passWordField);
var passwordLength = passWordField.value.length;
if (passwordLength < 8 )
{
document.getElementById("newPasswordMessage").innerHTML = "Your passowrd must be at least 8 charachters long. ";
passWordIsOk = false
if (whiteSpace)
{
document.getElementById("newPasswordMessage").innerHTML += "Your Password cannot contain any spaces.";
passWordIsOk = false
}
}
else
{
document.getElementById("newPasswordMessage").innerHTML = "Password looks good";
passWordIsOk = true
}
return passWordIsOk;
}
function checkName()
{
var userNameIsOk;
var nameMessage = document.getElementById("nameMessage");
if (!nameField.value)
{
nameMessage.innerHTML = "You need to enter a name."
userNameIsOk = false;
}
else
{
nameMessage.innerHTML = "Name looks great."
userNameIsOk = true;
}
return userNameIsOk;
}
function checkEmailSyntax()
{
var EmailIsOk = true
var patt = /^([\w!.%+\-])+@([\w\-])+(?:\.[\w\-]+)+$/ ;
var format = patt.test(emailField.value);
if (!format)
{
document.getElementById("newEmailMessage").innerHTML = "Your email does not appear to be in the right format."
EmailIsOk = false;
}
return EmailIsOk
}
function checkFullNameSyntax()
{
var nameIsOk = true
if (document.getElementById("newUserName").value == "")
{
document.getElementById("nicknameMessage").innerHTML = "You must enter a username. You can always change it later."
nameIsOk = false
}
return nameIsOk;
}
function checkUser()
{
var ajax = new Ajax();
var email = document.getElementById("newEmail").value;
var username = document.getElementById("newUserName").value
ajax.post("index.php?method=register&check=check", "newEmail=" + email + "&newUserName=" + username, callbackCatch)
}
function callbackCatch(param)
{
var responseMessages = JSON.parse(param.responseText);
emailMessage = responseMessages.emailMessage;
userNameMessage = responseMessages.userNameMessage;
userEmailIsOk = responseMessages.userEmailIsOk;
userNameIsOk = responseMessages.userNameIsOk;
release = true;
if((userEmailIsOk + userNameIsOk) != 2)
{
console.log(userEmailIsOk + userNameIsOk);
release = false;
}
updateMessageFields();
var ajax = "";
}
function updateMessageFields()
{
document.getElementById("nicknameMessage").innerHTML = userNameMessage;
document.getElementById("newEmailMessage").innerHTML = emailMessage;
checkFormForErrors();
}
function checkFormForErrors()
{
console.log('hi');
var nameOk = checkFullNameSyntax()
console.log(nameOk);
var passOk = checkPassword()
console.log(passOk);
var userOk = checkName()
console.log(userOk);
var emailOk = checkEmailSyntax()
console.log(emailOk);
console.log(release);
document.getElementById("register").disabled = true;
if(release && nameOk && passOk && userOk && emailOk)
{
console.log('hey');
console.log(release && nameOk && passOk && userOk && emailOk)
document.getElementById("register").disabled = false;
}
}
}
最佳答案
我不知道这是否很难理解,但是当您的 AJAX 收到响应时,页面已经被重定向......并且对于您的 AJAX,它看起来很正常 - 它正在收到响应(在这种情况下,是一个完整的页面,而不是 JSON)。这是事件的顺序:
AJAX Request
--> Browser sends request to PHP file
----> Your PHP file receives the request, processes it, and "redirects"
<---- HTTP 302 status code sent to browser
<-- Browser receives 302 status code, redirects response, and returns result as AJAX response
至少我很确定这就是发生的事情 - 我发誓我以前遇到过这个“问题”,而且我发现这就是发生的事情。
要“解决”此问题,您有几种选择。您可以在 JSON 中发送此信息,而不是使用 PHP 来“重定向”。然后,在回调中,您可以检查它是否存在...就像“重定向”键一样,并使用它的值进行重定向(在 PHP 中将其值设置为要重定向到的 URL)。或者,您可以将其保留为字符串,并在解析它之前,检查它是否以“redirect:”开头。如果以此开头,则获取字符串的其余部分并重定向到该值(在 PHP 中将其值设置为要重定向到的 URL)。否则,像JSON一样解析并正常处理。
关于PHP header 不会使用 AJAX 进行重定向,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13694649/