Spring Boot 前后端交互及参数传递

前后端交互的过程我觉得不管是前端还是后端都需要了解一点。

一、首先是前端发送请求：(我只了解了一点 ajax)

1、服务器端大多数情况下会以 JSON 对象作为响应数据的格式。

2、无论是请求参数还是响应内容、如果是对象类型，最终都会被转换为对象字符串进行传输。

3、将 JSON 字符串转换为 JSON 对象 JSON.parse(JSON_String),将 JSON 对象转换为 JSON 字符串 JSON.stringify()。

4、两种请求参数格式 1、'application/x-www-form-urlencoded',2、'application/json'。

      第一种格式为:'name=apple&age=20',第二种格式为:{name : 'apple',age : 20}。

5、get 请求方式不能提交 json 对象数据格式。

6、Ajax 错误处理
Ⅰ、网络畅通,服务器端能接受到请求,服务器端返回的结果不是预期结果。(判断服务器的返回的状态码,分别进行处理)
Ⅱ、网络畅通,服务器没有接受到请求,返回 404 状态码。(请求地址错误)
Ⅲ、网络畅通,服务器端能接受到请求,服务器返回 500 状态码。(服务器端错误)
Ⅳ、网络中断,请求无法发送到服务器。

7、jQuery 中的 ajax 方法

$.ajax({
        type:'get', // type:'post'
        url:'http://localhost:8080/login',
        data:{uname:'apple',pwd:'123456'}, // data:'uname=apple&pwd=123456' 
        contentType:'application/x-www-form-urlencoded, // application/json
        beforeSend:function(){},
        success:function(response){},
        error:function(response){}
    });

8、script 中调用 ajax

<script>
    $('#btn').on('click',function(){
        $.ajax({})
    });
</script>

9、serialize 方法：将表单重点数据自动拼接成字符串类型的参数

var params = $('#form').serialize() // 'uname=apple&pwd=123456'

10、$.get()、$.post() 方法：

$.get('/login','uname=apple&pwd=123456',function (response){})
$.post('/login','uname=apple&pwd=123456',function(response){})

二、其次后端返回数据的函数是类似于这样的：

private ObjectMapper objectMapper = new ObjectMapper();
(HttpServletRequest request, HttpServletResponse response)->{
    Map<String,Object> data = new HashMap<>();
    data.put("result", "success");
    response.setContentType("application/json;charset=utf-8");
    response.getWriter().write(objectMapper.writeValueAsString(data));
}

三、前端接受数据

success:function(response){
    console.log(response.result)
}

四、通过 ajax 的 success() 函数接受返回的数据会导致页面不跳转的问题

window.location.href='/index'

五、Spring 控制器获取参数

1、@RequestParam 方式：

@PostMapping("/myInfo")
public String showInfo(@RequestParam("name") String name){
    Reader reader = repository.findReaderByName(name);  
    return "infomation";
}

2、@RequestParam 方式，带默认值

@PostMapping("/myInfo")
public String showInfo((value="name",defaultValue="anonymous") String name){
    Reader reader = repository.findReaderByName(name);  
    return "infomation";
}

3、{} 占位符方式，路径变量

@PostMapping("/{name}") // 若方法的参数名和占位符名称相同，则可以省略@PathVariable 中的 value属性
public String showInfo(@PathVariable("name") String name){
    Reader reader = repository.findReaderByName(name);  
    return "infomation"
}  

六、后台通过 Model 传递数据和前端读取 Model 传过来的数据(只知道如何传，不知道如何读) 

七、以上内容仅是本人刚学的笔记，如有错误，欢迎指正！希望大佬能告知第六部分内容，谢谢！