jQuery - AJAX get() and post() Methods

Bharathi. G

 HTTP Request Methods: GET vs. POST

When a client (like a browser) communicates with a server, it typically uses one of two common HTTP methods: GET or POST.

GET – Retrieve Data

  • Used to request data from a specific resource (like a file or API).
  • Data is sent via the URL (query string).
  • Often used for fetching content.
  • Can be cached and bookmarked.
  • Not suitable for sending sensitive or large amounts of data.

Example: GET /products?category=shoes

POST – Send & Process Data

  • Used to submit data to a server for processing (e.g., form submissions).
  • Data is sent in the request body, not the URL.
  • Cannot be cached or bookmarked.
  • Ideal for sending form data, files, or any action that modifies data on the server.
Example: POST /submit-order
Body: { "product_id": 123, "quantity": 2 }

jQuery $.get() Method

The $.get() method in jQuery is used to send an HTTP GET request to the server and retrieve data. It’s a quick and easy way to load content without reloading the entire page.

Syntax

$.get(URL, callback);

  • URL (required) – The address of the server-side resource you want to request.
  • callback (optional) – A function that runs when the request is successful.

Example: Get Data from the Server

In the following example, clicking the button triggers a GET request to a file on the server (demo_test.asp). The response data and request status are then displayed in an alert box.

$("button").click(function(){
  $.get("demo_test.asp", function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});
  • data – The content returned from the server.
  • status – The status of the request (e.g., "success" or "error").


Example Server File (ASP)

Here’s what the server-side file demo_test.asp might look like:

<%
response.write("This is some text from an external ASP file.")
%>

When the .get() request is made, this response is sent back and displayed via the callback.

This method is great for fetching small bits of server data on demand, like loading messages, user info, or refreshing content sections dynamically.

jQuery $.post() Method

The $.post() method in jQuery is used to send data to a server using an HTTP POST request. It’s commonly used when you need to submit form data or send information that the server will process.

Syntax

$.post(URL, data, callback);

  • URL (required) – The location of the server-side script or file.
  • data (optional) – Data to be sent along with the request (in key/value pairs).
  • callback (optional) – A function to execute when the request completes successfully.

Example: Send Data to the Server

In the following example, clicking the button sends some data (name and city) to the server via POST. The server responds, and the result is displayed in an alert box.

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name: "Donald Duck",
    city: "Duckburg"
  },
  function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

  • The first argument is the URL of the server-side script (demo_test_post.asp).
  • The second argument is the data being sent to the server.
  • The third argument is a callback function that receives:
  • data – The server’s response
  • status – The status of the request (e.g., "success")

Example Server File (ASP)

Here's what the server-side file demo_test_post.asp might contain:

<%
dim fname, city
fname = Request.Form("name")
city = Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city & ".")
%>

This script reads the submitted data and returns a personalized message based on it.

The $.post() method is ideal for sending form inputs, login credentials, or any data that requires processing on the server without needing a page reload.
Tags
Our website uses cookies to enhance your experience. Learn More
Accept !

GocourseAI

close
send