如何将数据库记录填充到我的表 ajax 中

How populate database records into my table ajax

本文关键字:我的 ajax 填充 数据库 记录      更新时间:2023-09-26

所以我去这些信息并有一个空的表名 categorytable,所以我必须将记录存储在 categoryList 中才能使以下代码正常工作。 那么我在 categoryList 中写了什么,即从我的类别管理器获取记录并显示来自 sql 的数据

    </table>

<script>
    $(document).ready(function () {
        var categoryList = [];

        var $courseTableElement = $('#categoryTable');
        var $rowElement;
        var $cellElement;
        var index = 0;
        for (index = 0; index < categoryList.length; index++) {
            $rowElement = $('<tr></tr>');
            $cellElement = $('<td></td>', { text: categoryList[index].CategoryName });
            $rowElement.append($cellElement);
            $cellElement = $('<td></td>', { text: categoryList[index].CategoryId });
            $rowElement.append($cellElement);
            $courseTableElement.append($rowElement);

        }
    });
</script>

    public List<Category> getAllCategory(string inUserId)
    {
        DataSet ds = new DataSet();
        List<Category> categoryList = new List<Category>();
        string sqlText = "";
        using (SqlConnection cn = new SqlConnection())
        {
            cn.ConnectionString =
          ConfigurationManager.ConnectionStrings["DefaultConnection"].ToString();
            using (SqlCommand cmd = new SqlCommand())
            {
                cmd.Connection = cn; //setup the 
                cn.Open();
                using (SqlDataAdapter da = new SqlDataAdapter(cmd))
                {
                    sqlText = "SELECT CategoryId,CategoryName,CreatedBy,CreatedAt,UpdatedBy,UpdatedAt " +
              " FROM Category ";
                    cmd.CommandText = sqlText;
                    cmd.Parameters.Add("@inCurrentUserId", SqlDbType.VarChar, 200).Value = inUserId;

                    da.Fill(ds, "CategoryData");
                    cmd.CommandText = sqlText;
                }//using SqlDataAdapter da
                cn.Close();
            }//using SQLCommand cmd
        }//using SQLConnection cn
        foreach (DataRow dr in ds.Tables["CategoryData"].Rows)
        {
            Category category = new Category();
            category.CategoryId = Int32.Parse(dr["CategoryId"].ToString());
            category.CategoryName = dr["CategoryName"].ToString();
            category.CreatedBy = dr["CreatedBy"].ToString();
            category.CreatedAt = DateTime.Parse(dr["CreatedAt"].ToString());
            category.UpdatedBy = dr["UpdatedBy"].ToString();
            category.UpdatedAt = DateTime.Parse(dr["UpdatedAt"].ToString());
            categoryList.Add(category);
        }

        return categoryList;
    }

你只需要向你的服务器发出一个ajax请求并获取这些数据。我做了几个假设。

  1. 该getAllCategory可以通过webapi或类似的东西访问前端。
  2. getAllCategory将返回正确的json。

      function getDataFromServer(url, callback){
          var xmlhttp = new XMLHttpRequest();
          xmlhttp.open("get",url);
          xmlhttp.onreadystatechange = function(){
             if(xmlhttp.readystate === 4 && xmlhttp.status === 200){
                //data was retrieved successfully. 
                callback(JSON.parse(xmlhttp.response));
             }
          }
          xmlhttp.send();
      }
      $(document).ready(function () {
        //the path to action must include the id in querystring
        var url = 'path_to_action'
        getDataFromServer(url, function(data){
           var courseTableElement = $('#categoryTable');
           for(var i = 0; i < data.length; i++){
              var row = $('<tr></tr>');
              var cell1 = $('<td></td>, { text: data[i].CategoryName } );
              var cell2 = $('<td></td>, { text: data[i].CategoryId } );
              row.append(cell1);
              row.append(cell2);
              courseTableElement.append(row);
           }
        }
      });