jQuery update a Div with a PHP script

Question

I have absolutely no idea how to do this, so I'm just gonna go ahead and ask.

What I want to do is update the contents of a div with a PHP script I have in an external file, called send.php.

So I have a div like this:

<div class="classname">

</div>

And I want to post data to this send.php file, and then update that div with whatever the outcome of the PHP script is. Can this be done?

Answer 1

For simple ajax calls, I normally prefer using $.load as its grammar is extremely concise. Passing parameters as an object (key/value pairs) will cause it to use a POST request:

<a href="no-script.php" class="something">Click!</a>

$(document).ready(function() {
    $('a.something').click(function(e) {
        //prevent the href from being followed
        e.preventDefault();

        //inject div.classname with the output of send.php
        $('div.classname').load('send.php', {param1: 'foo', param2: 'blah'});
    });
});

If you don't need it to be a POST, you can just add your parameters as a query string:

$('div.classname').load('send.php?param1=' + param1 + '&param2=' + param2);

Answer 2

<a href="#">click</a>

<script>
    $(function() {
      $("#refresh").click(function(evt) {
         $("#classname").load("send.php?data=someData")
         evt.preventDefault();
      })
    })
</script>


<div id="classname">

</div>

Some documentation to read:

1. http://docs.jquery.com/Ajax/jQuery.post

   • http://docs.jquery.com/Ajax/load

Answer 3

Absolutely! Take a look at this post for instructions on how to use jQuery's ajax functionality. You are then going to want to call

$.(".classname").append("Whatever results you get");

To fill the div.

Good luck!