C#如何用ajax把本地数据库的数据显示在前端页面(view里面)?例如一个span一个div

2025-05-20 11:46:35
推荐回答(1个)
回答(1):

首先写一个一般处理程序来获取到你要加载到前台的数据,并序列化成json格式。

//代码实例
public class AjaxUserList : IHttpHandler {

        public void ProcessRequest(HttpContext context) {
            context.Response.ContentType = "text/plain";
            BLL.UserInfoBll userInfoBll = new BLL.UserInfoBll();
            int pageIndex;
            if (!int.TryParse(context.Request["pageIndex"],out pageIndex)) {
                pageIndex = 1;
            }
            int pageSize = 5;
            int pageCount = userInfoBll.GetPageCount(pageSize);
            //判断当前页码的取值范围
            pageIndex = pageIndex < 1 ? 1 : pageIndex;
            pageIndex = pageIndex > pageCount ? pageCount : pageIndex;
            //获取分页数据
            List userList = userInfoBll.GetPageList(pageIndex, pageSize);
            //获取页码条
            string pageBar = Util.PageBar.GetPageBar(pageIndex, pageCount);

            //***********************************************************
            //使用匿名类将多组数据序列化成Json格式
            //***********************************************************
            JavaScriptSerializer js = new JavaScriptSerializer();
            string json = js.Serialize(new { resultUserList = userList, resultPageBar = pageBar });//此处使用了匿名类将userList集合和pageBar进行封装后,再序列化
            //***********************************************************
            context.Response.Write(json);
        }

        public bool IsReusable {
            get {
                return false;
            }
        }
    }

然后,前台ajax请求这个一般处理处理程序获取到json数据,再通过js将数据添加到html。

//加载用户列表示例
        function LoadUserInfo(pageIndex) {
            $.post("AjaxUserList.ashx", { "pageIndex": pageIndex }, function (data) {
                var serverData = $.parseJSON(data);
                for (var i = 0; i < serverData.resultUserList.length; i++) {
                    $("" + serverData.resultUserList[i].ID + "" + serverData.resultUserList[i].UName + "" + serverData.resultUserList[i].UPwd + "" + ChangeDateFormat(serverData.resultUserList[i].SubTime) + "" + serverData.resultUserList[i].Remark + "详细编辑  删除").appendTo("#tabUserList");
                }
            });
        }