• Friday, February 28, 2014

    JQuery $.post function - jquery to load data from the server using HTTP POST

    POST is basically used for sending form data to server and recive output from the server.
    jQuery $.post() function sends and request data from the server using HTTP POST.

    Syntax: $.post(url,postData,CallBack);

    url: A string contains the url, to which request is send.

    postData: Form data for sending.....

    CallBack: a function which execute when the request succeeds.

    Example:



    $.post("\a.php",
    {
    username: $("#txtusername").val(),
    password: $("#txtpass").val()
    },function(success, data)
    {
    alert("Server Sends: " + data);
    });

    Full Example:
    <!doctype HTML>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("#btn").click(function(){
       $("#result").html("Please Wait.............");
       $.post("/test.php",
                          {
                          username: $("#txtusername").val(),
                          password: $("#txtpass").val()
                          },function(data){
                       $("#result").html(data);

                   });
      });
    });
    </script>
    </head>
    <body>
    <div id="result"></div>
    <br />
    <form name="f1">
    Username: <input type="text" id="txtusername" placeholder="UserName" /><br />
    Password: <input type="password" id="txtpass" placeholder="Password" />
    <input type="submit" id="btn" value="Submit" />
    </form>
    </body>
    </html>

    Syed Masoom Rizvi

    Author & Editor

    Hi, This is Syed Masoom Rizvi, who is continue exploring the world of programming ,programming and programming... :)

    0 comments:

    Post a Comment