我正在使用Ajax调用将数据发送到PHP脚本，并且打算在Javascript函数中使用Ajax返回值。
我尝试使用return $.ajax({})，但是它不起作用。我还尝试在我的Ajax调用中注册一个回调函数，但效果不佳。这里有什么事要做吗？
function click_to_showResult() {
var score;
if (userName !="") {
var result = getResultData();
//display result for selected user
if (result == "Distinction") {
score ="A";
} else if (result =="Pass") {
score ="C";
} else {
score ="User has no result in DB";
}
}
alert(score);
}
function getResultData(callback) {
var data;
var userName = $.trim($("#user").val().toLowerCase()); //gets username input from the user
$.ajax({
type:"POST",
url : "getResult.php",
data: {'name':user},
success: function(resp) {
data = resp;
},
error: function(resp) {
alert('Error occured');
}
});
return data;
}
假设用户输入Mike，然后它将变量发送给PHP并获取Mike的结果（例如Pass），然后提醒C。
答案 0 :(得分：1)
您应该像这样使用回调。
function click_to_showResult() {
var userName = $.trim($("#user").val().toLowerCase()); //gets username input from the user
if (userName != "") {
getResultData(userName, function (err, result) {
if (err) { console.log(err); return; }
var score;
//display result for selected user
switch (result) {
case "Distinction":
score = "A";
break;
case "Pass":
score = "C";
break;
default:
score = "User has no result in DB";
}
alert(score);
});
}
}
function getResultData(userName, callback) {
$.ajax({
type: "POST",
url: "getResult.php",
data: { 'name': userName },
success: function (resp) {
callback(null, resp);
},
error: function (resp) {
callback('Error occured');
}
});
}
答案 1 :(得分：0)
如果我理解正确，那么您也许可以像这样重写上面的代码-回调将处理响应并警告用户。发表上述评论后，我发现的一个问题是您发送的数据为user，但似乎未在函数中定义-我怀疑您打算使用userName？！
const click_to_showResult=function(e){
let userName=$.trim( $('#user').val().toLowerCase() );
if( userName!='' ){
/* callback function to process the response data */
const gradecallback=function( r ){
let score;
switch( r ){
case 'Distinction':score='A';break;
case 'Pass':score='C';break;
default:score='User has no result in DB';break;
}
alert( score );
};
$.ajax({
type: 'POST',
url : 'getResult.php',
data: { 'name':userName }, /* previously supplying user rather than userName */
success: function( resp ){
gradecallback.call( this, resp );
},
error: function(resp){
alert('Error occured');
}
});
}
}
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' ){
ob_clean();
/*
do db lookup or whatever tasks the getResults.php
script actually does and send the response.
For the purposes of the demo send back some data
which might or might not reflect the actual data
from getResult.php...
Open the console to view output
*/
$name=$_POST['name'];
$score=mt_rand(0,100);
if( $score >= 75 )$grade='Distinction';
elseif( $score > 50 && $score < 75 )$grade='Merit';
elseif( $score > 40 && $score < 50 )$grade='Pass';
else $grade='Fail';
$payload = json_encode( array( 'name'=>$name, 'score'=>$score, 'grade'=>$grade ) );
/*
sleep is used ONLY to indicate that this backend process MIGHT take some time to perform ALL
the actions that are done by getResult.php
*/
sleep( 2 );
exit( $payload );
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<script src='//code.jquery.com/jquery-latest.js'></script>
<script>
document.addEventListener('DOMContentLoaded',e=>{
let SCORE=false;
/* AJAX function bound with a promise to send POST requests only */
const ajax=function(url,params){
return new Promise( function( resolve, reject ){
let xhr=new XMLHttpRequest();
xhr.onload=function(){
if( this.status==200 && this.readyState==4 ){
/*
The request has completed and the response is available.
Resolve the Promise with the response data
*/
resolve( this.response )
}
};
xhr.onerror=function( error ){
reject( error )
};
xhr.open( 'POST', url, true );
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');
xhr.send( params );
});
};
const alt__click_to_showResult=function(){
/*
asynchronous functions do not necessarily complete in the order
you would imagine like a standard synchronous function does
which is why returning a value from them is harder
*/
console.info('called before asynchronous request bound in a Promise');
let url=location.href;
let params='name='+document.getElementById('user').value;
ajax( url, params ).then(
res=>{
/* The Promise has been resolved */
console.info('The asynchronous request has now completed - trigger ajax callback');
return ajax_callback( res );
}
).then(
/* this is the value returned by the ajax_callback */
res=>{
console.info( 'The ajax callback returned this data: %o',res );
return true;
}
).then(
res=>{
alert( 'all done....'+res )
}
).catch(
/* For some reason the promise was rejected*/
e=>{ alert(e) }
)
console.info( 'After asynchronous request' );
};
/* do something with the data */
const ajax_callback=function(res){
SCORE=JSON.parse( res );
console.info( 'The user "%s" scored %s which is a grade "%s"', SCORE.name, SCORE.score, SCORE.grade )
/* modify the data to indicate that it has been intercepted and processed - only to show flow of data*/
SCORE.banana='yellow';
return SCORE
};
/* a slightly modified version of previously posted function */
const click_to_showResult=function(e){
let userName=$.trim( $('#user').val().toLowerCase() );
if( userName!='' ){
/* callback function to process the response data */
const gradecallback=function( r ){
let json=JSON.parse( r );// process JSON response rather than plain text as before
let score;
switch( json.grade ){
case 'Distinction':score='A';break;
case 'Merit':score='B';break;// added this...
case 'Pass':score='C';break;
default: score='User has no result in DB';break;
}
alert( 'User: '+json.name+' Scored: '+json.score+' Award: '+json.grade+' Grade:'+score );
};
$.ajax({
type: 'POST',
url : location.href, // "getResult.php"
data: { name:userName }, /* previously supplying user rather than userName */
success: function( resp ){
gradecallback.call( this, resp );
},
error: function(resp){
alert('Error occured');
}
});
}
}
document.querySelector( 'form > input[type="button"][name="std"]' ).addEventListener( 'click', click_to_showResult )
document.querySelector( 'form > input[type="button"][name="alt"]' ).addEventListener( 'click', alt__click_to_showResult )
});
</script>
</head>
<body>
<form method='post'>
<input type='text' name='user' id='user' value='geronimo' />
<input type='button' name='std' value='Click to show results' />
<input type='button' name='alt' value='Alternative - Click to show results' />
</form>
</body>
</html>