jQuery - AJAX get() and post() Methods

jQuery get() and post() methods are used to request data from a server via an HTTP GET or POST request.

HTTP Request: GET vs POST

Two common methods for request-response between a client and server are: GET and POST.

  • GET- Request data from a specified resource
  • POST- Submit data to be processed to a specified resource

GET is basically used to get (retrieve) data from the server. Note: The GET method may return cached data.

POST can also be used to get 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 ourHTTP Methods - GET vs POST。

jQuery $.get() Method

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

Syntax:

$.get(URL,callback);
或
$.get( URL [, data ] [, callback ] [, dataType ] )
  • URL: The URL string to send the request to.
  • data: Optional. A string or key/value pairs to send to the server.
  • callback: Optional. The callback function to execute after the request succeeds.
  • dataType: Optional. The type of data returned from the server. Default: Intelligent guess (can be xml, json, script, or html).

The following example uses the $.get() method to retrieve data from a file on the server:

Example

$("button").click(function(){ $.get("demo_test.php",function(data,status){ alert("Data:" + data + "\nStatus:" + status); }); });

Try it Yourself »

The first parameter of $.get() is the URL we wish to request ("demo_test.php").

The second parameter is the callback function. The first callback parameter holds the content of the requested page, and the second callback parameter holds the status of the request.

Tip:The PHP file ("demo_test.php") looks like this:

demo_test.php File Code:

<?php echo 'This is data read from the PHP file.'; ?>

jQuery $.post() Method

The $.post() method submits data to the server using an HTTP POST request.

Syntax:

$.post(URL,callback);
或
$.post( URL [, data ] [, callback ] [, dataType ] )
  • URL: The URL string to send the request to.
  • data: Optional. A string or key/value pairs to send to the server.
  • callback: Optional. The callback function to execute after the request succeeds.
  • dataType: Optional. The type of data returned from the server. Default: Intelligent guess (can be xml, json, script, or html).

The following example uses $.post() to send data along with the request:

Example

$("button").click(function(){ $.post("/try/ajax/demo_test_post.php", { name:"Example", url:"http://www.example.com" }, function(data,status){ alert("Data:\n" + data + "\nStatus:" + status); }); });

Try it Yourself »

The first parameter of $.post() is the URL we wish to request ("demo_test_post.php").

Then we send data along with the request (name and url).

The PHP script in "demo_test_post.php" reads these parameters, processes them, and returns the result.

The third parameter is the callback function. The first callback parameter holds the content of the requested page, and the second parameter holds the status of the request.

Tip:The PHP file ("demo_test_post.php") looks like this:

demo_test_post.php File Code:

<?php $name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : ''; $url = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : ''; echo 'Website Name:' . $name; echo "\n"; echo 'URL Address:' .$url; ?>
Other Extensions