What Is AJAX? JQuery AJAX with example.

jQuery
PHP

Sep 11, 2019Sep 12, 2019

The full form of AJAX is Asynchronous JavaScript and XML.

Contents show

Whenever the user requests a new page or new information on the website, the page has to be reloaded.

You must have noticed that whenever we click on a button on the website, the page is definitely refreshed or reloaded, only then a new page or new data

Its is a technology with the help of which the information is brought from the server to the page without refreshing the page. It is used extensively in creating dynamic websites because all its processing is done on the server and information can be brought from the server to the page without

This is a function of jQuery, with the help of which you can send data from page to server.

Ajax Parameters

1. url – In this you have to give the path of your PHP file on which your PHP code is written

2. Type – In this, you have to give a request from both Get and POST.

3. Data – In this you have to send your data, here you can also send the array and also the variable

4. datatype – here you can give JSON, because JSON is only used to send arrays in AJAX, if you are not sending the array then it is not necessary

5. Cache – Keep it false, otherwise the browser can send the request only from its cache and error can come.

6. Success – If your function is successful, then whatever data will be returned from the PHP file will come in a variable called s of success function.

7. Error – If an error occurs in ajax, then that error message will come in the err variable.

How to Access Data Found from Ajax in PHP File

Now you have sent a variable or array in the container of data with the help of AJAX, now we have to take that variable on the PHP file –

Whatever name you have given to your container in AJAX, you can extract data from that container on PHP file in this way.

If you have sent Array from AJAX, then retrieve it like this –

Since the array in ajax is in JSON format, we have to decode it.

Now if you want to return whatever value you want to return from PHP to AJAX, like:

Now the value of $ a will go to the success function, thus you can send success data from a PHP file back to AJAX,

If you want to send Array to Ajax from a PHP file then –

In this way, you can send your Array to Ajax, and it will accept it as JSON.

Example of AJAX

In the example below, when you will click a button, ajax will hit the server and will get the results compiled on the server-side.

The code For HTML will be like the code below. The first button click will send the data however, the other will not.

Buttons to click for creating a hit for server

<button class="my-btn" id="ajax-button">Click for Techbriefers</button>
<button class="my-btn" id="ajax-button-2">Click for No name</button>

Script for First button click

/**
Ajax code for First button click
**/
$("#ajax-button").click(function () {
    $.ajax({
        url: 'http://myweb.com/ajaxtest.php',
        type: 'POST',
        data: {name: 'Techbriefers'},
        dataType: 'json',
        success: function (result) {
            alert(result);
        }
    });
});

Script for the second button click

/**
Ajax code for Second button click
**/
$("#ajax-button-2").click(function () {
    $.ajax({
        url: 'http://myweb.com/ajaxtest.php',
        type: 'POST',
        dataType: 'json',
        success: function (result) {
            alert(result);
        }
    });
});

Complete code for sample example

Code to be saved in the HTML side.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="PHP, MySQL, jQuery and web development tutorials with demos and examples.">
        <title>Demo at Techbriefers | techbriefers.com</title>
    </head>
    <body>
        <style>
            .container {
                margin: auto;
            }
            .my-btn {
                width: 48%;
                background: #ef3e47;
                border: 1px solid #d02932;
                padding: 10px;
                display: block;
                margin: 25px auto;
                font-size: 20px;
                cursor: pointer;
                color: #fff;
            }
        </style>
        <div class="container">
            <button class="my-btn" id="ajax-button">Click for Techbriefers</button>
            <button class="my-btn" id="ajax-button-2">Click for No name</button>
        </div>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
        <script>
            $("#ajax-button").click(function () {
                $.ajax({
                    url: 'http://myweb.com/ajaxtest.php',
                    type: 'POST',
                    data: {name: 'Techbriefers'},
                    dataType: 'json',
                    success: function (result) {
                        alert(result);
                    }
                });
            });
            $("#ajax-button-2").click(function () {
                $.ajax({
                    url: 'http://myweb.com/ajaxtest.php',
                    type: 'POST',
                    dataType: 'json',
                    success: function (result) {
                        alert(result);
                    }
                });
            });
    </script>
    </body>
</html>

Now add the code below in ajaxtest.php file, the server-side.

See Demo

Share this article