前后端利用jquery进行ajax通信(以json为媒介)

1周前 31次点击 来自 其他

标签: 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;
    }
}

Card image cap
开发者雷

尘世间一个小小的开发者,每天增加一些无聊的知识

本站文章全部采用 CC BY 4.0 协议,欢迎转载

技术文档 >> 系列应用 >>
热推应用
Let'sLearnSwift
学习Swift的入门教程
PyPie
Python is as good as Pie
标签