java表白代码弹窗
时间: 2023-11-18 11:55:20 浏览: 108
根据提供的引用内容,可以看出这是一个获取表白话语的Java Web项目。如果想要实现表白代码弹窗,可以在前端代码中添加弹窗组件,并在获取到表白话语后触发弹窗事件。以下是一个简单的实现方式:
1. 在前端代码中添加弹窗组件,例如使用Bootstrap的Modal组件。
2. 在IndexController中添加一个获取表白话语的接口,并在接口中返回表白话语。
3. 在前端代码中使用Ajax请求获取表白话语接口,并在请求成功后触发弹窗事件,将表白话语显示在弹窗中。
具体实现细节可以参考以下代码:
前端代码:
```
<!-- 引入Bootstrap的CSS和JS文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- 弹窗组件 -->
<div class="modal fade" id="biaobaiModal" tabindex="-1" role="dialog" aria-labelledby="biaobaiModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="biaobaiModalLabel">表白话语</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p id="biaobaiText"></p>
</div>
</div>
</div>
</div>
<!-- 获取表白话语的按钮 -->
<button type="button" class="btn btn-primary" id="getBiaoBaiHuaBtn">获取表白话语</button>
<script>
$(function() {
// 点击获取表白话语的按钮
$('#getBiaoBaiHuaBtn').click(function() {
// 发送Ajax请求获取表白话语
$.ajax({
url: '/getBiaoBaiHua',
type: 'GET',
dataType: 'text',
success: function(data) {
// 请求成功后,将表白话语显示在弹窗中
$('#biaobaiText').text(data);
$('#biaobaiModal').modal('show');
},
error: function() {
alert('获取表白话语失败!');
}
});
});});
</script>
```
IndexController代码:
```
@RestController
public class IndexController {
@Autowired
private RestTemplate restTemplate;
/** 获取表白的话 **/
@GetMapping("/getBiaoBaiHua")
public String getBiaoBaiHua() {
ResponseEntity<HashMap> forEntity = restTemplate.getForEntity("https://api.shadiao.pro/chp", HashMap.class);
HashMap body = forEntity.getBody();
HashMap data = (HashMap) body.get("data");
Object text = data.get("text");
return (String) text;
}
}
```
相关问题:
1. 如何在Java Web项目中使用Ajax请求?
2. 如何在Java Web项目中添加Bootstrap的Modal组件?
3. 如何在Java Web项目中使用RestTemplate发送HTTP请求?
阅读全文