使用ajax调用webservice加载table

写了个ajax调用webservice动态加载表格的案例

不废话直接上代码

webservice代码：

/// <summary>
        /// 首页显示会员信息
        /// </summary>
        /// <param name="com"></param>
        /// <returns></returns>
        [WebMethod]
        public string UserInfoIndex()
        {
            return JsonHelper.GetJson(bll.UserInfoIndex());
        }

调用BLL层方法转换成json格式，方便js解析，BLL、DAL代码就不公布啦，都是些增删改查而已；
js代码：

<script type="text/javascript">
        $(function () {
            //加载用户的信息
            $.ajax({
                type: "POST",
                contentType: "application/json;charset=utf-8",//WebService 会返回Json类型
                url: "/UserService.asmx/UserInfoIndex",//WebService的路径
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                data: {},
                success: function (data) {
                    createShowingTable(data);
                }
            });
        });
        //动态创建一个table
        function createShowingTable(data) {

            var arr = null;
            if (typeof data.d == 'string')
                arr = JSON.parse(data.d);
            else
                arr = data.d;




            $.each(arr, function (i, item) {
                var str = "<tr><td><input type='checkbox' style='text-align:center'/></td>"
                str = str + "<td>" + item._member_id + "</td>"
                + "<td>" + item._name + "</td>"
                + "<td>" + item._sex + "</td>"
                + "<td>" + item._birthday + "</td>"
                + "<td>" + item._phone + "</td>"
                + "<td>" + item._update_time + "</td>"
                + "<td>" + item._city_name + "</td>"
                + "<td>" + item._member_id + "</td></tr>"

                $("#tab_tbd").append(str);
            })


        }
    </script>

html代码：

<table id="tblDataGridAge" class="table table-bordered table-striped dataTable" role="grid">
                                <thead>

                                     <tr>
                                    <th style="text-align:center"><input type="checkbox" name="checkbox1" value="checkbox"></th>
                                    <th style="text-align:center" class="cssTDHead">序号</th>
                                    <th  style="text-align:center" class="cssTDHead">会员ID</th>
                                     <th style="text-align:center" class="cssTDHead">姓名</th>
                                      <th style="text-align:center" class="cssTDHead">性别</th>
                                      <th style="text-align:center" class="cssTDHead">出生日期</th>
                                      <th style="text-align:center" class="cssTDHead">手机号码</th>
                                    <th style="text-align:center" class="cssTDHead">申请日期</th>
                                      <th style="text-align:center" class="cssTDHead">地址</th>

                                     <th style="text-align:center" class="cssTDHead">操作</th>
                                </tr>
                                </thead>
                               
                                 <tbody id="tab_tbd">

                                    </tbody>