jQuery Ajax Post Request Example with Parameters

jQuery Ajax Post Request Example with Parameters

In this tutorial, we will learn how to create AJAX POST requests using jQuery with parameters. This is a common task when working with web applications, as it allows you to send data to a server and receive a response without having to reload the entire page. We’ll create a simple example where we send user input to a server and display the response.

jQuery Ajax Post Request Method Example with Parameters Example

Here is an steps to create jquery ajax post data example with parameters:

Step 1: Create the HTML Structure

Create an HTML file (e.g., index.html) with the following structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery AJAX POST Example</title>
    <!-- Include jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>jQuery AJAX POST Example</h1>
    <div>
        <label for="name">Enter your name:</label>
        <input type="text" id="name">
        <button id="submit">Submit</button>
    </div>
    <div id="result"></div>
    <script src="script.js"></script>
</body>
</html>

Step 2: Create the JavaScript File

Create a JavaScript file (e.g., script.js) in the same directory as your HTML file. This file will contain the jQuery code to handle the AJAX request:

$(document).ready(function () {
    // When the submit button is clicked
    $("#submit").click(function () {
        // Get the user's input from the input field
        var name = $("#name").val();

        // Create an object with the data to send to the server
        var dataToSend = {
            name: name
        };

        // Send the AJAX POST request
        $.ajax({
            type: "POST",
            url: "server.php", // Replace with your server-side processing script
            data: dataToSend,
            success: function (response) {
                // Display the response in the result div
                $("#result").html(response);
            }
        });
    });
});

In this JavaScript code:

  • We use the $(document).ready() function to ensure that the code runs after the DOM is fully loaded.
  • We attach a click event handler to the “Submit” button.
  • Inside the event handler, we retrieve the user’s input from the input field.
  • We create an object (dataToSend) that contains the data we want to send to the server. In this case, we’re sending the user’s name.
  • We use $.ajax() to make the POST request to the server. Replace "server.php" with the URL of your server-side processing script.
  • In the success callback function, we handle the response from the server by updating the content of the #result div with the response text.

Step 3: Create the Server-Side Script

Create a server-side script (e.g., server.php) to handle the POST request and process the data. Here’s a simple PHP example that just echoes back the received data:

<?php
if ($_SERVER["REQUEST_METHOD"] === "POST") {
    $name = $_POST["name"];
    echo "Hello, $name!";
} else {
    echo "Invalid request.";
}
?>

This PHP script checks if the request method is POST, retrieves the name parameter, and echoes a greeting with the received name.

Step 4: Testing the Application

  1. Make sure you have a web server running and serving your HTML and PHP files.
  2. Access the HTML file in your browser.
  3. Enter a name in the input field and click the “Submit” button.
  4. You should see a greeting message displayed in the #result div.

Recommended jQuery Tutorials

  1. jQuery | Event MouseUp By Example
  2. Event jQuery Mouseleave By Example
  3. jQuery Event Mouseenter Example
  4. Event jQuery MouseOver & MouseOut By Example
  5. keyup jquery event example
  6. Jquery Click Event Method with E.g.
  7. Event jQuery. Blur By Example
  8. jQuery form submit event with example
  9. keydown function jQuery
  10. List of jQuery Events Handling Methods with examples
  11. Jquery Selector by .class | name | #id | Elements
  12. How to Get the Current Page URL in jQuery
  13. jQuery Ajax Get() Method Example
  14. get radio button checked value jquery by id, name, class
  15. jQuery Set & Get innerWidth & innerHeight Of Html Elements
  16. jQuery Get Data Text, Id, Attribute Value By Example
  17. Set data attribute value jquery
  18. select multiple class in jquery
  19. How to Remove Attribute Of Html Elements In jQuery
  20. How to Checked Unchecked Checkbox Using jQuery
  21. jQuery removeClass & addClass On Button Click By E.g.
  22. To Remove whitespace From String using jQuery
  23. jQuery Ajax Get Method Example
  24. To Load/Render html Page in div Using jQuery Ajax $.load

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *