在html文档里用ajax调用get接口

1.引入jquery

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

2.调用接口

window.onload = function () {
        $.ajax({
            url: '/',
            type: "get",
            dataType: "json",
            data: {
                c:123
            },
            success: function (data) {
                showData(data);
            },
            error: function (msg) {
                alert("ajax连接异常:" + msg);
            }
        });
    };

3.页面渲染

function showData(data) {
        document.body.style.backgroundImage = `url(${data.bgUrl})`;
        document.getElementById("notice").innerHTML = data.notice;
    }

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值