Thymeleaf先後端傳值 頁面取值與js取值

參考：　Thymeleaf先後端傳值 頁面取值與js取值

　　　　Thymeleaf 與 Javascript

              Thymeleaf教程 （十二） 標籤內，js中使用表達式

目的：
後端經過Model傳值到前端
頁面經過Model取值顯示
js經過Model取值做爲變量使用

1.後臺Controller

@GetMapping("/message") public String getMessage(Model model){ model.addAttribute("message","This is your message"); return "index"; }

注：向model中添加屬性message

2.頁面經過Model取值

<p th:text="#{message}">default message</p>

3.js經過model取值

<script th:inline="javascript">
    var message = [[${message}]]; console.log(message); </script>

注：script標籤中 th:inline 必定不能少，一般在取值的先後會加上不一樣的註釋

4.若是前端須要接受的是一個JSON格式的對象，必定不能直接傳JSON字符串

能夠使用Fastjson將其轉換爲JSON對象package springboot.echarts.controller;

import com.alibaba.fastjson.serializer.SerializerFeature; import lombok.extern.slf4j.Slf4j; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import com.alibaba.fastjson.JSON; import springboot.echarts.service.EchartService; @Slf4j @Controller public class EchartsController { @Autowired private EchartService echartService; @GetMapping("/echart") public String echart(Model model){ String optionStr = null; // //禁用引用對象 optionStr = JSON.toJSONString(echartService.selectSelling(), SerializerFeature.PrettyFormat, SerializerFeature.DisableCircularReferenceDetect); log.info(optionStr); // modal.addObject("option",JSON.parseObject(optionStr)); //因爲ECharts接收的option必須爲JSON對象，optionStr爲一個String對象，因此須要轉爲JSON對象
　　　　　//數組對象
 //model.addAttribute("option",JSON.parseArray(optionStr));
 model.addAttribute("option",JSON.parseObject(optionStr));

return "echart"; } }

5.ajax調用請求時能夠直接返回Json格式的字符串，可是在ajax中聲明對象爲JSON

//js調用java方法參考:https://www.cnblogs.com/shirandedan/p/7727326.html
    var menuJson; function getUserFunc(){ $.ajax({ type: 'GET', url: "getUserAllFunction", cache: false, async : false, // headers : {
            // 'Content-Type' : 'application/json;charset=utf-8'
            // },
            // data: JSON.stringify(menuJson),
            dataType: 'json', success: function (result) { console.log("獲取用戶全部功能成功"); console.log("result "+JSON.stringify(result)); menuJson = result; }, error: function (result, XMLHttpRequest, textStatus, errorThrown) { console.log("獲取用戶全部功能失敗"); console.log("result "+JSON.stringify(result)); console.log("menuJson "+menuJson); console.log("JSON.stringify(obj) "+JSON.stringify(menuJson)); // 狀態碼
 console.log(XMLHttpRequest.status); console.log(XMLHttpRequest.toLocaleString()); // 狀態
 console.log(XMLHttpRequest.readyState); // 錯誤信息
 console.log(textStatus); } }); return menuJson; } //Ajax全局變量賦值參考： https://blog.csdn.net/gzp444280620/article/details/70922224
menuJson = getUserFunc();

getUserAllFunction請求以下：

@GetMapping("/getUserAllFunction")
@ResponseBody
public String getUserAllFunction(HttpSession session){

List<UserFuncEntity> list = new ArrayList<>();
...//略

//若出現引用類型，須要強制去掉引用，js中不能識別引用
return  JSON.toJSONString(menuList,SerializerFeature.DisableCircularReferenceDetect );

}