前后端数据交互，跳转

前端开发作者： 2024-08-22 13:15:01

概述作为一枚菜鸟，前后端交互可是大问题，经常数据交互失败，不知道怎么跳转。在这分享一下交互的小心得。我们不妨先大概了解一下整个访问流程：用户从输入网址按下回车，交互就已经开始了。浏览器会将请求

概述

上图所示，如果格式前后端发送和接收对不上，那是获取不了数据。如图的最后一步返回，如果想页面跳转，则不需要@ResponseBody，改为返回ModelAndView
@RequestBody主要用来接收前端传递给后端的json字符串中的数据的(请求体中的数据的)；GET方式无请求体，所以使用@RequestBody接收数据时，前端不能使用GET方式提交数据，而是用POST方式进行提交。
@RequestParam接收的是key-value里面的参数，所以GET方式的数据和表单提交，可以接收。
@RequestBody和@RequestParma的使用知识，更轻松的全面掌握：https://blog.csdn.net/justry_deng/article/details/80972817

前端交互类

  1 /*
  2  * 以下为程序错误码
  3  */
  4 //通用的请求失败，包括未知原因
  5 var EXPECTATION_FAILED = 417;
  6 var EXPECTATION_QUERY = 404  7 
  8 /**
  9  * 访问后台的对象，为ajax封装
 10  * @constructor
 11   12 var Query = function (url,param,callback,contentType) {
 13     this.url = url;
 14 
 15     先确认参数存在，如果不存在则创建空map
 16     if (!param) {
 17         param = new Map();
 18     }
 19     注意，要根据不同的传输格式来确定传输的值的类型
 20     if (contentType == Query.NOMAL_TYPE) {
 21         this.param = JSON.parse(this._convertParam(param));
 22     } else {
 23         this.param = ._convertParam(param);
 24  25 
 26 
 27     this.callback = callback;
 28     this.contentType = contentType;
 29     请求超时，默认5秒
 30     this.timeout = 5000 31     是否异步请求，默认异步
 32     this.async = true 33 }
 34 
 35 Query.JSON_TYPE = 'application/json' 36 Query.NOMAL_TYPE = 'application/x-www-form-urlencoded' 37 
 38  39  * ajax请求的访问
 40  * @param url 要访问的地址
 41  * @param paramMap 传给后台的Map参数，key为字符串类型
 42  * @param callback 回调函数
 43  * @param contentType 传输数据的格式  默认传输application/x-www-form-urlencoded格式
 44   45 Query.create =  46     return  Query(url,Query.NOMAL_TYPE);
 47  48 
 49 Query.createJsonType =  50      51  52 
 53  54  * 将ParamMap转为json格式，目前只支持Map对象，以后会扩展
 55  * @param paramMap
 56  * @private
 57   58 Query.prototype._convertParam =  (param) {
 59 
 60     if (param instanceof Map) {
 61         return strMap2Json(param);
 62  63  64 
 65  66  * 对ajax回调函数的封装
 67  * @param callBack
 68  69   70 Query.prototype._callback =  (queryResult) {
 71 
 72     取消加载框
 73     if (.loadDom) {
 74         $(this.loadDom).remove("#loadingDiv");
 75  76 
 77     Query对象
 78     var self = queryResult.queryObj;
 79     var data = $.parseJSON(queryResult.responseText);
 80     记录请求是否有错误
 81     self.queryException = false 82     var handleError;
 83 
 84     if (queryResult.status == EXPECTATION_FAILED || queryResult.status == EXPECTATION_QUERY) {
 85         var error = queryResult.responseText;
 86         self.queryException =  87  88 
 89     调用回调函数，如果返回结果为true，则对于出错不会默认错误处理
 90     if (self.callback  Function) {
 91         handleError = self.callback(data);
 92  93 
 94     如果出现了异常并且没有被处理，那么将进行默认错误处理
 95     if (self.queryException && !handleError) {
 96         window.location.href = "/system/error/" + error.code + "/" + error.msg;
 97  98 
 99     如果需要跳转，则进行跳转
100     if (data.redirect_url) {
101         window.location.href = data.redirect_url;
102 103 104 
105 106  * 正式发送ajax
107 108  109 Query.prototype.sendMessage =  () {
110     var self = 111     var xhr = $.ajax(
112         {
113             type: "post",114             url: .url,1)">115             contentType: .contentType,1)">116             data: .param,1)">117              ajax发送前调用的方法，初始化等待动画
118              @param XHR  XMLHttpRequest对象
119             beforeSend:  (XHR) {
120                 绑定本次请求的queryObj
121                 XHR.queryObj = self;
122                 if (self.beforeSendFunc 123                     self.beforeSendFunc(XHR);
124                 }
125 
126                 if (self.loadDom  HTMLElement) {
127                     self.loadDom.innerText = ""128                     $(self.loadDom).append("<div id='loadingDiv' class='loading'><img src='/image/loading.gif'/></div>"129                 } else  jQuery) {
130                     self.loadDom.empty();
131                     self.loadDom.append("<div id='loadingDiv' class='loading'><img src='/image/loading.gif'/></div>"132 133             },1)">134             complete: ._callback,1)">135             timeout:.timeout,1)">136             async:.async
137         }
138     );
139 
140 141 
142 143  * 检测是否有错误,返回ture有错误，或者false
144  145 Query.prototype.checkEception = 146     .queryException;
147 148 
149 ------------------------以下为对Query的参数设置---------------------------
150 151  * 在ajax发送前设置参数，可以有加载的动画，并且请求完成后会自动取消
152  * @param loadDom 需要显示动画的dom节点
153  * @param beforeSendFunc ajax发送前的自定义函数
154  155 Query.prototype.setBeforeSend =  (loadDom,beforeSendFunc) {
156     this.loadDom = loadDom;
157     this.beforeSendFunc = beforeSendFunc;
158 159 
160 161  * 设置超时时间
162  * @param timeout
163  164 Query.prototype.setTimeOut =  (timeout) {
165     this.timeout = timeout;
166 167 
168 Query.prototype.setAsync =  (async) {
169     this.async = async;
170 }

可以省略很多重复的代码，如$.ajax传参数那一长串（111-136行）
可以规定统一的前端交互流程，并且修改这个流程也方便。

1. 根据传输类型也对参数进行转换（20-24行），并且_convertParam（）方法能继续扩展参数类型，直到后面可以把绝大多数参数都转换成正确的格式（那发送基本不用考虑参数格式了，只要确定传输的类型就好）　　　　
2. 统一回调流程（70-103行）可以对异常做统一处理（ajax）像我这样跳转到错误页面，或者有些异步请求返回时需要跳转，也能统一跳转
3. 统一请求发送前的处理（119-133行）可以对请求等待统一的设置等待动画，最后再回调流程统一取消动画

 1  2  * 访问后台的类，构造form表单来进行post请求
 3  * @param url
 4  * @param paramMap  参数map
 5  6   7 var QueryForm =  8     form表单的JQ对象
 9     this.form = $("<form></form>"10     this.form.attr("action"11     this.form.attr("method","post"12     遍历Map
13     for( [key,value] of paramMap){
14        var inputDom = $("<input/>") ;
15        inputDom.attr("name"16        inputDom.attr("value"17        .form.append(inputDom);
18 19     必须要放入body里面，不然请求发不出去
20     var bodyDom = $("body"21     bodyDom.append(.form);
22     .sendMessage();
23 
24     发送完后销毁
25     .destroy();
26 27 
28 QueryForm.create = 29      QueryForm(url,paramMap);
30 31 
32 QueryForm.prototype.sendMessage = 33      .form.submit();
34 35 
36 QueryForm.prototype.destroy =  37     .form.remove();
38 }