前后端利用jquery进行ajax通信(以json为媒介)
3个月前 • 227次点击 • 来自 SpringBoot
本人懒,博客并没有Vue等前端框架做前后端分离,直接使用的上古技术框架。所以就涉及到了ajax的前后端通信,一开始做的时候走了点弯路,Google后备忘一下:
后端首先得创建了一个实体类
public class User
{
private String id;
private String name;
private String password;
//getter和setter方法省略
}
前端ajax发起请求
$.ajax({
type: "post",//这里使用post方式,经测试不能直接改成get,get怎么办之后再研究
url: "/test/ajax",//设置要访问的url,既可以使用/开头的形式,表示根目录,也可以用完整的http://localhost:8080/test/ajax这样的形式,开头不加/也是可以的 ,不过这样就是在当前url的基础上直接追加来进行访问,也就是相对路径
contentType: "application/json;charset=utf-8",//这里很重要,不能省略,因为默认的类型是application/x-www-form-urlencoded,如果不设置的话后台就无法使用@RequestBody正常接收
data: '{"id":"1","name":"asd","password":"abc"}'
,//这里有一点尤其要注意,在网上查到的资料有的是{"key":"value"}这种形式的,大括号两端没有引号,经过测试,这样是不行的,必须整个加上引号
dataType: "json",//这里声明收到的服务器的响应数据类型,如果是json的话,不声明也可以正常使用
success: function (data) {
//响应成功后回调的函数,data是来自服务器的数据
alert("收到响应")
$("#p").html(JSON.stringify(data));
//这里将json转为字符串显示(data其实是个object,不转换的话会显示为一片空白)
},
error: function () {
//出错时回调该函数
alert("error");
}
});
后端响应请求
@RestController
@RequestMapping("/test")
public class TestController {
@RequestMapping(value = "/ajax", method = RequestMethod.POST)
@ResponseBody
private User ajax(@RequestBody User user1)
//@RequestBody是作用于参数的,它实现了把客户端传过来的json数据解析为对象,作为参数传进来
//不过客户端传过来的数据类型必须是application/json,不然会出错,这也是为什么客户端一定要设置ajax的contentType属性为"application/json"的原因
{
System.out.println("收到ajax请求");
System.out.println(user1.getName());
User user = new User();
user.setId("1");
user.setName("测试用户名");
user.setPassword("测试密码");
return user;
}
}
标签