Send HTTP Get Request To A Page And GET The Result Back Using jQuery

By Faruque Ahamed Mollick

In this post, we are going to learn how to send HTTP GET request to a page and how to get the result back from that page using jQuery get() method.

Before we are going to see the code here is some information about the get() function of jQuery.

jQuery get() method is a function in jQuery which uses to load data from the server using an HTTP GET request. Using this method, we can send data to a page and get back the response also.

Example 1

In this example, we are going to send HTTP GET request to a page demo.php and return the result. Here we are simply going to see the content of the page

Below is our HTML code:

<button>Send an HTTP GET request and get result back below</button>
<div id="result"></div>

In the above HTML code we have a button and below the button, we have a div element with id “result”. On clicking on the button we are going to load data from the page inside the element with id “result”.

Ajaxify Weather Forecast PHP Script Source Code

Live email validation using jQuery

Now, below is the jQuery code:

$("button").click(function(){
    $.get("demo.php", function(data, status){
        $('#result').html(data+'<br/>Status: '+status);
    });
});

In the above jQuery code, we have used jQuery get() method which sends request to the page “demo.php” and then returns back the result. We will able to see the result from the “demo.php” page. Also, we will see the status.

Now let’s see a little bit more advanced example of using jQuery get() method.

Example 2

In this example below is our jQuery code:

$("button").click(function(){
    $.get("demo.php", { city:"London", country:"United Kingdom" }, function(data, status){
        $('#result').html(data+'<br/>Status: '+status);
    });
});

The HTML code will be as same as you see in the previous example.

Immediately submit upload form after selecting file

The above code is very similar to the previous code. The only difference is that, we are sending the data with the get() method. In this case, the “demo.php” file contains the code that you can see below:

<?php
  $city = $_GET['city'];
  $country = $_GET['country'];
  echo "City: ".$city."<br/>";
  echo "Country: ".$country;
?>

The jQuery get() method sending HTTP GET request through URL get method just like the example given below:

http://domain.com/demo.php?city=London&country=United+Kingdom

We are getting the data with the same URL get method. Here we are sending the data as getting method using jQuery get() function.

Now test it and you will get back the result given below

City: London
Country: United Kingdom
Status: success

So how was it? Was that not so interesting? You can load data on your web page from another page without refreshing the complete page by using the jQuery get() method.

Leave a Reply

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