在thymeleaf中使用js获取后台值传到前台的值(已验证)

在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)
            }
        }
    })
发布了12 篇原创文章 · 获赞 4 · 访问量 945

猜你喜欢

转载自blog.csdn.net/weixin_43974466/article/details/102455683
今日推荐