Bind Gridview using AJAX

浏览数：33 / 时间：2015年06月09日

http://www.codeproject.com/Tips/775585/Bind-Gridview-using-AJAX

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js" 
    type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            BindGridView();

        });

        function BindGridView() {

            $.ajax({
                type: "POST",
                url: "Index.aspx/GetData",
                contentType: "application/json;charset=utf-8",
                data: {},
                dataType: "json",
                success: function (data) {

                    $("#grdDemo").empty();

                    if (data.d.length > 0) {
                        $("#grdDemo").append("<tr><th>Username</th>  
                        <th>Firstname</th>  <th>Lastname</th>  
                        <th>EmailID</th></tr>");
                        for (var i = 0; i < data.d.length; i++) {

                            $("#grdDemo").append("<tr><td>" + 
                            data.d[i].Firstname + "</td> <td>" + 
                            data.d[i].Lastname + "</td> <td>" + 
                            data.d[i].Username + "</td> <td>" + 
                            data.d[i].EmailID + "</td></tr>");
                        }
                    }
                },
                error: function (result) {
                    //alert("Error login");

                }
            });
        }
    </script>
</head>
<body>
    <form id="frm1" runat="server">
    <asp:GridView ID="grdDemo" runat="server">
    </asp:GridView>
    </form>
</body>
</html>