前后端数据传输交互

前后端数据传输交互

Json

Json–JavaScript Object Notation（JavaScript 对象表示法），作为数据在网络传输过程中的数据格式，其本质是字符串（只是其格式是面对对象表示(key:value)，易读且轻量）。前后端数据进行交互之前一般都要对数据进行处理，将数据格式转换为JSON字符串（网络数据传输的数据格式规定为字符串，一个数字和字符也是可以的）。

前端数据传向后端

Json.stringify（）将JS对象转化为JSON字符串（也称JSON对象），
前端传给服务器的方式常用的有两种，一种是GET，另一种是POST
###GET
传输的参数以拼接的形式显示在地址栏，在网络传输中数据存储在请求头中。
如：
http://www.baidu.com?id=***&address=***

POST

以该方式传输的数据不会拼接在地址栏里。请求时发送的数据会保存在请求体里。相应的，服务器返回的数据会保存在响应体里。
且使用POST方式传输必须设置请求参数内容类型，用于告诉服务器端客户端请求参数的格式是什么（不同的请求参数格式在服务器端接收的方式不一样）：
1.表单提交的默认格式(不接受JSON对象数据格式):
content-type:application/x-www-form-urlencoded
提交的数据按照key1=val1&key2=val2的方式进行编码

提到表单提交，不得不提一个对象：FormData对象，它可以将多个需要提交的表单元素进行包装便于提交。

[详情教学见：] (https://www.bilibili.com/video/BV11E411e7yF?p=25)

<form id="formlist">
	<input type="text"/>
	<input type="password"/>
	<button id="btn">提交<button>
</form>

<script>
    var btn = document.getElementById('btn');
	var form = document.getElementById('formlist');
	btn.onclick = function() {
	    //将普通html表单转换为FormData对象
		var formData = new FormData(form);
		/*
		 *将fromData作为请求参数使用POST方式提交到服务器端
		*/ 
	}
</script>

2.json格式
content-type:application/json
JSON对象：{“name”:" " ,age : ,“address”: " "’}
（发送前必须将数据用JSON.stringify()转换为JSON字符串）

后台接收数据

使用Content-Type:application/jon式进行数据传输，服务器函数需要使用RequestBody来接收。RequsetBody用于处理请求体中类似于application/jon，application/xml 等编码格式的参数
接口参数类型可以是：
（1）请求参数格式非json字符串形式
使用对应的数据类型逐一获得，需要注意的是html文本框传递的默认数据类型是String（即使你想传递的是Number类型）

（2）请求参数格式json字符串形式，则接口参数类型可以使用如下类型：

1. String
   函数体需要对该参数进行拆分，后续操作较繁琐

2. 实体对象
   对象属性名称需和json字符串的key一致，否则会接收失败。且使用实体对象类型接收仅适用与传递的数据中没有复杂的数据类型，复杂的数据类型有数组，集合。

3. Map
   使用Map进行接收，适用范围较为广泛。取到数据后再对Map对象进行处理。