CODEWITHSUNDEEP
phpjqueryhtmlajax
natsuki_2002
natsuki_2002

Reputation: 25349

Simple Ajax request with php

I'm trying to pass a simple variable from my jQuery to my php and then echo it on my HTML. It doesn't seem to work though.

I can't get my variable $result to show up on my page. Any thoughts? The Ajax POST seems to be working fine. The problem seems to be communication between php and HTML.

index.html:

<!DOCTYPE html>
<html>
    <head> 
        <title>My Site</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script type='text/javascript' src='front.js'></script>    
    </head>
    <body>
        <?php echo $result; ?>
    </body>
</html>

front.js:

$(document).ready(function() {
    $.post('/back.php', {name: "Bob"}, function(data) {         
    });
});

back.php:

<?php $result = $_POST['name']; ?>

Upvotes: 2

Views: 630

Answers (7)

Avinash Singh Rathi
Avinash Singh Rathi

Reputation: 115

Like your question we have three different files one is index.html 1) index.html

<!DOCTYPE html>
<html>
    <head> 
        <title>My Site</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script type='text/javascript' src='front.js'></script>    
    </head>
    <body>
        <?php echo $result; ?>
    </body>
</html>

2) front.js

$(document).load(function(){
        $.ajax({
            url: '/back.php',
            type: 'POST',
            data: 'name=Bob',
            async: false,
            success: function(data) {
                    $('body').html(data);
            },
            cache: false
        });
    });

3) back.php

<?php echo $result = $_POST['name']; ?>

Now use this, your files will work out. Please let me know if you have any queries.

Upvotes: 0

user2509485
user2509485

Reputation: 219

Just add the following line to your code: $('body').html(data);

Upvotes: 0

Pranav C Balan
Pranav C Balan

Reputation: 115222

Try this

index.html:

<!DOCTYPE html>
<html>
    <head> 
        <title>My Site</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script type='text/javascript' src='front.js'></script>    
    </head>
    <body>
    </body>
</html>


front.js:

$(document).ready(function() {    
    $.post('/back.php', {name: "Bob"}, function(result) {
        $('body').html(result);         
    });    
});

back.php:

<?php echo $_POST['name']; ?>

Upvotes: 2

Brad
Brad

Reputation: 229

$result in back.php and $result in index.html aren't related. Setting it in back.php has no effect on index.html. If you echo something in back.php however, that output will be passed to the empty callback function you have in your $.post() call. You can handle the data there and use javascript to insert it into your page.

Upvotes: 1

Mahavir Nahata
Mahavir Nahata

Reputation: 86

Change Your PHP Code :
<?php echo $_POST['name']; ?>

And Also Your HTML Code :

    <!DOCTYPE html>
        <html>
            <head> 
                    <title>My Site</title>
                    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>


            </head>
            <body>

            </body>
    <script>
    $(document).ready(function() {

        $.post('/back.php', {name: "Bob"}, function(data) {         
        $('body').append(data)});

    });  
    </script>
     </html>

Upvotes: 1

Peter
Peter

Reputation: 1789

Puh, lot of mistakes. First, your index.html contains PHP - Code which won't be executed because this is not a PHP - Skript (ending with php). Second you are saving the value of your request to back.php in a variable, which won't be existing after the request is finished. You can either: rename index.html to index.php, exchange your statement to 

<?php echo $_POST['name']; ?>

and change your request to 

$.get('/index.php', {name: "Bob"}, function(data) {         
});

which would cause a continously reloading of the site, or store your result in a $_SESSION (see PHP Session Handling), and retrieve that in your index.php (you got to rename the file).

Upvotes: -1

chanchal118
chanchal118

Reputation: 3647

Change this 

<body>
    <div id="show-data"></div>
</body>

And

$(document).ready(function() {

    $.post('/back.php', {name: "Bob"}, function(data) {
        $('#show-data').html(data);         
    });

});

And

<?php echo $result = $_POST['name']; ?>

Upvotes: 1

Related Questions