Ajax POST request with jQuery and PHP

Today we will explain to you how to make ajax POST request with JQuery and PHP. In this article we’ll simply create form in HTML and submit form data via ajax POST request. Later on you can insert it into the database or use it in your further logic.

jQuery AJAX Post Example with PHP and JSON, jQuery Ajax POST example with PHP, How to POST data to php file using AJAX, How do I pass data to a php file using jquery AJAX, jQuery Ajax Post with data, Php jquery ajax post request example, Jquery Ajax Post Example For Submitting AJAX Forms in PHP, jQuery Ajax GET and POST Requests, Simple Ajax request example with JQuery and PHP, How to Use AJAX in PHP and jQuery, ajax post to php and get return data, send response from php to ajax, how to use ajax response in php, jquery ajax call php function with parameters, ajax pass variable to php, how to get ajax value in php

What is AJAX and how it works

AJAX stands for Asynchronous JavaScript and XML, is a client-side script that allows web applications to work asynchronously without a page refresh. It fetches the data from the back-end server and updates the part of the web page without reloading the whole webpage.

Basic Ajax POST request

Also, we can use a datatype parameter i.e. json that helps us to receive the data in expected format from the server.

It’s time to create an example so I would like to divide this article in separate steps. In this example we’ll create an HTML form that contains the fields such as name, email and message and handle ajax POST request on click of the submit button.

Steps to make Ajax POST request with JQuery and PHP

  1. Create an HTML form
  2. Include the jQuery library
  3. Write a script for ajax call
  4. Handle POST data in PHP file
  5. Output

1. Create an HTML form

In the first step, we have to create an HTML form with the use of several fields like First Name, Last Name, Email and Message. Also we’ll add the button to submit the form data via ajax call.

Check the below code where we have created only HTML form.

index.php

Here we are not adding any validation because our goal is to provide the straight forward explanation of the article.

2. Include the jQuery library

We have to include the below jQuery library in the head section of the page.

3. Write a script for ajax call

Now in the next step, we have to write a script that helps us to place the ajax POST request on click of the submit button.

Following script will execute on click of the submit button.

In the above code, we used submission.php file as request URL to handle the request in the backend and also we display the response via alert method.

Let’s combine the above code together and see how it looks.

index.php

4. Handle POST data in PHP file

Let’s create a php file as submission.php to manage the upcoming data from the HTML file and revert back in JSON format as response.

submission.php

5. Output

Run the above code and check the output in the browser.

Output - Ajax POST request with JQuery and PHP - Clue Mediator
Output – Ajax POST request with JQuery and PHP – Clue Mediator

That’s it for today.
Thank you for reading. Happy Coding!

Demo & Source Code

Github Repository
If you found value in this article,
you can support us by buying me a coffee! ☕

You may also like...

10 Responses

  1. Leopoldo says:

    Pretty nice post. I just stumbled upon your blog and wished to say that I have truly
    loved surfing around your weblog posts. In any case
    I’ll be subscribing to your rss feed and I am hoping you write again soon!

  2. MAHMUD says:

    i wont programming JVASCRIPT where learn JAVASCRIPT??? no speak english please use translator next time

  3. Anonymous says:

    Very nice, except these days Google seems to insist on https for the JQuery link.

  4. Otilia says:

    Thanks for the marvelous posting! I seriously enjoyed reading it, you will be a great author.I will make
    sure to bookmark your blog and will come back in the foreseeable
    future. I want to encourage continue your great
    posts, have a nice day!

  5. Chantal says:

    Everything is very open with a clear explanation of the issues.
    It was really informative. Your site is extremely helpful.
    Thanks for sharing!

  6. Sharff says:

    Amazingly.

  7. Abdullah says:

    Very Nice Thank-you for this and greatly explained . It helped me lot once again thank-you

Leave a Reply

Your email address will not be published. Required fields are marked *