后端使用mvc使用ModelAndView通过ajax如何使另一个网页获取信息
时间: 2024-05-20 21:19:32 浏览: 13
如果我理解正确的话,您想要通过 AJAX 调用后端的 MVC 接口,并将返回值渲染到另一个页面上。在这种情况下,您需要编写一个控制器方法,它将使用 ModelAndView 对象包装要返回的数据,并指定视图名称。然后在页面上使用 AJAX 和 jQuery 的 .load() 函数在另一个页面上加载数据。
以下是示例代码:
在控制器中:
@RequestMapping(value="/getData", method=RequestMethod.GET)
public ModelAndView getData() {
ModelAndView modelAndView = new ModelAndView("data");
// 在这里获取数据并填充到 modelAndView 中
return modelAndView;
}
在 data.html 页面中:
<div id="data"></div>
<script>
$(document).ready(function() {
$("#data").load("/getData");
});
</script>
请特别注意:该示例仅可用于演示。在实际环境中,您应该使用合适的安全措施来确保您的代码安全运行。
相关问题
使用thymeleaf时后端返回的为modelandview,如何使用AJAX
在使用Thymeleaf渲染页面时,如果后端返回的是ModelAndView对象,我们可以通过AJAX技术来实现异步请求并更新页面内容,从而不用刷新整个页面就能实现页面的更新。
首先,在Thymeleaf页面中添加一个用于显示结果的<div>标签:
```
<div id="result"></div>
```
然后,在Thymeleaf页面中使用AJAX技术向后端发送异步请求,并将返回的结果更新到页面中:
```
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function () {
$.ajax({
url: '/user/getFollowCount',
type: 'GET',
success: function (data) {
// 将后端返回的结果更新到页面中
$('#result').html(data);
}
});
});
</script>
```
在后端Controller中,获取用户关注信息并返回结果:
```
@RequestMapping("/user/getFollowCount")
public @ResponseBody String getFollowCount() {
// 获取用户关注信息
int count = userService.getFollowCount();
// 返回结果
return String.valueOf(count);
}
```
这样,就可以通过AJAX技术实现异步请求并更新Thymeleaf页面中的内容。
使用thymeleaf时后端返回的为modelandview,如何使用AJAX发送POST请求
在使用Thymeleaf渲染页面时,如果后端返回的是ModelAndView对象,我们可以通过AJAX技术来实现异步POST请求并更新页面内容。
首先,在Thymeleaf页面中添加一个用于显示结果的`<div>`标签和一个用于发送POST请求的按钮:
```
<div id="result"></div>
<button id="submitBtn" type="button">提交</button>
```
然后,在Thymeleaf页面中使用AJAX技术向后端发送异步POST请求,并将返回的结果更新到页面中:
```
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function () {
$('#submitBtn').click(function () {
$.ajax({
url: '/user/doFollow',
type: 'POST',
data: {
followUserId: 1
},
success: function (data) {
// 将后端返回的结果更新到页面中
$('#result').html(data);
}
});
});
});
</script>
```
在后端Controller中,获取POST请求的参数并返回结果:
```
@RequestMapping("/user/doFollow")
public @ResponseBody String doFollow(int followUserId) {
// 处理用户关注信息
return "关注成功";
}
```
这样,就可以通过AJAX技术实现异步POST请求并更新Thymeleaf页面中的内容。