前台js读取后端传值的两种方法(springboot-thymeleaf-javascript)

一 通过隐藏input元素传值

1.1 后台代码通过ModelAndView或Model类型返回

例1：

@RequestMapping(value = "/list", method = RequestMethod.GET)

public ModelAndView list(@RequestParam(value = "pageNum", defaultValue = "1") int pageNum, @RequestParam(value = "pageSize", defaultValue = "10") int pageSize)

{

Page<User> page = PageHelper.startPage(pageNum, pageSize);

    List<User> userList = userService.findAll();

    page.addAll(userList);

    ModelAndView model = new ModelAndView("demo_user","page",page);

    model.addObject("websocketUrl", "ws://localhost:8080/websocket");

    return model;

}

 

例2：

@RequestMapping(value = "/view/{model_id}", method = {RequestMethod.GET})

public String view(ModelMap map, @PathVariable(value = "model_id") String model_id)

{

System.out.println(model_id);

         map.addAttribute("model_id", model_id);

         return "simmodel-view";

}

 

1.2 前台html通过隐藏input元素传值

例1：

<input id="websocketUrl" type="hidden" th:value="${websocketUrl}" />

 

例2：

<input id="model_id" type="hidden" th:value="${model_id}" />

 

1.3 前台javascript

例1：

$("#websocketUrl").val();

注意：前台需要${websocketUrl}形式读取后台传值时，注意使用thymeleaf的类型标签“th:xx”，使用html默认标签很多都不能读取${websocketUrl}。

例2：

var current_model_id = $("#model_id").val();

 

 

二 通过thymeleaf在js中取值

2.1后台代码通过Model类型（ModelAndView也可）返回

@RequestMapping(value = "/view/{model_id}", method = {RequestMethod.GET})

public String view(ModelMap map, @PathVariable(value = "model_id") String model_id)

{

System.out.println(model_id);

         map.addAttribute("model_id", model_id);

         return "simmodel-view";

}

 

2.2 前台javascript在request域中取值

<script th:inline="javascript">

var current_model_id = /*[[${model_id}]]*/ "nullvalue";

    console.log(current_model_id);

</script>

 

注：使用时要在标签中声明一下是thymeleaf中的javascript ，然后使用类似于注解的方式进行取值，如果有值就会使用取出来的值，没有值则会使用后面的默认值。

 

2.3 前台javascript取session中的值

在前面加一个session即可

var current_model_id = /*[[${session.model_id}]]*/ "nullvalue";