标签:ajax

zTree的使用-初始化、异步加载数据

zTree的官方网站:    http://www.treejs.cn/v3/main.php#_zTreeInfo

如何引入js和css,这里就不介绍了,直接看官方文档即可—zTree入门指南

在html中找到你要放置zTree的地方,id可变,class为ztree

<ul id="tree" class="ztree"></ul>
<script type="text/javascript">
    //加载资源树
    var t = $("#tree");
    var zNodes ;
     //zTree参数设置
    var setting = {
        treeId:"applicationTree",
        view: {
            dblClickExpand: false,
            showLine: true,
            selectedMulti: false
        },
        edit: {
            
        },
        data: {      
            simpleData: {
                enable:true
            }
        },
        callback: {
            
        }
    };
</script>

js中的其他几个为空,自己可以看文档配置

这里开启了简单的数据格式加载数据,数据格式如下

   {"id":1, "pId":0, "name":"test1"},
    {"id":11, "pId":1, "name":"test11"},
    {"id":12, "pId":1, "name":"test12"},
    {"id":111, "pId":11, "name":"test111"}

然后异步加载数据,后台返回数据格式的方法自己完成:

//页面加载
$(document).ready(function(){
    $.ajax({
        type:'post',
        url: "/perm/treeData",  //数据源
        dataType: "json",
        async: false,
        success: function (result) {
            if(result.code == "1"){
                zNodes = result.data;
                //初始化树
                t = $.fn.zTree.init(t, setting, zNodes); 
            }else{
                //layer.msg(result.info, {time: 1000, icon:2});
                console.log("error");
            }

        },
        error: function (msg) {
        }
    });
});

这样就可以加载树了

image.png

ECharts ajax请求数据到图表

1、返回的数据格式:

[{"A":0,"datetime":"2018-04-30","B":0,"C":0,"D":0,"E":0},{"A":12343213,"datetime":"2018-05-01","B":43256789,"C":23412356,"D":25431234,"E":34560987}}]

2、具体实现:

<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width:100%;height:400px;margin-left: auto;margin-right: auto"></div>
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
    title: {
        text: '这里显示图表的标题',
        left:'5%'  //标题距离图表的位置
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['A', 'B', 'C', 'D', 'E'],  //显示的类别
        right:'5%'
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: []
    },
    dataZoom: [
        { //  dataZoom 组件: 控制x轴
            xAxisIndex: [0] // 表示这个 dataZoom 组件控制 第一个 和 第三个 xAxis
        }],
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'A',
            type: 'line',
            stack: '总量',
            /*在图上显示数据*/
           /* label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },*/
            data: []
        },
        {
            name: 'B',
            type: 'line',
            stack: '总量',
            data: []
        },
        {
            name: ‘C',
            type: 'line',
            stack: '总量',
            data: []
        },
        {
            name: 'D',
            type: 'line',
            stack: '总量',
            data: []
        },
        {
            name: 'E',
            type: 'line',
            stack: '总量',
            data: []
        }
    ]
};
//初始化图表,使其在页面打开时就开始展示
myChart.setOption(option);
/**此处是我按钮的点击事件,点击按钮后,开始获取值*/
function login() {
    var names = [];    //类别数组(实际用来盛放X轴坐标值)
    var series1 = [];   //A 对应的值。。。下面BCDE
    var series2 = [];
    var series3 = [];
    var series4 = [];
    var series5 = [];
    $.ajax({
        type: 'get',
        url: '/values/selectMainValues',//请求数据的地址
        dataType: "json",        //返回数据形式为json
        data: $('#form').serialize(),    //序列化表单,选中表单条件提交后台查询数据
        cache: false,
        success: function (result) {
            //请求成功时执行该函数内容,result即为服务器返回的json对象
            $.each(result, function (index, item) {
                //挨个取出类别并填入类别数组
                names.push(item.datetime); //我这里x轴为时间
                series1.push(item.A); //每次把ABCDE分别放入对应的容器
                series2.push(item.B);
                series3.push(item.C);
                series4.push(item.D);
                series5.push(item.E);
                    });
            myChart.setOption({        //加载数据图表
                xAxis: {
                    data: names
                },
                series: [{
                    data: series1
                },
                    {
                        data: series2
                    },
                    {
                        data: series3
                    },
                    {
                        data: series4
                    },
                    {
                        data: series5
                    }]
            });
        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!检查是否有未选中项!");
            myChart.hideLoading();
        }
    });
    // 使用刚指定的配置项和数据显示图表,true表示不融合数据,每次点击后都显示新的图表。
    myChart.setOption(option, true);
}

Layui ajax提交form表单

Layui ajax提交form表单

1、基本方法
这里的前端页面自己写吧。

<!DOCTYPE html>
<html>
<head>
 ...
</head>
<body>

<form class="layui-form">
  <div class="layui-form-item">
    <label class="layui-form-label">xxx</label>
<div class="layui-input-block">
<input xxxxxxxxx>
    </div>
  </div>

<div class="layui-form-item">
      <div class="layui-input-block">
          <button class="layui-btn " type="button" onclick="login()">查询</button>
<!-- 此处type=”button” 必须添加,不然会刷新页面 -->
      </div>
  </div>

<form>
/*这里使用外部脚本方式,推荐方式,方便以后出问题直接修改js*/
<script th:src="@{/js/xxx/demo.js}"></script> 
</body>
</html>

2、重点:demo.js

/*使用layui模块必须*/
layui.use(['form', 'laydate','jquery'], function () {
    var form = layui.form,      //加载form表单
        laydate = layui.laydate,  //日期插件
        $ = layui.$; 
    //日期
    laydate.render({
        elem: '#time'  //id为time的时间选择器
        ,done: function(value){ //选择完时间后执行的方法
             $(function () { }
    });
       form.render(); //渲染表单
});
/**其实表单主要提交功能在这里*/
function login() {
        $.ajax({
        type: 'get',
        url: '/selectMainValues',//请求数据的地址
        dataType: "json",        //返回数据形式为json
        data: $('#form').serialize(),  //序列化表单,就是要把每一项表单的值拼接成name=value&name=value...的形式(例如:name=wjy&pass=admin)
        success: function (result) {
            //请求成功时执行该函数内容,result即为服务器返回的json对象
            $.each(result, function (index, item) {
                //挨个取出result                
            });
        },
        error: function (errorMsg) {
            //请求失败时执行该函数
           }
    });
}