How to return a value to javascript after posting via ajax (Jquery)

Question

I'm sending data via ajax (jquery) to php where it will be processed. I'd like to return a value from the php script, but I'm not sure how.

How do I return the result back?

$(document).ready(function() {  //This script sends var Score to php
        Score=100; //Dummy variable
            $.ajax({  
            type: "POST",  
            url: "returnresults.php",  
            data: { 'Score':Score },      
            success: function(){  
            $('#box2').html(Score);
            } 
        })
    });

Very simple PHP CODE

<?php
$Score=$_POST['Score']; 
       if (isset($_POST['Score'])) { 
       $Score=80;
} 
?>

Thanks for your replies everyone! I've got to duck out for a bit, but I'll go over them all as soon as I get back tonight.Thanks! — TryHarder
– TryHarder, Commented Jan 1, 2012 at 7:39

nnnnnn · Accepted Answer · 2012-01-01 07:23:59Z

3

Your PHP page should output the html or text that you want returned, so at its simplest perhaps add this to the end of your PHP:

echo $Score;

If you want to pre-format it a bit within your PHP then:

echo "<div>" . $Score . "</div>";

Where you can make the html markup as simple or complicated as appropriate (the <div> in this case being just an example, obviously).

Then your jQuery ajax call will automatically pass the response through as a parameter to your success handler, so:

$.ajax({  
    type: "POST",  
    url: "returnresults.php",  
    data: { 'Score':Score },      
    success: function(data){ // <-- note the parameter here, not in your code
       $('#box2').html(data);
    } 
});

(data will be the response).

Note: if you know that the only thing you want to do with the response from the ajax call is to take the data/text/html and put it into a particular element you can simplify things by just using the jquery .load() method instead of $.ajax():

$('#box2').load("returnresults.php", { 'Score':Score });

edited Jan 1, 2012 at 7:23

answered Jan 1, 2012 at 7:17

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TryHarder Over a year ago

Thanks for your answer. I'm a beginner so stating what php code I needed and what the data represented did it for me. Thank you.

aroth · Accepted Answer · 2012-01-01 07:03:11Z

2

Check the documentation. In particular with respect to the success handler function:

success(data, textStatus, jqXHR)

A function to be called if the request succeeds. The function gets passed three arguments: The data returned from the server, formatted according to the dataType parameter; a string describing the status; and the jqXHR (in jQuery 1.4.x, XMLHttpRequest) object.

So jQuery will pass three parameters to your success function. The first one contains the data that you want. If you just want to pass exactly what the server returns on into your success handler, you can do:

$(document).ready(function() {  //This script sends var Score to php
        $.ajax({  
        type: "POST",  
        url: "returnresults.php",  
        data: { 'Score':Score },  
        dataType: "text",    //set the dataType to 'text' so that jQuery passes it verbatim
        success: function(newScore){  //the first parameter will contain the response the server sent, we ignore the other two parameters in this example
            $('#box2').html(newScore);
        } 
    })
});

And then in your PHP code, just write the desired value straight to the response.

answered Jan 1, 2012 at 7:03

aroth

54.9k22 gold badges142 silver badges178 bronze badges

1 Comment

TryHarder Over a year ago

I had briefly looked at that, but hadn't understood it's importance. Now that you have pointed it out it makes perfect sense. Thank you!

Mr. BeatMasta · Accepted Answer · 2012-01-01 07:05:43Z

2

$(document).ready(function() {  //This script sends var Score to php
    Score=100; //Dummy variable
        $.ajax({  
        type: "POST",  
        url: "returnresults.php",  
        data: { 'Score':Score },      
        success: function(response){
            alert(response);
            $('#box2').html(Score);
        } 
    })
});

answered Jan 1, 2012 at 7:05

Mr. BeatMasta

1,30210 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to return a value to javascript after posting via ajax (Jquery)

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related