Da Ajax ist im Wesentlichen asynchron Sie nicht zuverlässig einen Wert zurückgeben kann - man konnte die fetch api verwenden, die um die Promise Ideologie aufgebaut, die Sie einen Wert zurückgeben würde es ermöglichen, oder Sie können die Ajax-Rückruf verwenden, um Fortsetzen der Verarbeitung basierend auf der Antwort des Servers, wenn die Mail-Prüfung abgeschlossen wurde.
Mit der fetch api können Sie viele verschiedene Anfragen miteinander verketten. Wenn es eine Abhängigkeit von einem vorherigen Wert gibt, können Sie warten, bis er verfügbar ist, was Sie in ajax nicht tun können (außer Callbacks und verschachtelte aJAX-Anfragen)
function mailCheck(mail) {
for(i = 0; i < mail.length; i++) {/* is this an array? */
if (mail[i] == "") document.getElementById("input").style.background = "#FFDDEE";
}
var _callback=function(response){
if(response===false){
document.getElementById("input").style.background = "#FFDDEE";
} else {
//TODO: GO TO NEXT STEP (PASSWORD)
}
}
existing.call(this, mail, _callback);
}
function existing(mail, callback) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(this.status==200 && this.readyState==4)callback.call(this, this.response);
}
xhr.open('POST','mailcheck.php',true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send('mail='+mail);
}
Eine grundlegende Demo der Verwendung des fetch api ~ ziemlich kompliziert, wenn zu ajax verglichen, aber letztlich flexibler, wenn es richtig gemacht.
<?php
if($_SERVER['REQUEST_METHOD']=='POST') {
ob_clean();
$json=array('error');
$_POST['time']=microtime();
$dbhost = 'localhost';
$dbuser = 'root';
$dbpwd = 'xxx';
$dbname = 'xxx';
$db = new mysqli($dbhost, $dbuser, $dbpwd, $dbname);
switch($_POST['action']){
case 'checkmail':
/* db lookup and other tests */
$email=filter_var(filter_input(INPUT_POST, 'email', FILTER_SANITIZE_EMAIL), FILTER_VALIDATE_EMAIL);
$status=false;
$sql='select `username` from `users` where `email`=?';
$stmt=$db->prepare($sql);
if($stmt){
$stmt->bind_param('s', $email);
$result = $stmt->execute();
if($result){
$stmt->store_result();
$stmt->bind_result($username);
$stmt->fetch();
$stmt->close();
$db->close();
if($username) {
$_POST['username']=$username;
$status=true;
}
} else {
$status=false;
}
} else {
$status=false;
}
$_POST['status']=$status;
break;
case 'login':
/* validate user login */
$email=filter_var(filter_input(INPUT_POST, 'email', FILTER_SANITIZE_EMAIL), FILTER_VALIDATE_EMAIL);
$password=filter_input(INPUT_POST, 'password', FILTER_SANITIZE_STRING);
$status=false;
$sql='select `username`,`token` from `users` where `email`=? and `password`=?';
$stmt=$db->prepare($sql);
if($stmt){
$stmt->bind_param('ss', $email, $password);
$result = $stmt->execute();
if($result){
$stmt->store_result();
$stmt->bind_result($username, $token);
$stmt->fetch();
$stmt->close();
$db->close();
if($username) {
$_POST['username']=$username;
$_POST['token']=$token;
$status=true;
}
} else {
$status=false;
}
} else {
$status=false;
}
$_POST['status']=$status;
break;
}
$json = json_encode($_POST);
header('Content-Type: application/json');
header('HTTP/1.1 200 OK', true, 200);
exit($json);
}
?>
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title>Chained Fetch</title>
<script>
var options={
once:false,
capture:false,
passive:false
};
document.addEventListener('DOMContentLoaded', function(){
document.querySelector('form > input[type="button"]').onclick=function(event){
var stack=[];
var url=location.href;
var mail=document.querySelector('form > input[name="email"]');
var password=document.querySelector('form > input[name="password"]');
var _final=function(r){
alert(r);
}
var _isvalid=function(r){
if(!r.status)throw new Error(r.action+' failed');
return r.status;
}
/* the urls could be totally different php scripts */
stack.push({
url:url, /* checkmail.php */
config:{
method:'POST',
mode:'cors',
credentials:'include',
headers:{ 'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8' },
body:'action=checkmail&email='+mail.value
}
});
stack.push({
url:url,/* login.php */
config:{
method:'POST',
mode:'cors',
credentials:'include',
headers:{ 'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8' },
body:'action=login&password='+password.value+'&email='+mail.value
}
});
fetch(stack[0].url, stack[0].config)
.then(response => response.json())
.then(data => _isvalid(data))
.then(data => fetch(stack[1].url, stack[1].config))
.then(response => response.json())
.then(data => _isvalid(data))
.then(_final)
.catch(err => alert(err.message));
}
},options);
</script>
</head>
<body>
<form>
<input type='email' name='email' />
<input type='password' name='password' value='knickers' />
<input type='button' value='Login' />
</form>
</body>
</html>
In der Funktion 'mailCheck' - was ist die Art von' mail'? Zeichenfolge, Array, Objekt? – RamRaider