AJAX callbacks with jQuery

17 February 2011

Let's get to the point. This tutorial is not very well suited for inexperienced webdevelopers with no, or little, experience in JavaScript, but you can learn a lot trough copy-pasting.

Step 1 : Linking jQuery
Include the jQuery library in your section as following (i used version 1.2.1, but this changes a lot):
<script type="text/javascript" src="../jquery-1.2.1.js"></script>


Step 2 : The callback
Next, add this JavaScript function to the . In this function, all the "magic" happens:
function addNumbers() {
     var number1 = $('#number1').attr('value');
     var number2 = $('#number2').attr('value');
     $.get("giveMeSomething.php", { number1: number1, number2: number2 },
         function(data){
            alert("Data Loaded: " + data);
     });
}

In line 2 we get the calue from the first field in our page. This variable is used in row 4 again in the AJAX callback. In line 3, we do the same for the second field. In line 4 to 7 is the actual AJAX callback. I put this function on multiple rows for readability, but you can put it on one line if you like.

The first parameter is the file you want to do the call on. This can be PHP or whatever. I made a file in the same directory as the HTML file, called "giveMeSomething.php". In this file, all the actions are done (see step 4). The second parameter (between curly brackets) contains all the values you want to pass to the PHP file. The values are delimited bij comma's. Left of the : is the name of the variable in the PHP file, and right of the : is the value (in this case the vars you defined in line 2 and 3).

At last we define a function that is executed after the callback finishes. The data you get (and display in an alert) is everything that was echo-ed in the PHP file.

Stap 3 : Form
Add the input fields to the :
<input type="text" id="number1" value="0" /> + <input type="text" id="number2" value="0" />
<input type="button" onclick="addNumbers();" value="=" />


Stap 4 : PHP file
Create a new PHP file with the name "giveMeSomething.php" and this content:
<?
echo $_REQUEST['number1'] + $_REQUEST['number2'];
?>
You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!

9 comments

  1. Gravatar

    Muccy

    30 July 2012

    Demos, documentation and file downloads?

  2. Gravatar

    Goinglogo

    09 May 2010

    Brilliant example with all principles included.

    A great starting point.

  3. Gravatar

    jeet Lal Patel

    10 November 2009

    Thanks a lot for ajax with jquery examples

  4. Gravatar

    Najam

    11 September 2009

    Stap 3 and Stap 4 sounds funny.. :D

  5. Gravatar

    riz

    03 December 2008

    Easy to understand...
    same tim i need to upload a file

  6. Gravatar

    Jacek

    16 September 2008

    Where is error handling!?

  7. Gravatar

    Andy J

    28 November 2007

    Hahaha... I second that, DreamDealer. Thanks for the quick and dirty of it!

  8. Gravatar

    DreamDealer

    19 November 2007

    I think the title of the tutorials says enough on what the tutorial is about.

  9. Gravatar

    lucian ciufudean

    12 November 2007

    The "main point" at the beginning of a tutorial is to say what the tutorial is about and not that "This tutorial is not very well suited for inexperienced webdevelopers" !