CODEWITHSUNDEEP
phpjqueryajax
ByronArn
ByronArn

Reputation: 215

How to pass php variables to jquery AJAX?

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! :-)

Upvotes: 0

Views: 1685

Answers (3)

Nishu Tayal
Nishu Tayal

Reputation: 20820

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/

Upvotes: 0

Ricardo Lohmann
Ricardo Lohmann

Reputation: 26320

Add a callback to get.

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

Upvotes: 3

adeneo
adeneo

Reputation: 318182

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

Upvotes: 4

Related Questions