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>

Related Posts

Strategic DevOps Career Growth and High Salary Skills

Introduction The digital landscape is shifting rapidly. As companies across the globe transition to cloud-native infrastructures, the demand for professionals who can bridge the gap between development…

Read More

Top DevOps Certifications: Dominate Kubernetes, Cloud, And Automation

Introduction The cloud infrastructure world is moving faster than ever, and the demand for production-ready engineering talent is breaking records. Teams everywhere are desperately trying to bridge…

Read More

Streamlining Distributed Pipelines with DataOps Multi-Cloud Data Management

Introduction Modern business operations generate massive amounts of information every single second. To store, process, and analyze this information, organizations no longer rely on a single data…

Read More

Ultimate DataOps Automation Tools Guide: Build and Orchestrate Scalable Pipelines

Introduction Modern enterprises run on data, yet managing the underlying infrastructure remains a massive operational challenge. Historically, data workflows were handled manually. Data engineers wrote custom scripts,…

Read More

Accelerate Your Pipeline: Implementing Real-Time DataOps

Introduction Real-time DataOps is a critical evolution in how modern organizations manage the constant flow of information. By integrating automation, continuous testing, and real-time processing, businesses can…

Read More

Calculate Your Canada PR Points: The Complete Guide to Boosting Your CRS Score

Introduction Canada uses an objective, merit-based points system to select the most qualified candidates from around the world. To assess your chances, you need to use a…

Read More