JQuery POST method in PHP

Many of you already know about JQuery and its utilities. For the ones who are still unaware of

the JQuery library and its usage, you can go through this article to get a brief introduction on the

matter. Of course there is always the official website for you to refer to.

The POST method in JQuery handles AJAX calls to transfer data from one file to another. This

function is similar to a POST method of that of a simple HTML form. The data passes according

to the field and variable names and is collected in a PHP file at the server end. You might declare

the POST method from a PHP file or an HTML file.

Also read my article on AJAX database update with JQuery POST

The difference lies in the fact that – for form POST methods in plain HTML, the variables are

passed with page navigation. The server side file is loaded and then the data is collected and

worked upon. However, the JQuery POST method uses an asynchronous method of sending the

data. So, there is no question of page load or navigation. The control stays on the same page.

Thus the process is faster and does not trouble the speed bandwidth.

JQuery POST method basics

The JQuery POST method is simple to call and use. There are two methods of calling the

method. Here are the two methods mentioned –

$.ajax(

type: „POST‟,

url: „save.php‟,

data: {name:name,password:password},

dataType: 'HTML',

success: function(value){

// Do something here

}

);

And the other method is –

$.post(„save.php‟,{name:name,password:password},function(value){

// Do something here.

});

As you can see, the calling of the JQuery POST method is very simple. For your understanding,

let me explain each of the section clearly.

For the first method of calling, the AJAX method is called. The method type is set to be POST.

You can set it as GET as well if you want a GET method type. Here GET or POST does not

matter as much because here the data is passed to the server in an asynchronous manner. So,

there is no chance of the data getting showed up in the URL. Next we have ‘url’. This URL is the

path to the PHP file that receives the data from here to manipulate or work upon.

The ‘data’ is the values that we want to send. Always remember, this data gets transported as

JSON and the variable name that you set here must match the name of the variable in the PHP

file that receives the respective value.

The ‘dataType’ parameter indicates the type of data that is returned back to this current file from

the server end upon successful transmission of the data to the server file. By default, this is set to

HTML. You can set it as JSON or XML. The return value will automatically change.

Suppose you have a scenario where you send a data to the server PHP file and query something

from the database. After this, instead of appending a static content to your current HTML page

you want to append a dynamic value from the server end. This is when you require JSON. I will

elaborate on this a bit later.

Finally, the ‘success’ parameter defines the function that is called when a successful sending is

done. Normally the value that comes back in the ‘dataType’ format is worked upon in this

callback success function.

Now, you can easily make out that in the second form of declaration the format is a bit different

but the parameters are same. The ‘url’ parameter comes first, then the ‘data’ and then the

callback ‘success’ function. This is actually shorthand syntax. The ‘dataType’ parameter is not

explicitly mentioned because normally developers make use of the HTML return value. If you

need JSON value, just do the following –

$.post(„save.php‟,{name:name,password:password},function(value){

// Do something here

},‟JSON‟);

Common examples of JQuery POST method

The POST method comes very handy when you require server side interference. Otherwise, for

any static data you would never require this method. One of the most used techniques is

validating new usernames or emails with the existing user base. Several websites implement this.

The idea is as soon as the user starts typing in the username of their choice, the server is passed

the current value and a message is appended instantly to notify whether this username is

available or not. I have already discussed and given an example of this working in this article.

Check it out.

Another good example of JQuery POST method usage would be using a JSON return type. This

is when you want the user to see a dynamic value (a value from the database according to the

current user entry) when a certain event is performed.

For example, you enter the name of a student and you get to see which subjects he or she has

opted for – instantly! Yes that is only possible with a JQuery POST method with JSON return

type. The value passed back will be in the form of a JSON array, you need to access the values

and get them appended to the HTML. This is not possible for you to achieve in a simple .html

file unless you add a JQuery POST method. Here’s a demo code -

// The JQuery code in the HTML file

$(„#textbox‟).keydown(function(){

$.post(„subjects.php‟, {name:name}, function(value){

for(var i=0;i<value.length;i++){

$(„#subjects ul‟).append(„<ul style="text-align: justify;">

<li>‟+value[i]+‟</li></ul>‟); } }, „json‟);

});

// The PHP code (assuming that DB is connected)

$name = $_POST[„name‟];

$query = “SELECT subjects FROM students WHERE name=‟”.$name.”‟”;

$result = mysql_query($query)

or die();

$sub = mysql_fetch_assoc($result);

echo json_encode($sub);

Common errors in JQuery POST method

When you try using this method always keep in mind the following points. These are some of the

most commonly arising errors that I have faced. So, I thought of letting you guys know so that

you do not face same trouble.

- Make sure that while sending the ‘data’ in the JQuery POST method, the variable name that

comes on the left of each JSON array element composition is the name that the program expects

to be as the PHP file receiving variable name. Let’s make it simpler. Check the following code –

// if this your POST method „data‟

{a:name,password:b}

Then, the PHP file expects that when you receive the values as $_POST[], the variable that

accepts the value will have the same name as the left component. The right component is the

JavaScript variable. In this case, ‘name’ and ‘b’ are the JavaScript variables. So in the PHP file

we write –

$a = $_POST[„a‟]; $password = $_POST[„password‟];

- Always make sure the URL to the PHP file is correct.

- If in case you have a success function and it’s not working; try removing the statements inside

the function and make an alert. If the alert happens then there is something wrong in the

statements inside your callback function.

If the alert does not happen, then the program control is getting stuck in the PHP file. Check that

file. If it’s an issue with the PHP file, check the queries and the return values. They often create a

tantrum.

That’s all about this method. Try and let me know what you did.