如何将数据库记录填充到我的表 ajax 中
本文关键字:我的 ajax 填充 数据库 记录 | 更新日期: 2023-09-27 18:30:52
所以我去这些信息并有一个空的表名 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请求并获取这些数据。我做了几个假设。
- 该getAllCategory可以通过webapi或类似的东西访问前端。
-
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); } } });