在thymeleaf中使用js获取后台值传到前台的值
首先我们看效果:(我以修改为例子)
thymeleaf模块的代码:
html:
<button class="change">修改</button>
js:
// 修改
$('.change').each(function(){
$(this).click(function(){
$.ajax({
type: 'GET',
url: 'titles',
data: {
'id': $(this).parent().prev().prev().text()
},
success: function(data){
if(data.code === 1) {
window.location.href = `titlesz?id=${data.data.id}`
}
}
})
})
})
spring boot :
```java
// 根据id查询 标题表
@RequestMapping(value="/titlesz",method=RequestMethod.GET)
public String agentMgzrInId(@RequestParam Integer id,HttpSession session){
if(id==null){
session.setAttribute("i","id为空");
}
Titles title = userService.findTitlesId(id);
String i="";
if(title ==null) {
i="暂无数据";
session.setAttribute("i",i);
}else {
session.setAttribute("i",i);
session.setAttribute("title",title);
}
return "titleUpdate";
}
另外一个页面,修改页面:
html:
<div class="titleAdd-container">
<div class="center">
<div class="title">
<span>标题</span>
<input name="title" id="title" type="text" placeholder="请输入你的标题">
</div>
<div class="add">
<button>提交</button>
</div>
</div>
</div>
js:(渲染)
//获取url的参数
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
console.log(reg);
var r = window.location.search.substr(1).match(reg);
console.log(r);
if (r != null) return unescape(r[2]);
return null;
};
let id = GetQueryString('id');
$.ajax({
type: "get",
url: `titles?id=${id}`,
success: function(data){
if(data.code === 1) {
$('#title').val(data.data.title)
}
}
})