Explanation of Jquery get/post with Example.

The jQuery get() and post() methods are used to request data from the server with an HTTP GET or POST request.

The two most commonly used methods for a request-response between a client and server are: GET and POST.

• GET – Requests data from a specified resource
• POST – Submits data to be processed to a specified resource

GET is basically used for just getting (retrieving) some data from the server. Note: The GET method may return cached data.

POST can also be used to get some data from the server. However, the POST method NEVER caches data and is often used to send data along with the request.

jQuery $.get() Method

The $.get() method requests data from the server with an HTTP GET request.

Syntax:

$.get( url, [data], [callback], [type] )

Parameters

1. url : String containing the URL at which request is to be sent
2. data : This is an optional parameter that represents key/value pairs that will be sent to the server.
3. callback: This optional parameter represents the function that is to be executed whenever the data is loaded successfully.
4. type : This parameter represents type of data to be returned to the callback function i.e “xml”, “script”, “json”, “html”, or “text”.

Example :-

This PHP code is use to get data when below HTML program send the HTTP GET request.

// get.php file
<?php
if( $_REQUEST[“name”] ) {

$name = $_REQUEST[‘name’];
echo “Welcome “. $name;
}

?>

HTML PARTS :-

This HTML code is use to send the HTTP GET request.

<script type="text/javascript">

    $(document).ready(function() {

    $("#driver").click(function(event) {
            $.get(
            "get.php", {
                name: "roshan"
            },
            function(data) {
                $('#stage').html(data);
            });
        });
    });
</script>

Click on the button to load get file

<span id="stage"
    style="background-color:#cc0;">
    Roshan Kumar Jha
</span>

<div>
    <input type="button"
        id="driver"
        value="Get Data" />
</div>

jQuery | post() Method

The post() method in jQuery loads the page from server using POST HTTP request and returns XMLHttpRequest object.

Syntax:

$.post( url, data, callback_function, data_type )

Parameters: 

• url: It is the required parameter and used to send the request.
• data: It is optional parameter and it represents key/value pairs of data that will be sent to the server.
• callback_function: It is optional parameter and it represents a function to be executed when the data is loaded successfully.
• data_type: It is optional parameter and it represents a type of data to be returned to callback function: xml, html, script, json or text.
• main.php: This PHP file call in the below example when button pressed.

Example :-

Use post() method and call a PHP file.

// main.php file

<?php

    echo"Hello Roshan!";

?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">

 <h2 id="rk">Roshan Kumar jha</h2> 
<button id="submit">
    Click Here!
</button>

<!-- Script to use post() method -->
<script>
    $(document).ready(function() {
        $("button").click(function() {
            $.post("/submit.php", {
                name: "Roshan",
            },

            function(data,status) {
                document.getElementById("rk").innerHTML
                        = data;
                document.getElementById("submit").innerHTML
                        = "Data Passed";
            });
        });
    });
</script>