舉個例子

初始化界面如下：

填充修改值并且點擊修改！

前端中相關的代碼：

<script type="text/javascript">function change(){//alert("onclick");var url = '/refresh3DGraph/'+ $('#intValue').val();$('#flush').load(url);}</script>

展示如下：

<div id="flush" th:fragment="flush"><script th:inline="javascript">option = null;var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a','7a', '8a', '9a','10a','11a','12p', '1p', '2p', '3p', '4p', '5p','6p', '7p', '8p', '9p', '10p', '11p'];var days = ['Saturday', 'Friday', 'Thursday','Wednesday', 'Tuesday', 'Monday', 'Sunday'];var value1 = new Array(0,0,[[${someInfo.get(0)}]]);var value2 = new Array(0,1,1);var value3 = new Array(0,2,66);var value4 = new Array(0,3,55);var value5 = new Array(0,4,70);var value6 = new Array(0,5,60);var value7 = new Array(1,6,50);var value8 = new Array(2,7,400);var value9 = new Array(3,8,300);var value10 = new Array(4,9,200);var value11 = new Array(5,10,100);var value12 = new Array(6,11,2);var data = [value1,value2,value3,value4,value5,value6,value7,value8,value9,value10,value11,value12];option = {tooltip: {},visualMap: {max: 20,inRange: {color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']}},xAxis3D: {type: 'category',data: hours},yAxis3D: {type: 'category',data: days},zAxis3D: {type: 'value'},grid3D: {boxWidth: 200,boxDepth: 80,light: {main: {intensity: 1.2},ambient: {intensity: 0.3}}},series: [{type: 'bar3D',data: data.map(function (item) {return {value: [item[1], item[0], item[2]]}}),shading: 'color',label: {show: false,textStyle: {fontSize: 16,borderWidth: 1}},itemStyle: {opacity: 0.4},emphasis: {label: {textStyle: {fontSize: 20,color: '#900'}},itemStyle: {color: '#900'}}}]};if (option && typeof option === "object") {myChart.setOption(option, true);}myChart.refresh();</script></div>

后端如下：

//3D圖@GetMapping("/3DGraph")public String to3DGraphPage(Model model){List<Integer> list = new ArrayList<>();list.add(500);model.addAttribute("someInfo", list);return "admin/3DGraph";}//刷新3D圖@GetMapping("/refresh3DGraph/{value}")public String refresh3DGraph(@PathVariable("value") Integer value, Model model){System.out.println("refresh3DGraph called the value is : " + value);List<Integer> list = new ArrayList<>();list.add(value);model.addAttribute("someInfo", list);return "admin/3DGraph::flush";}

?

總結

以上是生活随笔為你收集整理的Spring Boot笔记-jQuery使用load进行异步调用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。