Post() Methods jQuery – AJAX get() and | Examples

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

HTTP Request: GET vs. POST :

  • Two 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.
  • To learn more about GET and POST, and the differences between the two methods, please read our HTTP Methods GET vs POSTchapter.

jQuery $.get() Method :

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

Syntax:

$.get(<i>URL,callback</i>);
  • The required URL parameter specifies the URL you wish to request.
  • The optional callback parameter is the name of a function to be executed if the request succeeds.
  • The following example uses the $.get() method to retrieve data from a file on the server:

Example :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("demo_test.asp", function(data, status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});
</script>
</head>
<body>

<button>Send an HTTP GET request to a page and get the result back</button>

</body>
</html>
  • The first parameter of $.get() is the URL we wish to request (“demo_test.asp”).
  • The second parameter is a callback function. The first callback parameter holds the content of the page requested, and the second callback parameter holds the status of the request.
  • Tip: Here is how the ASP file looks like (“demo_test.asp”):
<%
response.write("This is some text from an external ASP file.")
%>

jQuery $.post() Method :

  • The $.post() method requests data from the server using an HTTP POST request.

Syntax:

$.post(<i>URL,data,callback</i>);
  • The required URL parameter specifies the URL you wish to request.
  • The optional data parameter specifies some data to send along with the request.
  • The optional callback parameter is the name of a function to be executed if the request succeeds.
  • The following example uses the $.post() method to send some data along with the request:

Example :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("demo_test_post.asp",
{
name: "Donald Duck",
city: "Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});
</script>
</head>
<body>

<button>Send an HTTP POST request to a page and get the result back</button>

</body>
</html>
  • The first parameter of $.post() is the URL we wish to request (“demo_test_post.asp”).
  • Then we pass in some data to send along with the request (name and city).
  • The ASP script in “demo_test_post.asp” reads the parameters, processes them, and returns a result.
  • The third parameter is a callback function. The first callback parameter holds the content of the page requested, and the second callback parameter holds the status of the request.
  • Tip: Here is how the ASP file looks like (“demo_test_post.asp”):
<%
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city & ".")
%>

jQuery AJAX Reference :

For a complete overview of all jQuery AJAX methods, please go to our jQuery AJAX Reference.

Example : 1

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("demo_test_post.asp",
{
name: "Donald Duck",
city: "Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});
</script>
</head>
<body>

<button>Send an HTTP POST request to a page and get the result back</button>

</body>
</html>

Example : 2

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("demo_test.asp", function(data, status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});
</script>
</head>
<body>

<button>Send an HTTP GET request to a page and get the result back</button>

</body>
</html>