使用 Ajax 插入数据后更新 HTML 表的问题

Question

我是Ajax 的新手。在使用Ajax 成功将数据插入数据库后，我尝试更新我的HTML table，而不是使用window.location.reload() 加载整个表单。

插入方法

[WebMethod]
public static void SaveUser(Employee objEmployee)  //Employee is the class
{
      //My Code for insert
}

当数据插入成功时，这工作正常。Ajax 插入定义如下

更新方法

public static void GetData()  //Tried using datatable as return type nothing happened
{
    //var dt = new DataTable();
    using (var con = new SqlConnection(Constr))
    {
        const string query = "select * from TblUser";
        using (var cmd = new SqlCommand(query, con))
        {
            using (var sda = new SqlDataAdapter())
            {
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                using (TableData)
                {
                    sda.Fill(TableData);
                    //return TableData;
                }
            }
        }
    }
}

按按钮保存我的ajax 脚本是这样的

<script type="text/javascript">
     $(function () {
        $("#btnSave").click(function () {
            alert("TESST");
            var user = {};
            user.FName = $("#FirstName").val();
            user.LName = $("#Surname").val();
            user.MName = $("#MiddleName").val();
            // Some others are also there
            user.CreatedDateTime = new Date();
            user.ModifiedDateTime = new Date();

            $.ajax({
                type: "POST",
                url: "Default.aspx/SaveUser",
                data: '{objEmployee: ' + JSON.stringify(user) + '}',
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function () {
                    alert("User has been added successfully.");
                    //Another Ajax to update the grid
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "Default.aspx/GetData",
                        data: "{}",
                        dataType: "json",
                        success: function () {
                        },
                        error: function () {
                            alert("Error while Showing update data");
                        }
                    });
                },
                error: function () {
                    alert("Error while inserting data");
                }
            });
            return false;
        });
    });
</script>

我已经像这样绑定到 HTML 表格

<table id="dataTables-example" role="grid">
<thead>
   <tr role="row">
      <th>Name</th>
       <th>Email Id</th>
       <th>Mobile(H)</th>
       <th >Mobile(O)</th>
       <th>Joining Date</th>
       <th>Birth Date</th>
    </tr>
 </thead>
 <tbody>
  <% for (var data = 0; data < TableData.Rows.Count; data++)
     { %>
       <tr class="gradeA odd" role="row">
        <td class="sorting_1"><%=TableData.Rows[data]["FName"]%></td>
        <td><%=TableData.Rows[data]["EMail"]%></td>
        <td><%=TableData.Rows[data]["Telephone"]%></td>
        <td><%=TableData.Rows[data]["Mobile"]%></td>
        <td><%=TableData.Rows[data]["DOJ"]%></td>
        <td><%=TableData.Rows[data]["DOB"]%></td>
    </tr>
    <% } %>
 </tbody>
</table>

我的问题

1. 插入后调用了我的更新方法，但我看不到更新的数据。
2. 页面刷新后如webmethod为static多个数据显示。

Answer 1

遍历接收到的数据并将它们设置到您的表中：

    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "Default.aspx/GetData",
        data: "{}",
        dataType: "json",
        success: function (data) {
         for (var i = 0; i < data.d.length; i++) {
         $("#dataTables-example tbody").append("<tr><td>" + data.d[i].FName+ " 
         </td><td>" + data.d[i].EMail+ "</td><td>" + data.d[i].Telephone+ "
         </td></tr>");
         }
         },
        error: function () {
        alert("Error while Showing update data");
        }
        });