thymeleaf中可以使用ajax动态获取数据吗

thymeleaf中可以使用ajax动态获取数据吗,第1张

success:function(data){ //如果ajax的dataType为json则忽略这一步 var json = eval("("+ data +")"); //这里的docs有多个,对应的需要循环取出,这里只取出了第1个,索引从0开始 //如果无误的话,值应为33484 alert(jsonresponsedocs[0]index);}

一、通用的thymeleaf模板引擎通过returnmodel和view获取后台返回的数据。项目中的pomxml文件引用了与thymeleaf相关的包。

二、在相应的controller方法中设置要返回的数据。

三、在HTML页面上引用thymeleaf标记。

四、引用controller在HTML标记中返回的数据。

五、返回的controller可以在JS中获取。

模板引擎这个词,咋听起来,有点高大上的意味。

实际上,模板引擎是非常平易近人的技术。譬如大家可能都比较熟悉的 JSP ,就是一种比较典型的模板引擎。

当浏览器将请求抛给控制器,控制器处理好数据后,就跳转 JSP 等模板引擎页面。注意在跳转的同时,还会将数据组装好,也交给模板引擎处理。

模板引擎会根据数据,和模板引擎的规则,动态生成 HTML 页面,最后返回给浏览器显示。

我们使用 Spring Boot 开发 Web 项目,大体上有两种方式。

第一种方式,是后端服务化的方式,也是当前的主流方式。前端是静态的 HTML 页面,通过 Ajax 请求 Spring Boot 的后端接口。 Spring Boot 返回数据一般采用 JSON 格式,前端接收后将数据显示。

第二种方式,是采取模板引擎的方式。前端的请求,到达 Spring Boot 的控制器后,控制器处理请求,然后将返回数据交给模板引擎。模板引擎负责根据数据生成 HTML 页面,最后将 HTML 返回给浏览器。

我个人比较推荐第一种方式,说一下该方式的几个优点:

本篇是讲模板引擎,也得说说模板引擎的优点,王婆卖瓜不能光夸草莓啊。模板引擎开发的页面,对搜索引擎 SEO 比较友好;还有就是简单的页面,如果用模板引擎开发速度比较快,毕竟模板化的方法,目的就是减少重复提高效率。

Spring Boot 支持的模板引擎种类很多,常见的有 FreeMarker 、 Thymeleaf 、 JSP 。

因为这些模板引擎使用的用户都不少,所以我们逐一介绍下其实现过程。

至于孰优孰劣,请各位看官自行评价。正所谓:尺有所短,寸有所长,各取所爱,万物生长!

本篇我们开发一个商品浏览项目实例。

此处说一个我个人的经验:在做一个项目或一个模块的时候,不要一开始就动手写代码,最好是谋定而后动。

我们作为程序员,实际上是整个程序世界的总指挥。应该先整体规划,再实现局部。这种总分型的开发方法便于我们理顺思路,提高编码效率!

好的,我们来思考下,实现商品浏览项目实例的整体流程:

整体流程

可以看到,我们是先建立了控制器方法和页面,再去实现其中的具体细节。这样可以让我们的思维保持连贯性和整体性,在做一些页面和方法较多的项目时,会感觉更加顺畅。

我们按整体流程,使用 FreeMarker 模板引擎,来实现商品浏览功能。

使用 Spring Initializr 创建项目,Spring Boot 版本选择 225 , Group 为 comimooc , Artifact 为 spring-boot-freemarker ,生成项目后导入 Eclipse 开发环境。

引入 Web 项目及 FreeMarker 模板相关的依赖项,代码如下:

实例:

创建控制器类,由于是商品相关的控制器,所以命名为 GoodsController ,代码如下:

实例:

我们具体解释下该类的作用。

我们 resource/templates 目录下新建商品页面 goodsftl ,先不必实现具体功能,代码如下:

实例:

此时我们启动项目,然后访问 >

Request参数

假设请求的url为:/user/getid=12

1、访问参数id可以使用param前缀,例如:${paramid!=null}检查是否有参数id;

2、参数是一个数组,因为它可以多值比如id=a&name=test,所以可以采用下标的方式访问,例如:

<p th:text="${paramq[0]}" th:unless="${paramq == null}">11</p>

3、还有一种访问方式是使用#>

模板引擎和前端框架的区别是什么?

1JSP、Velocity、Thymeleaf等这是模板引擎,Jquery、Vue等这是前端框架。so,它们不一样。

2缓存模板结构,在数据层 *** du作完直接套用模板输出到客户端界面中,减少dom *** 作的异常、减少拼接html的痛苦、减少各浏览器下dom *** 作的延迟差异 。这是模板引擎干的事情。

3前端框架,提升开发效率,dom加载效率等。

为何选Thymeleaf,而抛弃了别的模板引擎比如JSP

1SpringBoot默认整合Thymeleaf,不需要任何配置直接整合成功,打jar包发布不需要做任何配置。

2Thymeleaf相对于其他的模板引擎(如:Freemaker、velocity),有强大的工具支持。

3相对于Jsp页面,执行效率高。

记录一个错误,是SpringBoot 和thumeleaf版本冲突的问题,这里需要把上面的切换版本配置改改

错误: An attempt was made to call the method orgthymeleafspring5SpringTemplateEnginesetRenderHiddenMarkersBeforeCheckboxes(Z)V but it does not exist Its class, orgthymeleafspring5SpringTemplateEngine, is available from the following locations

写一个小的测试,在Controller中添加一个访问,并在template目录下写个successhtml

使用 >

以上就是关于thymeleaf中可以使用ajax动态获取数据吗全部的内容,包括:thymeleaf中可以使用ajax动态获取数据吗、js怎样获得后台Model中的值、04《Spring Boot 入门教程》使用模板引擎开发 Web 项目等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9619378.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-30
下一篇 2023-04-30

发表评论

登录后才能评论

评论列表(0条)

保存