Simple JQuery AJax Example: Variables

Question

I took code from the W3 Schools regard jquery ajax and modified it slightly:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("test/test.php");
  });
});
</script>
</head>
<body>
<? $a=5; $b=5; $a + $b = $c;?>
<div id="div1"><h2>Let jQuery AJAX Change This Text???</h2></div>
<button>Get External Content</button>

</body>
</html>

On my test.php I have this little line:

<h2>The answer is: <?=$c?></h2>

When I click the button though I am not getting anything, just "The answer is:"

I know this is stupid simple, but I a newb to Jquery AJAX and can't find a solution that answer this question. This is more for my understanding that a real project-based problem.

Thankss

you never defined $c in test.php... test.php can't access vars in index.php unless you specifically include it into test.php (which you don't want to do in this case). — user400654
– user400654, Commented Apr 23, 2014 at 22:54
@KevinB so what would I do to get that kind of effect? Where I have variables above... would have to create a new file where the logic is handled and then include it test.php? — paulcruse3
– paulcruse3, Commented Apr 23, 2014 at 23:00
You would just move <? $a=5; $b=5; $a + $b = $c;?> to test.php. — user400654
– user400654, Commented Apr 23, 2014 at 23:57

praveen · Accepted Answer · 2014-04-24 05:30:33Z

1

As pointed above, you cannot access the local variables of one page in test.php using jquery load method. If you want to pass the value of $c variable to test.php, you can achieve by passing it as get variable or using ajax.

Please look at the following example:

Your Client side file:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">        </script>
<?php 
$a=5;
$b=5; 
$c = $a + $b;
?>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("test.php?c=<?php echo $c; ?>");
  });
});
</script>
</head>

<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text???</h2></div>
<button>Get External Content</button>

</body>
</html>

And Your Server side file:

<h2>The answer is: <?php echo $_GET['c']; ?></h2>

edited Apr 24, 2014 at 5:30

answered Apr 24, 2014 at 4:58

praveen

412 bronze badges

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

Comments

Shailesh Sonare · Accepted Answer · 2016-09-02 11:46:06Z

As per your requirement you can use any of the three methods:

get, post or ajax

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>

    function readyFunction() {
        $('#result').html("All iss well..");
        $.ajax({
            url: "ajax_response.php",
            method: "POST",
            data: {id: '12345', 'name': 'AJAX'},
            cache: true
        }).done(function(data){
            data = $.parseJSON(data);
            console.log("I am in done..." + data.id);
        }).success(function(data){
            console.log("I am in success..." + data);
        }).fail(function(data){
            console.log("I am in fail..." + data);
        }).always(function(data){
            console.log("I am in always..." + data);
        });

        $.post({
            url: "ajax_response.php",
            data: {id: '12345', 'name': 'POST'},
            cache: true
        }).done(function(data){
            data = $.parseJSON(data);
            console.log("I am in done..." + data.id);
        }).success(function(data){
            console.log("I am in success..." + data);
        }).fail(function(data){
            console.log("I am in fail..." + data);
        }).always(function(data){
            console.log("I am in always..." + data);
        });

        $.get({
            url: "ajax_response.php",
            data: {id: '12345', 'name': 'GET'},
            method: "POST",
            cache: true
        }).done(function(data){
            data = $.parseJSON(data);
            console.log("I am in done..." + data.id);
        }).success(function(data){
            console.log("I am in success..." + data);
        }).fail(function(data){
            console.log("I am in fail..." + data);
        }).always(function(data){
            console.log("I am in always..." + data);
        });
    }

    $(document).ready(readyFunction);

</script>

ajax_response.php

<?php
    echo json_encode($_REQUEST);
?>

Pierre Tasci · Accepted Answer · 2014-04-23 22:51:30Z

0

You specify code is php via these tags

<?php some code here ?>

Furthermore you are going to want to echo out the value.

<h2>The answer is: <?php echo $c ?></h2>

This obviously also applies to the assignment of the a,b, and c variables. Also, you assign variables in php left to right as in:

$c = $a + $b;

answered Apr 23, 2014 at 22:51

Pierre Tasci

4502 silver badges9 bronze badges

1 Comment

paulcruse3 Over a year ago

Nope... still doesn't work. Still get "The answer is: "[blank]. Any other suggestions? you can view it live: crinno.com/test

Collectives™ on Stack Overflow

Simple JQuery AJax Example: Variables

3 Answers 3

Your Client side file:

And Your Server side file:

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Your Client side file:

And Your Server side file:

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related