我正在尝试创建一个登录系统，该系统接受用户的输入（用户名和密码），检索它然后将会话数据输入到新表（tbl_sessions）中，然后根据用户的属性重定向用户表名为personcode（000000为讲师，111111为学生）...我想我需要链接两个ajax请求。一个用于检索结果（从 test.php 将会话数据作为JSON发送），另一个用于 insSession.php ，将会话数据插入表中并返回一个JSON对象（我通过jd作为参数）.......我的代码工作！好吧，首先，我无法从ajax调用 insSession.php 接收JSON数据（我试过json_decode可能我错误地使用它）所以我只是绕过它并使用$ _SESSION并返回一个JSON我面临的第二个问题是，如果我发出ajax请求，我的浏览器会刷新请求帮助
以下是相关文件
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<!---->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/test.js"></script>
<script src="js/functions.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional Bootstrap theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<link href="css/design.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- container tag-->
<div class="container">
<div class="col-md-5 col-md-offset-4 col-sm-12 col-xs-12 login-panel">
<!--<div class="col-md-4 col-md-offset-4 login_panel">-->
<form class="form-horizontal" method="post" id="login-form">
<h4 class="text-center panel-heading">Login<!--<small><span class="glyphicon glyphicon-lock"></span></small>--></h4>
<hr>
<div class="alert alert-danger user-empty" style="display:none">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>Warning!</strong> Username field is empty.
</div>
<!-- end of user-empty -->
<div class="alert alert-danger pass-empty" style="display:none">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>Warning!</strong> Password field is empty.
</div>
<!-- end of pass-empty-->
<div class="alert alert-danger both-empty" style="display:none">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>Warning!</strong> Both fields are empty.
</div>
<!--end of both-empty-->
<div class="row">
<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-8 col-xs-offset-2 " >
<div class="input-group form-group">
<!--<div class="input-group">-->
<span class="input-group-addon"><span class="glyphicon glyphicon-user "></span></span>
<input type="text" class="form-control username" id="username" placeholder="Username">
<!--</div>-->
</div>
</div>
<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-8 col-xs-offset-2 ">
<div class="input-group form-group ">
<!--<div class="form-group">-->
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input type="password" class="form-control password" id="password" placeholder="Password">
<!--</div>-->
</div>
</div>
<div class="form-group form-group-sm">
<button class="btn btn-primary col-md-offset-4 col-md-4 col-sm-offset-4 col-sm-4 col-xs-4 col-xs-offset-4 sign-in " type="submit">Sign In <i class="glyphicon glyphicon-log-in"></i></button>
</div>
</div><!-- End of row -->
</form>
<!--</div>--><!--end of login_panel-->
<div class="clearfix"></div>
</div><!-- end of row-->
</div><!-- end of container-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
</body>
</html>
//function that runs a check on login variables
function input_Check(a,b){
/**
Where a = username
b = password
**/
//to specify the missing input, check if it's the username field, password or both
if(a =="" && b!="")
{
$(".user-empty").fadeIn();
return false;
}
else if(a !="" && b =="")
{
$(".pass-empty").fadeIn();
return false;
}
else if(a!="" && b!="")
{
return true;
}
else
{
$(".both-empty").fadeIn();;
return false;
}
}
enter cod// JavaScript Document
$(document).ready(function(e)
{
$(".sign-in").click(function(){
//Login Variables
var username = $(".username").val();//"ayaradua"
var password = $(".password").val();//Password12
//Setup login data structure
var login_Data=
{
'key':"Login",
'username': username,
'password': password
}
//If the Input isnt empty, make the Ajax call
if(input_Check(username,password)== true)//you can remove this if statement
{
var a1= $.ajax({
data:login_Data,
type:"POST",
url: './php/test.php',
dataType: 'json',
beforeSend: function()
{
$(".sign-in").text("connecting...");
},
}),
a2 = a1.then(function(data) {
// .then() returns a new promise
return $.ajax({
url: './php/insSession.php',
//type:"POST",
//dataType: 'json'
//data: {'user_Id':data.user_Id,
});
//return $.getJSON('./php/insSession.php');
});//end of a2
//i user this alert to confirm if data has been received
a1.done(function(data,textStatus,xhr){
alert(data.user_Id+data.session_Id+data.date);
});
//after the promise is returned, check the personcode to determine the user's status and redirect them accordingly
a2.done(function(jd,textStatus,xhr) {
if(jd.personcode == 000000)
{
window.location.href='./lecturer.php';
//alert("lecturer");
}
else if(jd.personcode==111111)
{
window.location.href='./student.php';
//alert("student");
}
else {
$("hr").append("<p class=\"text-danger text-center\">Sorry Couldn't Login check username and password </p>")};
});
a2.fail(function(){
$("hr").append("<p class=\"text-danger text-center\">Problem with Ajax Call </p>");
});
}// end of input_Check if statement
});//end of click method
});// end of ready functione here
session_start();
//include relevant files
include("../inc/connect.php");
include("./functions.php");
if($_SERVER["REQUEST_METHOD"]=="POST")
{
$username =$_POST["username"];
$password= $_POST["password"];
// Setup Query
$query = "SELECT Id,firstname,lastname,username,password,personcode FROM tbl_User WHERE `username`=? AND `password`=?";
// Get instance of statement
$stmt = mysqli_stmt_init($mysqli);
// Prepare Query
mysqli_stmt_prepare($stmt, $query);
// Bind Parameters [s for string]
mysqli_stmt_bind_param($stmt,'ss',$username,$password);
// Execute Statement
if (mysqli_stmt_execute($stmt))
{
// Bind results to variable
mysqli_stmt_bind_result($stmt,$Id,$firstname,$lastname,$user,$pass,$personcode);
// Fetch Value
$fetch= mysqli_stmt_fetch($stmt);
$array = array("user_Id"=>$Id,
"firstname"=>$firstname,
"lastname"=>$lastname,
"username"=>$user,
"password"=>$pass,
"personcode"=>$personcode
);
$data = json_encode($array);
$old_sessionid = session_id();
session_regenerate_id();
$new_sessionid = session_id();
$_SESSION = set_Session($array,$new_sessionid);
unset($_SESSION["firstname"]);
unset($_SESSION["lastname"]);
unset($_SESSION["username"]);
unset($_SESSION["password"]);
//array_push($_SESSION,$ses_Data);
header('Content-Type: application/json');
$dat=json_encode($_SESSION);
echo $dat;
// Close Statement
mysqli_stmt_close($stmt);
}
}
//if ($_SERVER['HTTP_X_REQUESTED_WITH']=='XMLHttpRequest')
//{
/**
// Setup parameter to be bound into query
$username =$_POST["username"]; //"ayaradua";
$password= $_POST["password"];//"Password12";
//}
**/
session_start();
include("../inc/connect.php");
include("../php/functions.php");
$x = array();
$session_Var= array_merge($x,$_SESSION);
//get table columns
$query = "INSERT INTO `tbl_Session` `user_Id`,`personcode`,`session_Id`,`date`)VALUES(?,?,?,?)";
$stmt = mysqli_stmt_init($mysqli);
if(mysqli_stmt_prepare($stmt,$query))
{
// bind parameters for markers
mysqli_stmt_bind_param($stmt,"ssss",$session_Var['user_Id'],$session_Var['personcode'],$session_Var['session_Id'],$session_Var['date']);
// execute query
if(mysqli_stmt_execute($stmt))
{
header('Content-Type: application/json');
$json = json_encode($session_Var);
echo $json;
}
else{
echo "Sorry didn't execute";
}
}
答案 0 :(得分：0)
你可以用这种方式链接两个ajax调用，当然这不是唯一的方法（这样你就可以完全控制两个ajax调用：从第一个到第二个传递的参数/变量以及何时重定向）：
$(function () {
$(".sign-in").click(function (e) {
//Login Variables
var username = $(".username").val();//"ayaradua"
var password = $(".password").val();//Password12
//Setup login data structure
var login_Data =
{
'key': "Login",
'username': username,
'password': password
}
//If the Input isnt empty, make the Ajax call
if (input_Check(username, password) == true)//you can remove this if statement
{
$.ajax({
data: login_Data,
type: "POST",
url: './php/test.php',
dataType: 'json',
beforeSend: function () {
$(".sign-in").text("connecting...");
}
}).done(function (data, textStatus, xhr) {
//{"result":true,"data":{"user_Id":"user_Id","personcode":"personcode","session_Id":"LocalSession_Id","data":"date"}};
alert(data.user_Id + data.session_Id + data.date);
if (data.result) {
$.ajax({
url: './php/insSession.php'
type:"POST",
dataType: 'json',
data: JSON.stringify(data.data),
}).done(function (data, textStatus, xhr) {
if (jd.personcode == 000000) {
window.location.href = './lecturer.php';
//alert("lecturer");
} else if (jd.personcode == 111111) {
window.location.href = './student.php';
//alert("student");
} else {
$("hr").append("<p class=\"text-danger text-center\">Sorry Couldn't Login check username and password </p>")
}
;
}).fail(function (jqXHR, textStatus, errorThrown) {
$("hr").append("<p class=\"text-danger text-center\">Problem with Ajax Call </p>");
});
} else {
// the first PHP (insSession.php) returned error so...............
}
});
}
});
});
你的insSession.php文件需要总是返回一个json值，例如：
{"result":true,"data":{"user_Id":"user_Id","personcode":"personcode","session_Id":"LocalSession_Id","data":"date"}}
或
{"result":false,"data":null}
要实现此结果，您的insSession.php可能类似于：
<?php
$retVal = array( 'result' => false, 'data' => null );
if(result or some computation is true) {
$data = array( 'user_Id' => 'user_Id', 'personcode' => 'personcode', 'session_Id' => 'LocalSession_Id', 'data' => 'date');
$retVal = array( 'result' => true, 'data' => $data );
}
header('Content-type: application/json');
echo json_encode( $retVal );
?>
所以无论何时从这个php返回，你都有一个json对象，总是对第一个包含值的字段有效：oiperation是否成功。 如果不是你不能继续下一个操作（调用第二个PHP），但你需要停止。相反，如果你得到一个成功的结果，你可能会看到之前完成的函数有什么变化：现在测试更容易，传递到第二个php的参数非常容易。