How to pass php variables to jquery AJAX?

Question

I have started learning jquery AJAX. I have run into a problem, and was wondering if you guys could help me. I am trying to pass a php variable back to jquery, but it displays as [object Object]. I will be posting my code below.

index.html:

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function() {
        $("p").text($.get("return.php"));
    });
});
</script>
</head>

<body>
<p>This is a test!</p>
<button>Click Here</button>
</body>
</html>

return.php:

<?php 
    $message = "Another test!";
    echo $message;
?>

So what is it that I need to do to pass php variable $message into the paragraph using jquery ajax?

I know I could simply do if I changed index.html to index.php, but then if $message later changes, I have to reload the page. I am trying to learn how to make dynamic content without having to reload the page.

Thanks ahead of time for any help you provide! :-)

adeneo · Accepted Answer · 2013-03-28 17:39:10Z

4

You'll have to wait until the data is returned before you can use it:

$(document).ready(function(){
    $("button").click(function() {
        $.get("return.php", function(data) {
             $("p").text(data);
        });
    });
});

answered Mar 28, 2013 at 17:39

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

Comments

Ricardo Lohmann · Accepted Answer · 2013-03-28 17:39:23Z

3

Add a callback to get.

$.get("return.php", function(data) {
    $("p").text(data);
});

answered Mar 28, 2013 at 17:39

Ricardo Lohmann

26.4k7 gold badges86 silver badges84 bronze badges

Comments

Nishu Tayal · Accepted Answer · 2013-03-28 17:51:41Z

0

You can use callback function in .get function.

$(document).ready(function(){
    $("button").click(function() {
       $.get("return.php",function(data){
           $("p").text(data);
       });
    });
});

Here you can pass the datatype as well in which form you want the response from server. Suppose you want to return anyother datatype(i.e. json)from server, just use datatype with it like this :

 $(document).ready(function(){
        $("button").click(function() {
           $.get("return.php",function(data){
               $("p").text(data);
           },"json");
        });
    });

For more detail,refer : http://api.jquery.com/jQuery.get/

answered Mar 28, 2013 at 17:51

Nishu Tayal

20.9k8 gold badges53 silver badges105 bronze badges

Collectives™ on Stack Overflow

How to pass php variables to jquery AJAX?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related