我正在尝试将我的登录页面转换为使用html并使用jquery和php来获取和处理结果,原因是如果我想要移动我的项目然后我就在那里。
我遇到的问题是将变量从php传递回jquery以同时显示。
我的例子 的index.html
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Auth Demo 2</title>
<script src="jquery/jquery-1.7.2.min.js"></script>
<script src="main.js"></script>
</head>
<body onload="handleLogin()">
<form id="loginForm">
<label for="email">Email:</label>
<input type="text" name="email" id="email" value="" placeholder="email" />
<label for="password">Password:</label>
<input type="password" name="password" id="password" value="" placeholder="Password" />
<input type="submit" value="Login" id="submitButton">
</form>
</body>
</html>
main.js
function handleLogin(){
var form = $("#loginForm");
var u = $("#email", form).val();
var p = $("#password", form).val();
if(u!= '' && p!= '') {
$.post("http://www.mysite.co.uk/login.php",{
email:$('#email', form).val(),
password:$('#password', form).val(),
rand:Math.random()
} ,function(data)
{
if(data=='yes') //if correct login detail
{
alert( "Request success: ");
}
else
{
//add reason in alert box here
alert ("failed reason")
}
});
} else {
alert( "Username/password empty");
}
return false;//not to post the form physically
}
的login.php
<?//get the posted values
require_once("../backend/functions.php");
dbconn(true);
if ($_POST["email"] && $_POST["password"]) {
$password = passhash($_POST["password"]);
if (!empty($_POST["email"]) && !empty($_POST["password"])) {
$res = SQL_Query_exec("SELECT id, password, secret, status, enabled FROM users WHERE email = " . sqlesc($_POST["email"]) . "");
$row = mysql_fetch_assoc($res);
if ( ! $row || $row["password"] != $password )
$message = "Wrong password";
elseif ($row["status"] == "pending")
$message = "Account Pending";
elseif ($row["enabled"] == "no")
$message = "Account Suspened";
} else
$message = "No Username/password added";
if (!$message){
logincookie($row["id"], $row["password"], $row["secret"]);
if (!empty($_POST["returnto"])) {
header("Refresh: 0; url=" . $_POST["returnto"]);
die();
}
else {
echo "yes";
die();
}
}else{
echo $message;
}
}
logoutcookie();
正如您所看到的,当登录失败时,我有多种原因想要传回警报框。什么是最好的方式来实现这个目标
答案 0 :(得分:1)
只提醒数据
if(data=='yes') //if correct login detail
{
alert( "Request success: ");
}
else{
alert (data)
}
但是我建议将响应作为JSON .....
if(u!= '' && p!= '') {
$.post("http://www.mysite.co.uk/login.php",{
email:$('#email', form).val(),
password:$('#password', form).val(),
rand:Math.random()
} ,function(data)
{
if(data=='yes') //if correct login detail
{
alert( "Request success: ");
}
else
{ //add reason in alert box here
alert (data)
}
});
} else {
alert( "Username/password empty");
}
return false;//not to post the form physically
}
答案 1 :(得分:1)
尝试使用JSON;
JSON.stringify(your_object, null, 2);
使用此方法在PHP中捕获POST以获取数组:http://www.php.net/manual/en/function.json-decode.php
$data = json_decode($_POST);
完成PHP后,回显一个数组数据的编码JSON字符串:http://www.php.net/manual/en/function.json-encode.php
echo json_encode($return_data);
在jQuery中,进行测试;
console.log(data);
console.log(data.yes);
答案 2 :(得分:0)
执行此操作的最佳方法是使用$ .ajax()并使用“XML”类型。然后让login.php返回一个XML文件,其中包含您需要的任何参数(用户ID,错误消息,如果有的话,用户名等)。然后,您可以使用jQuery解析XML文件以立即使用这些变量。无论如何,处理后端错误更安全。
答案 3 :(得分:0)
function handleLogin(){
var form = $("#loginForm");
var u = $("#email", form).val();
var p = $("#password", form).val();
if(u!= '' && p!= '') {
jQuery.ajax({
type: "POST",
url: "http://www.mysite.co.uk/login.php",
data: 'username='+u+'&password='+p+'&rand='+Math.random(),
complete: function(data){
if(data.responseText == 'yes'){
alert( "Request success: ");
}else{
alert( "failed: ");
}
});
} else {
alert( "Username/password empty");
}
return false;//not to post the form physically
}