AJAX post with JQuery

JQuery allows us to pass info to the server and get back results without leaving the page. This comes in handy for example when we want to submit a form, authenticate users against a database, load photos etc. I mostly use it for when I want to communicate with a MySQL database.

Here is an example where I send an id to the server which queries a MySQL database and return back the user's name for me.

I have a div called 'loading' in my HTML form. Before passing information to the server, I want the user to get a message, tell him to wait (the time that the information is being fetched from the server). So, I display a message in the 'loading' div.

$("#loading").html('Please wait...');

I then get the value that I want to pass to the server from my form.

var id = $('#userid').val();

I then create a data string of all the variables that I want to send to the server. In this case I will only send an id to the server.

var dataString = 'id='+ id;

Now, we move on to the AJAX part.

$j.ajax({
type: "POST",
url: "components/com_etudes/assets/ajax/getData.php", data: dataString,
success: function(data) {
//Display a message $j("#messages").html(data).css("color","green"); 
} });

POST : The way we want to submit the data to the server. We can use POST or GET

URL: This is the path to the PHP script that will receive the data, processes it and return a response to the Client browser.

DATA: This is the data that we have (concatenation of all the variables that we have)

success: function(data) : This means that on success (i.e. if the script has been executed on the server without error). 'data' is a variable that contains the result sent from the server.

You see that I used the variable 'data' and updated the HTML of a div called 'messages'. That is this div 'messages' will get as content whatever was returned from the server.

SERVER PART

The getData.php is simple.

header('Content-Type: text/html; charset=iso-8859-1');

//Database connection

include('db.php');

//POST Variables

$id  = $_POST['id'];

$msg = '';

//Get the user

$SQL = "SELECT * FROM users WHERE id = ".$id; //execute the query $result = mysql_query($SQL,$conn) or die(mysql_error());
$row = mysql_fetch_array($result);
echo $row['name'];


So we basically passed an id to the server which queried a MySQL database and responded back with the name of the user that corresponded to the id passed. Simple!


Stay tuned for some other tips coming soon.