美文网首页
ejs + ajax

ejs + ajax

作者: 沈九壹 | 来源:发表于2017-09-14 17:51 被阅读176次


<% include header.ejs %>
<div class="container">
    <div id = 'father' style="width: 800px;height:600px;text-align: center">
    </div>
</div>

<script type="text/javascript">
    function getData() {
        $("#father").html('');
        var divId = 'div' + Math.floor(Math.random()*3000);
        $("#father").prepend("<div id='"+divId+"' style='width: 800px;height:600px;text-align: center'></div>");
        $.ajax({
            url : '/online1',
            type : 'post',
            data : {
                name : $('.name').val(),
                password : $('.psw').val()
            },
            success : function (result) {
                // 基于准备好的dom,初始化echarts实例
                var myChart = echarts.init(document.getElementById(divId));
                // 指定图表的配置项和数据
                var title = [];
                for(var i in result.success){
                    title.push(result.success[i].name);
                }
                option = {
                    title : {
                        text: '在线人数统计',
                        subtext: '60/s',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data:title
                    },
                    series : [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data:result.success,
                            itemStyle: {
                                normal:{
                                    label:{
                                        show: true,
                                        formatter: '{b} : {c} ({d}%)'
                                    },
                                    labelLine :{show:true}
                                },
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(option);
            }
        });
    }
    window.onload = getData;
    setInterval("getData()",60*1000);
</script>
<% include footer.ejs %>


var utils = require('../models/utils');
//在index.js中调用这个函数,把这里定义的处理逻辑设置到router里
exports.setRouter = function(router) {
    router.get('/online', function (req, res) { utils.checkPermission(req, res, "menu_online", utils.PERMISSION_TYPE.Readonly, GetOnlineStatus);});
    router.post('/online1', function (req, res) { utils.checkPermission(req, res, "menu_online", utils.PERMISSION_TYPE.Readonly, GetOnlineStatusBy7);});

}

function GetOnlineStatus(req, res, menuKey, localData) {
        res.render('online');
}

function GetOnlineStatusBy7(req, res, menuKey, localData) {
    var regDatas = [];
    utils.query('SELECT * FROM data_onlinecnt order by `timekey` desc limit 2;', function (error, regData) {
        if (error) {
            utils.logError('select data_account list failed', error);
            return ;
        }
        if(regData.length >= 2){
            for(var i in regData){
                if(regData[i].gameappid === 'wx60c5e1f255cb23a0'){
                    regDatas.push({value:regData[i].onlinecntios,name:'WX_IOS'});
                    regDatas.push({value:regData[i].onlinecntandroid,name:'WX_Android'});
                }
                if(regData[i].gameappid === '1105197308'){
                    regDatas.push({value:regData[i].onlinecntios,name:'QQ_IOS'});
                    regDatas.push({value:regData[i].onlinecntandroid,name:'QQ_Android'});
                }
            }
        }
        res.json({
            success : regDatas
        });
    });
}





相关文章

  • ejs + ajax

  • 3.模板引擎--EJS

    著名的两个模板引擎EJS,Jade EJS 官网:https://ejs.bootcss.com 【1】EJS的成...

  • 在express中使用ejs模板

    1.安装ejs 注:express内置了ejs,所以不用引入ejs 2.配置ejs模板引擎 3.渲染页面rende...

  • 0324-ejs

    EJS中文文档 express中使用ejs 安装ejs $ npminstallejs app.set("view...

  • 试着使用ejs模版引擎

    如果使用ejs模版引擎,必须要安装ejs模块 目标:使用ejs模板向输出一个html文件,html中的内容为ejs...

  • Nodejs中的模板引擎——ejs

    首先我们需要使用ejs,必须先安装ejs 1.使用ejs解析变量 ejs代码 我们执行上述代码就会发现amy已经被...

  • 快速笔记

    hygen hygen的prompt事例 ejs ejs模板语法

  • koa2使用ejs模板引擎

    ejs特性 安装ejs:npm install --save ejs 输出: 在页面中输出变量值,你可以这么用: ...

  • ejs模板引擎

    EJS是一个JavaScript库(https://ejs.bootcss.com/),EJS可以同时运行在客户端...

  • express使用ejs模板引擎

    传统的ejs写法 express用ejs ----默认的文件是以ejs为后缀的 express用esj---改为文...

网友评论

      本文标题:ejs + ajax

      本文链接:https://www.haomeiwen.com/subject/gyndsxtx.html