SpringMVC 怎么和 AJAX 相互调用的

文章介绍了如何利用Jackson框架在SpringMVC中将Java对象转化为JSON,处理AJAX请求。通过@RequestBody和@ResponseBody注解实现数据交换,前端使用jQuery的$.ajax方法发送请求并处理响应。
摘要由CSDN通过智能技术生成

通过 Jackson 框架就可以把 Java 里面的对象直接转化成 Js 可以识别的 Json 对象。

步骤如下 :
a、加入 Jackson.jar
b、在配置文件中配置 json 的映射
c、在接受 Ajax 方法里面可以直接返回 Object,List 等,但方法前面要加上@ResponseBody

详细步骤:

  • 在 SpringMVC 中配置一个控制器来处理 AJAX 请求。可以使用 @RequestMapping 注解来指定请求的 URL 和请求方法。该控制器方法应该返回一个 JSON 格式的响应数据。
  • 在前端页面中,使用 JavaScript 发起 AJAX 请求。可以使用原生的 XMLHttpRequest 对象,也可以使用现代浏览器提供的 fetch 函数或者 jQuery 提供的 $.ajax 方法。
  • 在 AJAX 请求中,指定要调用的 SpringMVC 控制器的 URL,并设置请求方法为 GET 或 POST,根据实际情况选择合适的参数传递方式。
  • 当 SpringMVC 接收到 AJAX 请求时,会根据请求的 URL 和方法匹配到对应的控制器方法。在该方法中,可以执行相应的业务逻辑,并将结果封装成 JSON 格式返回给前端。
  • 前端页面在接收到 AJAX 响应后,可以通过回调函数处理返回的数据,并更新页面内容或执行其他操作。

需要注意的是,在 SpringMVC 的控制器方法中,可以使用 @ResponseBody 注解将返回值直接转换为 JSON 格式,并自动写入响应体中。另外,还可以使用 @RestController 注解来替代 @Controller 和 @ResponseBody 的组合,从而简化代码。

示例:

  • 在SpringMVC的Controller中,你可以使用@RequestMapping注解来处理AJAX请求
@Controller
@RequestMapping("/ajax")
public class AjaxController {

    @RequestMapping(value = "/getData", method = RequestMethod.GET)
    public @ResponseBody String getData() {
        // 处理业务逻辑,获取数据
        String data = "Hello AJAX!";
        return data;
    }

    @RequestMapping(value = "/saveData", method = RequestMethod.POST)
    public @ResponseBody String saveData(@RequestBody String data) {
        // 处理业务逻辑,保存数据
        // 这里的 @RequestBody 注解用于接收前端传递的数据
        return "Data saved successfully!";
    }
}
  • 在前端页面中,你可以使用JavaScript的AJAX方法来发送请求并处理响应。例如:
// 发送GET请求
$.ajax({
    url: "/ajax/getData",
    type: "GET",
    success: function(response) {
        // 处理响应数据
        console.log(response);
    },
    error: function(xhr, status, error) {
        // 处理错误
        console.error(error);
    }
});

// 发送POST请求
$.ajax({
    url: "/ajax/saveData",
    type: "POST",
    data: JSON.stringify({data: "Hello"}),
    contentType: "application/json",
    success: function(response) {
        // 处理响应数据
        console.log(response);
    },
    error: function(xhr, status, error) {
        // 处理错误
        console.error(error);
    }
});

在上述示例中,/ajax/getData对应于Controller中的getData方法,用于返回数据给前端。/ajax/saveData对应于Controller中的saveData方法,用于接收前端发送的数据并进行处理。

使用@ResponseBody注解可以将方法的返回值直接作为响应数据返回给前端,而不是将其解析为视图。

注意,为了接收前端发送的JSON数据,你需要在Controller方法的参数上添加@RequestBody注解。同时,在发送POST请求时,需要将请求头Content-Type设置为application/json,并且将数据转换为JSON字符串进行发送(如上述示例中使用了JSON.stringify()方法)。

这样,就实现了 SpringMVC 和 AJAX 的相互调用。通过 AJAX,前端可以异步地向后端发送请求,并获取到后端返回的数据,实现动态更新页面的效果。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值