[原创]前后端交互的方式整理 (2)

日期：2021-05-09 栏目：程序人生浏览：次

可以通过GET/POST等方式将变量、对象、数组、JSON、XML、file/img、base64图片、cookies等各种形式的数据提交到后端。
源码下载：前后端交互的方式的演示代码

GET

代码示例：

/** * GET-变量 */ @GetMapping("/testVar1") public String testVar1(/*@RequestParam("param")*/String param) { return param; } /** * GET-path变量 */ @GetMapping("/testVar2/{param}") public String testVar2(@PathVariable/*("param")*/ String param) { return param; } /** * GET-对象 */ @GetMapping("/testObject1") public GetParam testObject1(GetParam obj) { return obj; } /** * GET-数组 */ @GetMapping("/testArray1") public Object testArray1(String[] obj) { return obj; }

运行结果：

[原创]前后端交互的方式整理

POST

POST方式可以使用curl、postman、getman、eolinker等工具实现。

/** * POST-多个变量、对象（form提交） */ @PostMapping(value = "/testPostFormVar") public String testPostVar1(@RequestParam(name = "username") String username, @RequestParam(name = "password") String password) { return username + ":" + password; } /** * POST-JSON（ajax） */ @PostMapping(value = "/testPostJsonVar") public PostParam testPostVar2(@RequestBody PostParam param) { return param; } /** * 通用的post接收方式 */ @PostMapping(value = "/testPostVar") public PostParam testPostVar(PostParam param) { return param; }

运行结果：

[原创]前后端交互的方式整理

POST方式总结：

content-type 数据格式后台接受方式专用注解
application/x-www-form-urlencoded[默认] json对象对象 @RequestParam
application/json json字符串对象 @RequestBody
$.post() 默认application/x-www-form-urlencoded json对象对象 @RequestParam
数据交互技术

服务器渲染
谈起服务端渲染，对于动态服务而言，这个世界上跑的大多数页面都经过服务端的数据渲染，接口->前端赋值->模板渲染。这些都是在服务器完成，在我们查看源码的时候，可以看到完整的html代码，包括每个数据值。常用的php模板：Smarty，Blade，Mustache。如果使用Node.js作为服务端的话: ejs，doT，jade等。

Form、Ajax、jsonp
服务端渲染随着单页面应用以及Restful接口的兴起，Ajax逐渐成为目前前后端交流最为频繁的方式。Ajax的核心是XmlHttpRequest。我们通过对该对象的操作来进行异步的数据请求。实际上我们接触到最多jQuey就有很好的封装，比如$.ajax，$.post等，如果用Angular的话我们可以用$http服务，除了这些之外，我们可以使用第三方的Ajax库qwest等。

跨域代码示例(使用"http://localhost:9090/jsonp.html"的页面发起请求)：
后端：

@RestController @RequestMapping("/cdr") public class CrossDomainRequestsController { /** * 通用的post接收方式 */ @RequestMapping(value = "/testCdr") public PostParam testPostVar(PostParam param) { return param; } }

前端：

<!DOCTYPE html> <html> <head> <title>跨域</title> <meta charset="UTF-8"> <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script> $(function(){ $("#get").click(function () { $.ajax({ type: 'get', url: "http://localhost:8080/cdr/testCdr", contentType: "application/x-www-form-urlencoded; charset=utf-8", data:{ "username": "TEC-9", "password": "wodemima" }, success : function(data,status){ console.log("数据: \n" + JSON.stringify(data) + "\n状态: " + status); } }); }); $("#post").click(function () { $.ajax({ type: 'POST', url: "http://localhost:8080/cdr/testCdr", contentType: "application/x-www-form-urlencoded; charset=utf-8", data:{ "username": "TEC-9", "password": "wodemima" }, success : function(data,status){ console.log("数据: \n" + JSON.stringify(data) + "\n状态: " + status); } }); }); }); </script> </head> <body> <h1></h1> <div> <table> <thead> <tr> <td>请求地址</td> <td>方式</td> </tr> </thead> <tbody> <tr> <td><button>标准的ajax-post提交验证</button></td> <td>get</td> </tr> <tr> <td><button>标准的ajax-post提交验证</button></td> <td>post</td> </tr> </tbody> </table> </div> </body> </html>

转载注明出处：https://www.heiqu.com/wspdgz.html

[原创]前后端交互的方式整理 (2)

相关推荐