后端list集合中的数据传递到前台HTML表格中显示

最新推荐文章于 2022-05-12 10:42:16 发布

Markfight!

最新推荐文章于 2022-05-12 10:42:16 发布

阅读量8k

点赞数 6

分类专栏： ajax 文章标签： ajax 前后端传值

本文链接：https://blog.csdn.net/wzh66888/article/details/88780670

版权

ajax 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

将后端数据传送到前端HTML表格中显示，主要利用了ajax的技术。

最近做的这个OA系统采用了前后端分离的技术进行开发，后端采用webAPI构建HTTP服务，前端主要使用了layUI框架进行页面布局。

要先实现后端list数据传递到前台HTML表格中显示，首先要做的是在后端查出数据，存放在list中。

这里只放核心代码，D层代码。

public List<Favoured_policyDTO> GetFavouredPolicy(string organizationId)
        {
            using (NO1DBContext nxt = new NO1DBContext())  //连接数据库
            {
                //新建一个entity
                BaseService<Favoured_policyEntity> favouredpolicy = new BaseService<Favoured_policyEntity>(nxt);
                //查询期数为organizationId的所有信息
                var GetFavouredPolicy = favouredpolicy.GetAll().Where(f => f.Organization_id == organizationId);
                //将查出来的entity的数据转换为DTO的数据
                var FavouredPolicy = (from gfp in GetFavouredPolicy
                                      select new Favoured_policyDTO
                                      {
                                          //缴费类型
                                          Paymoney_Type = gfp.Paymoney_Type,
                                          //奖励类型
                                          Rewardmoney_Type = gfp.Rewardmoney_Type,
                                      }).ToList();
                return FavouredPolicy;
            }
        }

后端代码写完，经swagger测试无误后开始写前端。

首先引入一个普通的HTML页面，创建一个表格，给表格起一个id，方便传值。

<body>
    <table id="favouredpolicy">
                        <tbody>
                            <tr>
                                <td>缴纳金额（元）</td>
                                <td>奖励利率（%）</td>
                                <td>奖励金额（元）</td>
                            </tr>                            
                        </tbody>
    </table>
</body>

通过ajax向后端发送HTTP请求，获得数据并给表格传值。

 $.ajax({
            type: "请求的类型",
            url: "要访问的地址",
            data: { organizationId: organizationID},
            contentType: 'application/json',
            success: function (data) {
                var str = "";
                //定义用于拼接的字符串
                for (var i = 0; i < data.length; i++) {
                    paymentmoney[i] = data[i].paymoney_Type;                    
                    //拼接表格的行和列
                    str = "<tr><td>" + data[i].paymoney_Type + "</td><td>" + data[i].rewardmoney_Type + "</td><td>" + rewardmoney[i] + "</td></tr>";
                    //追加到table中
                    $("#favouredpolicy").append(str);                   
                    }
                }
            }
        });

最后效果展示。