Jquery Ajax Example using Get and Post Methods

Jquery Ajax Example using Get and Post Methods

In Client Server architecture get & post methods are well popular for response & request mechanism. During development phases many times we required to send or receive data in between client & server. In Jquery to deal with the above situations there are two Ajax methods are introduced. Get & Post. Using get method we can receive the response from server in client & using post method we can post our client side data to the server. In below check our Jquery Ajax Example.

Jquery Ajax Get method

Using Jquery $.get() method we can fetch the data from server. Syntax used for Jquery get method is as below.

$.get(url, callback);

URL specify the path from which server page you want to receive data in client end. Let us have an asp page demo_get.asp. In this page I added the following lines.

<%
response.write(“This line is to test get method in Jquery”);
%>

What we want is on a button click we need to show the above server response in client end using Jquery ajax get method. Look at the example below how to do this.

$(“#btnGet”).click(function() {
$.get(“demo_get.asp”, function(data, status) {
alert("Response: " + data + "\nRequest Status: " + status);
});
});

Jquery Ajax Post Method

Generally HTTP Post method used to send data from client to server. Compare to get method post method is more secured. During post method control data moves with form. Jquery provide $.post() method to send client data to the server. Syntax used for Jquery post method is as below.

$.post(url, data, callback);

URL is the path to which server page you want to send client data. Let us have a button with id btnPost. What we want is using Jquery post method we will send some sample data to demo_post.asp server page. Let’s look at the button click code how to send client data using post method.

$(“#btnPost”).click(function() {
$.post(“demo_post.asp”,
{
name: “Biswabhusan”,
designation: “Team Lead”
},
function(data, status) {
alert("Response: " + data + "\nRequest Status: " + status);
});
});

Using the above our data name & designation post to the server page demo_post.asp. Now look at the below code how to retrieve these data in server page demo_post.asp.

<%
dim emp_name, emp_designation
emp_name=Request.Form("name")
emp_designation=Request.Form("designation")
Response.Write("Hi " & emp_name & ". ")
Response.Write("You are a " & emp_designation & ".")
%>

Jquery get & post methods are Ajax based. During server & client communication using these methods it not required the total page refresh.