How To Use AJAX Post Method In JQuery With Example

admin_img Posted By Bajarangi soft , Posted On 16-10-2020

In JQuery The $ post() method requests data from the server using an HTTP POST request.So today we discuss how to use post method with ajax and jquery

How To Use AJAX Post Method In JQuery With Example

Syntax:

$.post(URL,data,callback);

The required URL parameter specifies the URL you wish to request.

The optional data parameter specifies some data to send along with the request.

The optional callback parameter is the name of a function to be executed if the request succeeds.

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

Example(1)

Step 1:Create index.html to impelement below code.

 

<button  class="btn btn-success">Send an HTTP POST request to a page and get the result back</button>


Step 2:Create demo_ajax.asp file and write below texts in it.
 
<%
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city & ".")
%>


Step 3:Now impement Jquery To post data from demo_ajax.asp file.
 
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $.post("demo_ajax.asp",
                {
                    name: "Donald Duck",
                    city: "Duckburg"
                },
                function(data,status){
                    alert("Data: " + data + "\nStatus: " + status);
                });
        });
    });
</script>


Complete Code For Using AJAX Post Method In JQuery With Example
 
<!DOCTYPE html>
<html>
<head>
    <title>How To Use AJAX Post Method In JQuery With Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<style>
    body {
        background: black;
    }
</style>
<body>
<div class="container">
    <br><br><br><br>
    <div class="text-center">
        <h2 id="color" style="color: White;">Use AJAX Post Method In JQuery</h2>
    </div>
    <br>
    <div class="well">
        <button class="btn btn-success">Send an HTTP POST request to a page and get the result back</button>
    </div>
</div>
</body>
</html>
<script>
    $(document).ready(function () {
        $("button").click(function () {
            $.post("demo_ajax.asp",
                {
                    name: "Donald Duck",
                    city: "Duckburg"
                },
                function (data, status) {
                    alert("Data: " + data + "\nStatus: " + status);
                });
        });
    });
</script>

Related Post