Monday, October 22, 2012

jQuery Ajax HTML Response Example


jQuery supports different types of responses data types which are sent by the server as a result of processing Ajax request, the various types of data supported are HTML, XML, JSON and Text. In this post we shall see on how to process HTML data returned from the server using jQuery.

The syntax for receiving and processing HTML response is as follows.

$.ajax({
    url: "AjaxData.html",
    cache: true,
    dataType: "html",
    success: function(result) {…}
});

The following example receives a HTML format data from the server and displays the data in a DIV tag in the browser.


.aspx Page (Client Side)
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>jQuery Ajax</title>
    <script type="text/javascript" src="JavaScript/jquery-1.7.2.js"></script>
    <script
        type="text/javascript"
        language="javascript">
        $(document).ready(function() {
            //
            //
            // Get HTML Response data from the Server
            $('#btnGetHTML').click(function(event) {
                event.preventDefault();
                $.ajax({
                    url: "AjaxData.html",
                    cache: true,
                    dataType: "html",
                    success: function(result) {
                        $("#divHTML").html(result);
                    }
                });
            });
        });
    </script>                 
</head>
<body>
    <form id="frmAjax" runat="server">
    <table border="1">
        <tr>
            <td><b>Action</b></td>
            <td><b>Response</b></td>
        </tr>
        <tr>
            <td>
                <asp:Button
                    ID="btnGetHTML"
                    runat="server"
                    Text="Get HTML"/>
            </td>
            <td>
                <div id="divHTML"></div> 
            </td>
        </tr> 
    </table>
    </form>
</body>
</html>

AjaxData.html (Server side)
<table border="1">
    <tr>
        <td><b>Name</b></td>
        <td><b>Age</b></td>
        <td><b>Address</b></td>
    </tr>
    <tr>
        <td>John</td>
        <td>35</td>
        <td>125. E.Spring Creeks, OH</td>
    </tr>
    <tr>
        <td>Harry</td>
        <td>23</td>
        <td>121 Highway, Plano TX</td>
    </tr>   
</table>

Run the Application and click on the btnGetHTML button, notice that the request is processed and the HTML data sent by the server gets displayed in the Browser.

Related Post
jquery ajax method
jquery ajax get example
jquery ajax post example
jquery ajax html response example
jquery ajax xml response example
jquery ajax json response example
jquery ajax text response example

Search Flipkart Products:
Flipkart.com

No comments: