ajax数据写入thymeleaf,ajax+springboot+thymeleaf的使用

最近的一个项目中 涉及到了一个功能 是关于地图的数据联动

所以就需要用 ajax 来异步更新数据.

之前搭了一个 springboot 的项目.所以就用在这个项目上进行了一次尝试.

记录一下整个的过程 ,

希望会对刚学习 ajax 的同学有所帮助.

设计思路:

前台的 div 中有一个数字 在前台获取到这个 id 然后传到后台

后台获取到 id 为这个值得对象.

再将这个对象在前台展示出来.

出现的问题和解决办法.

在前台的 div 中写了一个数字 1

1

然后在 js 中通过 document.getEletmentById("demo").innerHTML;

获取到了 div 中的值.然后在 ajax 的 data 的 text 标签中,然后后台通过httpServletRequest.getParameter("text")这个 id,通过之前写过的跟去 id 获取对象的方法.

来获取这个对象,放到 list 中,在通过遍历写出来.后台先是报了一个错误.因为通过httpServletRequest.getParameter获取到的是一个 String 值.但是我的 id 是一个

int 值,解决的办法是通过” integer.valueof()” 将 string 类型转换成了 integer.然后运行时报了一个” null” 的错误.开始以为是空指针的错误,后来发现是因为integer.valueof

的字符串是空值会报的错.因为不确定是因为转型的原因还是取值问题,所以在转型的语句上边加了一个sout的语句.做了一个输出.并且在前台取值后加了一个alert.

然后取消转型 直接sout获取到的值.运行后发现前台没问题.后台输出了一个 null 后,输出了正常获取到的 id.

考虑到可能是加载的问题.

把 ajax 写到了一个function中,然后通过按钮触发函数.

运行后,发现先输出 null,点击按钮输出正常 id.

这样就找到了问题的原因.是因为页面加载的时候直接就运行了我在 controller 下写的方法.

突然想到,因为 ajax 是异步加载,那么应该通过一个链接跳转到这个网页,一个链接是用来执行 ajax 的.

于是在controller 中新加了一个getmapping,直接跳转到当前网页,再通过按钮跳转新链接.完成 ajax 传值的操作.

再次运行.返现没有报错,前台取值正常,后台取值正常,但是前台并没有显示出来对象.

显示检查了一下 each 发现没有写错.

然后在后台的model代码前

sout在后台通过根据 id 获取的对象.

运行 发现后台是获取到了这个对象的 但是前台还是没有显示.

在这个问题上还是纠结了一会的.

然后在前台的 function 中传了一个参数,把参数通过consle.log输出

发现了问题.

输出的是一个网页.

因为在控制层写的 String 方法,然后 return 的是一个 html.

所以就出现了错误.

然后将 String 方法 改成 viod 返回的值改成 json 字符串.

这里请教了一下同事.

具体代码如下1

2

3

4

5

6

ObjectMapper objectMapper = new ObjectMapper();

String json = objectMapper.writeValueAsString(userService.getById(userid));

Writer writer = httpServletResponse.getWriter();

writer.write(json);

writer.close();

这里是直接给前台返回了一个 json 类型的值.

然后在前台对 json 数据进行解析.1

2

3

4

5

var str=""

str+="

"+data.userid+""+data.username+""+data.password+""+data.nickname+"";

$('#tbody').html(str);

tbody是表格的 id

然后执行发现好用

然后吃饭的时候突然想到.我返回的是一个 html,前台没有数据是因为我的数据在返回的 html 中,那么我可以直接返回这个 html 给这个 div.

在 div 直接加载这个只有表格的网页应该也是可以的

吃完饭测试了一下,果然是可行的.

这个思路是没问题的.具体的代码也比较简单.所以就不贴了.

整个的思路就是这样的.

perfect 也感谢我文武兄弟的帮助.