使用each()函数遍历获取后台数据并显示

最新推荐文章于 2021-10-25 17:44:57 发布

工藤新一OL

最新推荐文章于 2021-10-25 17:44:57 发布

阅读量1.1k

点赞数

文章标签：小菜鸟记录自我感悟心得

本文链接：https://blog.youkuaiyun.com/qq_41760419/article/details/89083023

版权

这篇博客记录了如何通过AjaxPost从后台获取数据，然后使用$.each()函数遍历处理数据，特别是针对ST_ID为1的情况，筛选出S_NAME和S_VALUE，最后利用jQuery Flot库将数据以饼图的形式展示在divLeixing元素中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

列子：

此处在aspx页面中：

var url = "Data/Tongji/Tongji.ashx?req_fun="; //后台数据

function loadFlot() {

AjaxPost(url + "gettjlist", {}, function (res) {    //使用ajaxpost获取，gettjlist为方法
                var data1 = [];
                var outStr = eval('(' +res+ ')');
                $.each(outStr, function (index,val) {
                    if (val.ST_ID==1)
                    {
                        var yhname = val.S_NAME;
                        var yhvalue = val.S_VALUE;
                        data1.push({ label: yhname, data: yhvalue });
                    }
                });
                load1(data1);
            });
        }

        function load1(data) {
            $.plot('#divLeixing', data, {
                series: {
                    pie: {
                        innerRadius: 0.3,
                        show: true,
                        radius: 0.72,
                        label: {
                            show: true,
                            radius: 0.52,
                            formatter: labelFormatter
                        }
                    }
                },
                legend: {
                    position: "nw",
                    backgroundColor: null,
                    backgroundOpacity: 0
                }
            });
        }

}

</script>

<div region="west" border="false" style="width:200px; overflow:hidden;">
        <div class="stan-panel beside" style="height:250px;">
            <div class="title">优化目标统计</div>
            <div id="divLeixing" class="flot-content"></div>
        </div>

</div>