1. 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,
2. 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
3. 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.
