thymeleaf中可以使用ajax動態獲取資料
阿新 • • 發佈：2019-01-28
轉：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();
}
})