JQuery POST method in PHP

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 –

type: ‘POST’,
url: ‘save.php’,
data: {name:name,password:password},
dataType: 'HTML',
success: function(value){
	// Do something here

And the other method is –

	// 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 –

	// Do something here

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
$.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’

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.

Comments are closed.