LearnKode

3 Example(s) of JQuery Ajax


Description :

The callback function is executed after the current effect is completely finished. 

In this example, we are going to use a callback function on the click of a button. The button click will initiate the load() method and then alert box message will appear on the screen after that 'lorium ipsum' web page will be shown on the screen


JQuery Ajax Example - 1 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").load("https://loremipsum.io/", function(responseTxt, statusTxt){
            if(statusTxt == "success"){
                alert("Now content will be loaded successfully!");
            }
       });
    });
});
</script>
</head>
<body>
    <div class="box">
        <h2>Load method with function</h2>
    </div>
    <button type="button">Load Content</button>
</body>
</html>
Try it » Download Example »

Output

Description :

The jQuery load() method is a simple and powerful AJAX method.  load() method loads data from a server and filled data into the selected element.

In this example, The jQuery load() method loads data from the server and place the returned HTML into the selected element. when you click the button then load() method will run and then Appwrk web page will be shown on the screen


JQuery Ajax Example - 2 
<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $(".bt1").click(function () {
                $(".div_content").load("https://loremipsum.io/");
            });
        }); 
    </script>
    <style>
        body {
            text-align: center;
        }

        .goreg {
            font-size: 40px;
            font-weight: bold;
            color: green;
        }

        .ghost {
            font-size: 30px;
            color: black;
        }

        .div_content {
            font-size: 40px;
            font-weight: bold;
            color: green;
        }
    </style>
</head>

<body>
    <div class="div_content">
        <div class="goreg">Jquery AJAX Method</div><br>
        <div class="ghost"> Most Important</div><br>
    </div>
    <button class="bt1">Change Content</button>
</body>

</html>
Try it » Download Example »

Output

Description :

In this example, we are going to use callback function and error method. when you click the button then load() method will run and alert box message will appear on the screen. It can be an error message if the website is not valid.


JQuery Ajax Example - 3 
<!DOCTYPE html>
<html>
<head>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").load("https://appwrk.com/", (responseTxt, statusTxt, jqXHR)=>{
            if(statusTxt == "success"){
                alert("Your Website loaded successfully!");
            }
            if(statusTxt == "error"){
                alert("Error: " + jqXHR.status + " " + jqXHR.statusText);
            }
        });
    });
});
</script>
</head>
<body>
    <div class="box">
        <h2 style="color: darkgreen">Jquery ajax load with error</h2>
    </div>
    <button class="button">Lets change website</button>
</body>
</html>
Try it » Download Example »

Output