jQuery > Ajax methods

.ajax() - Asynchronous ajax request in jQuery

How to send asynchronous HTTP request to the server and get response in jquery?


To send asynchronous HTTP request to the server and get response (sending request to the server and getting response without browser postback/refresh), ajax method can be used.

 <input type="button" id="bntAjax" value="Load Data + Other Ajax Test" />
    <div id="divResult"></div>
    
    <script>
        $("#bntAjax").click(function () {
            $.ajax({
                type: "POST",
                url: "jQueryAjaxData.aspx",
                data: "a=2&b=5",
                success: function (msg) {
                    $("#divResult").text(msg);
                }
            });
        });
    </script>

Here on click of “btnAjax” button, ajax method will fire.

Here

  1. type: request is sent via html form “post” or “get” mechanism
  2. url: Any valid url
  3. data : data to send to the page, more data can be sent separated by "&"
  4. success: function to execute when the request is processed successfully, the “msg” is the exact value that will have all the response string returned from the server.
In above code snippet, “a” and “b” form variable will be posted by using POST method of the form to the jQueryAjaxData.aspx page. In order to retrieve the value on .aspx page, we need to write following code (in asp.net)
 
int a = int.Parse(Request.Form["a"]);
int b = int.Parse(Request.Form["b"]);

The returned value from “jQueryAjaxData.aspx" page will be written to the “divResult”.

 Views: 3068 | Post Order: 106



Write for us