Reference: Thymeleaf value and JS value of front and rear end value page
Thymeleaf and Javascript
Thymeleaf Tutorial (12) tags, using expressions in JS
Objective:
Back end via model value to front end
The page is displayed by the model value
JS uses the model value as a variable
1. Background controller
@GetMapping ("/message") public String getMessage (model model) { Model.addattribute (" Message "," This is your message "); return "Index";}
Note: Add a property message to the model
2. The page is evaluated by model
<th:text= "#{message}">default message</p >
3.js by model value
<script th:inline= "JavaScript" > var message = [[${message}]]; Console.log (message); </script>
Note: Th:inline must not be less in the script tag, usually with a different comment before and after the value is taken
4. If the front end needs to accept a JSON-formatted object, it must not pass the JSON string directly
You can use Fastjson to convert it to a JSON object , package springboot.echarts.controller;
Importcom.alibaba.fastjson.serializer.SerializerFeature;Importlombok.extern.slf4j.Slf4j;Importorg.springframework.beans.factory.annotation.Autowired;ImportOrg.springframework.stereotype.Controller;ImportOrg.springframework.ui.Model;Importorg.springframework.web.bind.annotation.GetMapping;ImportCom.alibaba.fastjson.JSON;ImportSpringboot.echarts.service.EchartService, @Slf4j @controller Public classEchartscontroller {@AutowiredPrivateEchartservice Echartservice; @GetMapping ("/echart") Publicstring Echart (model model) {string Optionstr=NULL;// //Disabling reference objectsOptionstr =json.tojsonstring (echartservice.selectselling (), Serializerfeature.prettyforma T, Serializerfeature.disablecircularreferencedetect); Log.info (OPTIONSTR);//modal.addobject ("option", Json.parseobject (OPTIONSTR)); //because Echarts receives the option must be a JSON object, Optionstr is a string object, so it needs to be converted to a JSON object
Array Object
//Model.addattribute ("option", Json.parsearray (OPTIONSTR));
model.addattribute ("option", Json.parseobject (OPTIONSTR));
return "Echart"; }}
5.ajax can directly return a JSON-formatted string when invoking a request, but declare the object in Ajax as JSON
//JS Call Java Method Reference: Https://www.cnblogs.com/shirandedan/p/7727326.html varMenujson; functionGetuserfunc () {$.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 ("Get all the user's features successfully"); Console.log ("Result" +json.stringify (result)); Menujson=result; }, Error:function(result, XMLHttpRequest, Textstatus, Errorthrown) {Console.log ("Get user all features failed"); Console.log ("Result" +json.stringify (result)); Console.log ("Menujson" +Menujson); Console.log ("Json.stringify (obj)" +json.stringify (Menujson)); //Status CodeConsole.log (xmlhttprequest.status); Console.log (Xmlhttprequest.tolocalestring ()); //StatusConsole.log (xmlhttprequest.readystate); //error MessageConsole.log (textstatus); } }); returnMenujson; }//AJAX global variable Assignment reference: 70922224Menujson = Getuserfunc ();
The getuserallfunction request is as follows:
@GetMapping ("/getuserallfunction")
@ResponseBody
Public String Getuserallfunction (HttpSession session) {
list<userfuncentity> list = new arraylist<> ();
...//slightly
If a reference type is present, the reference must be forced to be removed, and the reference is not recognized in JS
Return json.tojsonstring (menulist,serializerfeature.disablecircularreferencedetect);
}
Thymeleaf value and JS value of front and rear end value page