thymeleaf中可以使用ajax动态获取数据 - 好文

转：https://www.oschina.net/question/2820871_2237255

$.ajax({ //使用JQuery内置的Ajax方法
         type : "post", //post请求方式
         async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
         url : "echarts/record.action", //请求发送到ShowInfoIndexServlet处
         data : {name:"A0001"},
//请求内包含一个key为name，value为A0001的参数；服务器接收到客户端请求时通过request.getParameter方法获取该参数值
         dataType : "json", //返回数据形式为json
         success : function(result) {
         //请求成功时执行该函数内容，result即为服务器返回的json对象
         if (result != null && result.length > 0) {
                for(var i=0;i<result.length;i++){
                   tems.push(result[i].tem);
//挨个取出温度、湿度、压强等值并填入前面声明的温度、湿度、压强等数组
                   hums.push(result[i].hum);
                   pas.push(result[i].pa);
                   rains.push(result[i].rain);
                   win_sps.push(result[i].win_sp);
                   dates.push(result[i].date);
                }
                myChart.hideLoading(); //隐藏加载动画

                myChart.setOption({ //载入数据
             xAxis: {
                 data: dates //填入X轴数据
             },
             series: [ //填入系列（内容）数据
                    {
                 // 根据名字对应到相应的系列
                 name: '温度',
                 data: tems
              },
                    {
                 name: '湿度',
                 data: hums
              },
              {
                 name: '压强',
                 data: pas
              },
              {
                 name: '雨量',
                 data: rains
              },
              {
                 name: '风速',
                 data: win_sps
             }
            ]
         });

         }
         else {
         //返回的数据为空时显示提示信息
         alert("图表请求数据为空，可能服务器暂未录入近五天的观测数据，您可以稍后再试！");
           myChart.hideLoading();
         }

},
      error : function(errorMsg) {
      //请求失败时执行该函数
          alert("图表请求数据失败，可能是服务器开小差了");
          myChart.hideLoading();
      }
    })

热门工具换一换