Return value from Ajax call into Javascript function

Question

I am sending data to a PHP script using an Ajax call, and I intend to use the Ajax return value in a Javascript function.

I have tried using return $.ajax({}) and it doesn't work. I also tried registering a callback function in my Ajax call, and that didn't work as well. Is there something am not doing right here?

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;
}               

Let's say the user inputs Mike , then it should send the variable to PHP and get the results for Mike (for instance Pass ), then alert C .

Answer 1

You should use the callback like this.

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');
    }
  });
} 

Answer 2

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>