layui父页面调用子页面的渲染_layUI ajax加载html页面后重新渲染的方法

相关问题同:

1、layUI使用jquery.load加载界面时,如何让layui渲染页面?

2、layUI ajax加载html页面后重新渲染

layUI ajax加载html页面后渲染,关键在将html插到指定位置后重新调用element.init();渲染

$.ajax({

url : url,

type : 'GET',

success : function(data) {

$("#layui-tab-title").append("

tab名称");

$("#layui-tab-content").append(data);

layui.use('element', function() {

var element = layui.element;

element.init();

});

}

})

渲染主要在下面element.init();这句

layui.use('element', function() {

var element = layui.element;

element.init();

});

类似的,如果form中的radio没有渲染,则在加载页面添加以下代码亦可解决:

layui.use('form', function() {

var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功

form.render();

});

以上这篇layUI ajax加载html页面后重新渲染的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

  • 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、付费专栏及课程。

余额充值