在Js页面通过POST传递参数跳转到新页面详解


Posted in Javascript onAugust 25, 2017

场景

最近在工作中遇到一个需求,有个页面 a.vm,对 ajax 请求的结果进行判断后,获取结果里面的数据传递给一个 URL(b.htm),跳转到新的页面 b.htm。

遇到的问题

因为一开始是 GET 请求,所以当传递的数据过大的时候,会报错 nginx 414 request-uri too long

客户端请求头缓冲区大小,如果请求头总长度大于小于128k,则使用此缓冲区

client_header_buffer_size 128k;

请求头总长度大于128k时使用 large_client_header_buffers 设置的缓存区

large_client_header_buffers 指令参数4为个数,128k为大小,默认是8k。申请4个128k。

large_client_header_buffers 4 128k;

当http 的URI太长或者request header过大时会报414 Request URI too large400 bad request错误

造成这样的原因

cookie中写入的值太大造成的,因为header中的其他参数的size一般比较固定,只有cookie可能被写入较大的数据

请求参数太长,比如发布一个文章正文,用urlencode后,使用get方式传到后台

本次的故障原因是由问题 2 引起的。即当请求头过大时,超过 large_client_header_buffer 时,nginx可能返回 Request URI too large (414) 或者 Bad-request(400) 错误。

当Request line的长度大于large_client_header_buffer的一个buffer(128k)时,nginx会返回"Request URI too large" (414)错误,对应上面的场景2。

请求头中最长的一行也要小于large_client_header_buffer,当不是Request line的最长行大于一个buffer(128k)时,会返回"Bad-request"(400)错误,对应上面的场景1。

临时解决办法

修改 nginx 参数

主要是调大以下参数值:

client_header_buffer_size 512k;
large_client_header_buffers 4 512k;

但是调大这个值会出现一个问题,当我的服务器腾挪数据量比较大的时候,可能又要修改这样不是一个办法,最终的解决办法就是由 GET 请求方式修改为 POST 请求方式

最终解决办法

使用 jquery.redirect.js 框架来处理这样的情况,主要使用到的函数是 $.redirect

代码如下:

$http({
    method: "POST",
    dataType: "json",
    contentType: 'application/json',
    url: url,
    data: data,
   }).success(function (data) {
    if (data.success) {
     crId = data.data;
     $scope.errMsg = "";
     var url = "/xx.htm?id=" + id;
     window.location.href = url
    } else {
     $scope.errMsg = data.message;
     $scope.isDisabled = false;
     $scope.errorCode = data.code;
     $scope.trv.physics = data.data;
     if(data.statusCode === -224){
      var vms = data.data;
      console.log("vms: " + vms);

      $.redirect('/b.htm', {'vms': vms.toString(), 'resource': trv.resource, 'errMsg': $scope.errMsg});
     }

    }
   }).error(function (data) {
    alert(data);
    $scope.isDisabled = false;
   });

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
YUI Compressor压缩JavaScript原理及微优化
Jan 07 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
Mar 21 Javascript
input:checkbox多选框实现单选效果跟radio一样
Jun 16 Javascript
JavaScript数据结构与算法之链表
Jan 29 Javascript
快速使用Bootstrap搭建传送带
May 06 Javascript
ES6中Proxy代理用法实例浅析
Apr 06 Javascript
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 Javascript
js针对图片加载失败的处理方法分析
Aug 24 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 Javascript
浅析JavaScript 函数防抖和节流
Jul 13 Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 #Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 #Javascript
基于JavaScript实现评论框展开和隐藏功能
Aug 25 #Javascript
js求数组中全部数字可拼接出的最大整数示例代码
Aug 25 #Javascript
Vue.js进行查询操作的实例详解
Aug 25 #Javascript
Vue实例中生命周期created和mounted的区别详解
Aug 25 #Javascript
Vue.js框架路由使用方法实例详解
Aug 25 #Javascript
You might like
Protoss建筑一览
2020/03/14 星际争霸
php下删除字符串中HTML标签的函数
2008/08/27 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
php生成圆角图片的方法
2015/04/07 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
jQuery的deferred对象使用详解
2011/08/20 Javascript
jQuery中的jQuery()方法用法分析
2014/12/27 Javascript
js图片跟随鼠标移动代码
2015/11/26 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
jQuery解析返回的xml和json方法详解
2017/01/05 Javascript
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
详解Django的CSRF认证实现
2018/10/09 Python
spark dataframe 将一列展开,把该列所有值都变成新列的方法
2019/01/29 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
python+selenium 点击单选框-radio的实现方法
2019/09/03 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
python实现在列表中查找某个元素的下标示例
2020/11/16 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
大学生优秀团员事迹材料
2014/01/30 职场文书
文化活动实施方案
2014/03/28 职场文书
蓝颜请假条
2014/04/11 职场文书
单位委托书
2014/10/15 职场文书
离婚协议书格式
2015/01/26 职场文书
新闻通讯稿模板
2015/07/22 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书
CSS中Single Div 绘图技巧的实现
2021/06/18 HTML / CSS
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL