php后端渲染html,后端渲染html、前端模板渲染html,jquery的htm的区别

摘要:1、后端渲染实现:后端拼字符串呗…… (理论上后端模板也是字符串)好处:模板统一在后端。前端(相对)省事,不占用客户端运算资源(解析模板),只要不大改结构,文字啥的小修改后端改了就好了。坏处:占用(部分、少部分)服务器运算资源、,response 出的数据量会(稍)大点,模板改了前端的交互和样式什么的一样得跟着联动修改。2、前端模板实现:看这个吧……关于模板引擎的工作方式和性能? - 前端开发 但

1、后端渲染

实现:后端拼字符串呗…… (理论上后端模板也是字符串)

好处:模板统一在后端。前端(相对)省事,不占用客户端运算资源(解析模板),只要不大改结构,文字啥的小修改后端改了就好了。

坏处:占用(部分、少部分)服务器运算资源、,response 出的数据量会(稍)大点,模板改了前端的交互和样式什么的一样得跟着联动修改。

2、前端模板

实现:看这个吧……关于模板引擎的工作方式和性能? - 前端开发 但不仅限于正则替换这一招,扫token 生成语法树,再根据语法树拼接也行,或者使用 DOM 模板,借助 DOM API 处理也行,反正招儿多了去了。

好处:不占用服务端运算资源(解析模板),模板在前端(很有可能仅部分在前端),改结构变交互都前端自己来了,改完自己调就行。不用麻烦后端再联调神马的。

坏处:占用(一部分、少部分)客户端运算资源(解析模板)。前端代码多点,毕竟包含模板代码了么。脚本是不是首次下就慢点了(看你在意不在意这个毕竟能304和CDN啥的)。可能造成前后两份模板的情况,总归要后端吐出个首屏啥的先让用户看见吧。那这部分页面模板不就是后端拼好了吐出来的么。

3、jquery的html,append等方法(包括浏览器原生相关DOM API)

实现:……这就不说了吧,不就是直接插内容或者DOM节点么。除非后端是直接吐出拼好的页面,否则不关后端是通过接口吐的html字符串还是模板数据,怎么着不都得是通过这些玩意整页面里去么。

好处:(兴许是)灵活…… 还有因为一竿子捅到底了,直接使用(前端可控的)最终API,所以除了是后端直接吐的页面外,这种方式是(相对)执行效率最高的……

坏处:各种字符串和DOM节点拼来拼去真的很烦……

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Thymeleaf是一个流行的服务器端模板引擎,它可以将数据和模板相结合,生成HTML页面。而AJAX则是一种在不重新加载整个页面的情况下与服务器进行交互的技术。 在Spring Boot中集成Thymeleaf非常容易。首先,需要在pom.xml文件中添加Thymeleaf依赖项: ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> ``` 接下来,可以创建一个Controller类来处理请求并返回HTML页面。例如: ```java @Controller public class MyController { @GetMapping("/") public String home(Model model) { model.addAttribute("message", "Hello Thymeleaf!"); return "index"; } } ``` 这个Controller类处理根路径的GET请求,并将一个名为“message”的属性添加到模型中。然后,它返回名为“index”的模板。 在这个例子中,“index”模板可以使用Thymeleaf标记来渲染页面。例如: ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>My Page</title> </head> <body> <h1 th:text="${message}">Hello World!</h1> </body> </html> ``` 这个模板使用Thymeleaf语法来渲染一个标题,标题的文本来自于“message”模型属性。 现在,假设需要使用AJAX来从后端调用接口并渲染页面。可以使用jQuery库来简化这个过程。例如: ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>My Page</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { $.ajax({ url: "/api/data", success: function(data) { $("h1").text(data.message); } }); }); </script> </head> <body> <h1>Hello World!</h1> </body> </html> ``` 这个模板包含了一个名为“api/data”的接口调用,当页面加载时会自动调用该接口。当接口调用成功后,页面上的标题将被替换为返回的数据。注意,这里使用了jQuery的“$.ajax”函数来执行异步请求。 最后,需要在Controller中添加一个处理接口调用的方法。例如: ```java @RestController public class MyRestController { @GetMapping("/api/data") public Map<String, String> getData() { Map<String, String> data = new HashMap<>(); data.put("message", "Hello AJAX!"); return data; } } ``` 这个RestController类处理“api/data”路径的GET请求,并返回一个包含名为“message”的属性的Map对象。这个属性将被用于渲染页面标题。 如果一切正常,现在可以启动应用程序并访问根路径。页面将加载并显示一个标题“Hello World!”,然后自动使用AJAX调用接口“/api/data”,并将标题替换为返回的数据“Hello AJAX!”。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值