Quick Contact

    jQuery Ajax GET and POST Requests

    jQuery $.get() and $.post() Methods

    The $.get() and $.post() functions of the jQuery library offer straightforward methods for sending and retrieving data asynchronously from a web server. With one significant exception, both techniques are nearly identical. The $.get() method sends Ajax queries using the HTTP GET method, whereas the $.post() method sends Ajax requests using the HTTP POST method.

    These methods’ fundamental syntax can be provided with:

    $.get(URL, data, success); β€”Orβ€” $.post(URL, data, success);

    The following is the meaning of the parameters in the syntax above:

    • The URL to which the request is sent is specified by the necessary URL argument.
    • A series of query strings, or key/value pairs, are specified by the optional data argument and are transmitted with the request to the web server.
    • If the request is successful, the optional success argument, which is essentially a callback function, is invoked. The returned data is normally retrieved using it.

    Note:
    Requests are transmitted from a browser to a server using the HTTP GET and POST methods. The manner the data is delivered to the server is where these methods diverge most. For a thorough description and comparison of the GET and POST methods, see the lesson on those two techniques.

    Performing GET Request with AJAX using jQuery

    The “date-time.php” file is accessed via an Ajax request in the following example using the jQuery $.get() method and the HTTP GET method. Without refreshing the page, it merely obtains the date and time that the server returned and displays it in the browser.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Example of Making GET Request using Ajax in jQuery< /title>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        $("button").click(function(){
            $.get("/examples/php/date-time.php", function(data){
                // Display the returned data in browser
                $("#result").html(data);
            });
        });
    });
    < /script>
    < /head>
    < body>
    < div id="result">
    < h2>Content of the result DIV box will be replaced by the server date and time< /h2>
    < /div>
    < button type="button">Load Date and Time< /button>
    < /body>
    < /html>
    

    Along with the request, you can send some information to the server. The jQuery code in the example below makes an Ajax request to the “create-table.php” file and also sends some extra information to the server with the request.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Example of Sending Data with Ajax GET Request in jQuery< /title>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        $("button").click(function(){
            // Get value from input element on the page
    varnumValue = $("#num").val();
    
            // Send the input data to the server using get
            $.get("/examples/php/create-table.php", {number: numValue} , function(data){
                // Display the returned data in browser
                $("#result").html(data);
            });
        });
    });
    < /script>
    < /head>
    < body>
    < label>Enter a Number: < input type="text" id="num"></ label>
    < button type="button">Show Multiplication Table< /button>
    < div id="result">< /div>
    < /body>
    < /html>
    

    Performing POST Request with AJAX using jQuery

    In jQuery, GET requests and POST requests are interchangeable. In general, the requirements of your server-side code will determine whether you should utilise the $.get() or $.post() methods. You must utilise POST if you need to send a substantial quantity of data (such as form data), as GET has a strict data transfer cap.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Example of Making POST Request using Ajax in jQuery< /title>
    < style>
    label{
    display: block;
    margin-bottom: 10px;
        }
    < /style>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        $("form").submit(function(event){
            // Stop form from submitting normally
    event.preventDefault();
    
            // Get action URL
    		varactionFile = $(this).attr("action");
    
            /* Serialize the submitted form control values to be sent to the web server with the request */
    varformValues = $(this).serialize();
    
            // Send the form data using post
            $.post(actionFile, formValues, function(data){
                // Display the returned data in browser
                $("#result").html(data);
            });
        });
    });
    < /script>
    </ head>
    < body>
    < form action="/examples/php/display-comment.php">
    < label>Name: < input type="text" name="name">< /label>
    < label>Comment: < textarea cols="50" name="comment">< /textarea>< /label>
    < input type="submit" value="Send">
    < /form>
    < div id="result">< /div>
    < /body>
    < /html>
    

    Now that you know how to use jQuery to conduct a variety of Ajax tasks like loading data and submitting forms asynchronously.

    FAQS

    Q1. How GET and POST methods are used in Ajax?

    The main purpose of GET is to simply retrieve data from the server. Recall that the GET method might deliver cached data. You may also retrieve certain data from the server using POST. The POST method is frequently used to deliver data along with requests, however it NEVER stores data.

    Q2. Can I use fetch for post request?

    It enables you to send an HTTP request, such as a POST request or a GET request (for data retrieval) (for posting data). The code below explains the fundamental fetch request: 1 2 3 4 5 6 7 8 9 10 11 12 fetch(‘url’) . then(response => { //handle response console.

    Q3. Is AJAX better than fetch?

    Ajax vs Fetch

    It is possible to speed up data loading on websites. Although Ajax lacks some of the functionality that JavaScript offers, it does offer some fantastic capabilities, such as data binding. It only works with one browser. Fetch, on the other hand, will load the entire webpage.

    Q4. Is AJAX and fetch same?

    An HTML page can be updated by loading words, graphics, and structured data asynchronously using the browser API Fetch. It resembles the Ajax definition somewhat. However, async/await in combination with fetch dramatically simplifies the code because fetch is built on the Promise object.

    Q5. Which is better Axios or fetch?

    HTTP requests can be intercepted by Axios. Requests cannot be intercepted by Fetch by default. The ability to track download progress is built into Axios. Upload progress is not supported by Fetch.

    Copyright 1999- Ducat Creative, All rights reserved.

    Anda bisa mendapatkan server slot online resmi dan terpercaya tentu saja di sini. Sebagai salah satu provider yang menyediakan banyak pilihan permainan.