If I understood correctly then you could perhaps rewrite the above code like this - the callback will process the response and alert the user. One issue I spotted after making the above comment was the data you send was user but this does not appear to be defined within the function - I suspect you intended 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>
