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

时间:2025-02-15 08:17:46
$.ajax({ //使用JQuery内置的Ajax方法
         type : "post", //post请求方式
         async : true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
         url : "echarts/", //请求发送到ShowInfoIndexServlet处
         data : {name:"A0001"}, //请求内包含一个key为name,value为A0001的参数;服务器接收到客户端请求时通过方法获取该参数值
         dataType : "json", //返回数据形式为json
         success : function(result) {
          //请求成功时执行该函数内容,result即为服务器返回的json对象
         if (result != null &&  > 0) {
                for(var i=0;i<;i++){       
                   (result[i].tem); //挨个取出温度、湿度、压强等值并填入前面声明的温度、湿度、压强等数组
                   (result[i].hum);
                   (result[i].pa);
                   (result[i].rain);
                   win_sps.push(result[i].win_sp);
                   (result[i].date);
                }
                (); //隐藏加载动画
                
                ({ //载入数据
             xAxis: {
                 data: dates //填入X轴数据
             },
             series: [ //填入系列(内容)数据
                    {
                 // 根据名字对应到相应的系列
                 name: '温度',
                 data: tems
              },
                    {
                 name: '湿度',
                 data: hums
              },
              {
                 name: '压强',
                 data: pas
              },
              {
                 name: '雨量',
                 data: rains
              },
              {
                 name: '风速',
                 data: win_sps
             }
            ]
         });
                
         }
         else {
          //返回的数据为空时显示提示信息
          alert("图表请求数据为空,可能服务器暂未录入近五天的观测数据,您可以稍后再试!");
            ();
         }
         
},
      error : function(errorMsg) {
      //请求失败时执行该函数
          alert("图表请求数据失败,可能是服务器开小差了");
          ();    
      }
    })

相关文章