Simple Ajax Request Example With JQuery And PHP

simple jquery ajax request using php

In this tutorial, we are going to discuss Simple Ajax Request Example With JQuery And PHP. First, you need to understand that an AJAX request is used to send data from web page to the backend. This can be done in many ways like adding action URL in the form element with POST or GET method. when submitting a form the page will be redirected to the URL mentioned in the action attribute of the form. SO the main difference of using AJAX request is that user does not have to reload the page. AJAX request will take care to send the data parameters to backend script.

To write an AJAX request method you must know four parameters type, url, data and success. we can use error as the fifth parameter to log the error details.

OK, let’s get started. This is a basic JQuery Ajax GET request:

jQuery.ajax({
			type: "POST",
			url: "action.php",
			data: $('#registerForm').serialize(),
			success: function(resp) {
				$('.successMsg').show();
				$('#registerForm')[0].reset();
			}
		 });

In the code above, we have used four parameters/options:

type: This is the type of HTTP request that you want to perform. In this example, I am sending a POST request. If you want to send a GET request instead, simply change “POST” to “GET”.

url: This is the URL that we want to send an Ajax request. In this case, I have used “action.php”. You can change this to “example.php” or “folder/example.php” if you want to.

data: This is a JavaScript object containing the data that we want to send in the request. I have jquery serialize function to send the data in JSON format.

success: This is the function that gets called once the ajax call is successful. Note that this function has a parameter called resp, which will contain the output from action.php. i.e. If action.php prints out the boolean true, then this data variable will contain the boolean true.

It is important that you play around with the code above. i.e. Change “GET” to “POST” and modify the URL to check what is happening. Remember: You should use the built-in developer tools in Firefox / Chrome to debug your Ajax requests. Typically, these requests will show up in the networks tab under XHR. Without these developer tools, it can be incredibly difficult to figure out what is actually going on. These developer tools will allow you to visualize the request. They will also let you know if a request is failing.

simple ajax request using jquery and php

To familiar with the code try to add or remove parameters to make sure that you have understood how to send data through a jQuery AJAX request.

In this example, i have used three form fields which can be accessible in “action.php” after AJAX request. You can read these three parameters like below using php.


$username = $_POST["firstname"];

$lastname = $_POST["lastname"];

$email = $_POST["email"];

If this was a GET request, then the variables would have been sent via the query string, which would have made them accessible like so:


$username = $_GET["firstname"];

$lastname = $_GET["lastname"];

$email = $_GET["email"];

Whatever your print in the backend script that you will get as a response for this AJAX request.

$username = $_GET["firstname"];

$lastname = $_GET["lastname"];

$email = $_GET["email"];

//Do the logic you want here

//send response to ajax request
print true; exit;

Once the AJAX request is completed successfully I am just resetting the form fields as empty to force the user to fill the form again and displaying success message on top of the HTML form.

Download / Demo

You may also like...