前后端数据交互,跳转

前端开发 作者: 2024-08-23 00:25: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 }

后端交互类

原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_66951.html