jQuery Ajax Get() Method Example

What is jQuery ajax $.GET method – How to use this ajax $.GET with example. In this ajax $.GET method tutorial, We are going to show how to use this method with example from scratch.

Let’s see jQuery Ajax $.GET

What is jQuery Ajax $.GET Method ?

The jQuery ajax $.GET method sends asynchronous http GET request from the server and get the response from the server without reloading/refreshing the whole part of web page.

In the simple words, ajax $.GET method mainly used to send asynchronous http GET request to
send or retrieve/get  the data from the web server without reloading/refreshing whole part of web page. It will change or replace the data of whole web page without refreshing the web page.

Syntax of Ajax $.GET Method

jQuery.get( url [, data ] [, success ] [, dataType ] ); 

Parameters

  • url: This is the required parameter. Url is adress where, you want to send & retrieve the data.
  • data: This is used to sent some to the server with request.
  • success : This function to be executed when request succeeds.
  • dataType: dataType is a response content or data expected from the server.

Example of Ajax $.GET

This example will demostrate you how to send data to the server along with the request using ajax $.GET method.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ajax GET Request Example</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<style>  
.formClass
{
    padding: 15px;
    border: 12px solid #23384E;
    background: #28BAA2;
    margin-top: 10px;
} 
</style> 
<script type="text/javascript">
$(document).ready(function(){
   $("button").click(function(event){

    var name = "Tutsmake";
    
    $.get('https://www.tutsmake.com/Demos/html/ajax-get-method.php', {webname: name}, function(data){

        $("#output").html(data);
    });

  });

});
</script>
</head>
<body>
    <div class="formClass">
      <button type="button">Click &amp; Get Data</button><br>
      <div id="output">Hello</div>    
    </div>
</body>
</html>                            

Output

Ajax GET Request Example

Hello

Example demonstration

  • In this above ajax $.GET method example. The url parameter is first parameter of the $.GET method and it help to send form data from the server using Http GET request.
  • The Next parameter data is a data to submit form data in JSON format, In pair of key value.
  • Next parameter “success” , When the HTTP GET request is succeeds.
  • The dataType parameter is a used to receive the response from the server.

Be First to Comment

Leave a Reply

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