Prev Next

jQuery Get/Post

The jQuery $.get() and $.post() methods are simplified AJAX functions for sending HTTP GET and POST requests to a server. These methods are ideal for fetching or submitting data asynchronously without reloading the page.

Key Topics

Using $.get()

The $.get() method sends a GET request to the server and handles the response.

$.get("https://jsonplaceholder.typicode.com/posts/1", function(data) {
    console.log("Title:", data.title);
});

Explanation: This code sends a GET request to fetch a specific post and logs its title to the console.

Using $.post()

The $.post() method sends a POST request to the server with data.

$.post("https://jsonplaceholder.typicode.com/posts", {
    title: "New Post",
    body: "This is the content of the post.",
    userId: 1
}, function(data) {
    console.log("Post Created:", data.id);
});

Explanation: This code sends a POST request to create a new post on the server and logs the ID of the created post.

Example: Get and Post Requests


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Get/Post Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="get-content"></div>
    <button id="getButton">Fetch Post</button>

    <div id="post-response"></div>
    <button id="postButton">Create Post</button>

    <script>
        $(document).ready(function() {
            $("#getButton").click(function() {
                $.get("https://jsonplaceholder.typicode.com/posts/1", function(data) {
                    $("#get-content").html(
                        "<p>Title: " + data.title + "</p>" +
                        "<p>Body: " + data.body + "</p>"
                    );
                });
            });

            $("#postButton").click(function() {
                $.post("https://jsonplaceholder.typicode.com/posts", {
                    title: "New Post",
                    body: "This is a dynamically created post.",
                    userId: 1
                }, function(data) {
                    $("#post-response").html(
                        "<p>Post Created with ID: " + data.id + "</p>"
                    );
                });
            });
        });
    </script>
</body>
</html>

Explanation: This example demonstrates the use of $.get() to fetch a post and $.post() to create a new post. The responses are displayed dynamically on the webpage.

Key Takeaways

  • Simplified AJAX: Use $.get() and $.post() for quick and straightforward GET/POST requests.
  • Dynamic Interaction: Fetch or submit data asynchronously to create responsive user experiences.
  • Callback Functions: Both methods support success callbacks for handling server responses efficiently.
Prev Next