在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 相关文章推荐
jquery应该如何来设置改变按钮input的onclick事件
Dec 10 Javascript
表单验证的完整应用案例探讨
Mar 29 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
Aug 01 Javascript
判断文件是否正在被使用的JS代码
Dec 21 Javascript
js脚本获取webform服务器控件的方法
May 16 Javascript
easyui Draggable组件实现拖动效果
Aug 19 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
Jun 07 Javascript
老生常谈jacascript DOM节点获取
Apr 17 Javascript
React如何避免重渲染
Apr 10 Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 Javascript
原生js+css实现tab切换功能
Sep 17 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
用PHP制作静态网站的模板框架
2006/10/09 PHP
PHP原生模板引擎 最简单的模板引擎
2012/04/25 PHP
php使用SAE原生Mail类实现各种类型邮件发送的方法
2016/10/10 PHP
ThinkPHP中create()方法自动验证表单信息
2017/04/28 PHP
js计算页面刷新的次数
2009/07/20 Javascript
JS隐藏参数post传值实例
2013/04/18 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
js点击button按钮跳转到另一个新页面
2014/10/10 Javascript
js实现iframe跨页面调用函数的方法
2014/12/13 Javascript
javascript实现将文件保存到本地方法汇总
2015/07/26 Javascript
javascript日期操作详解(脚本之家整理)
2015/09/05 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
Vue头像处理方案小结
2018/07/26 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
JS实现容器模块左右拖动效果
2020/01/14 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
python 中文乱码问题深入分析
2011/03/13 Python
Python中MySQLdb和torndb模块对MySQL的断连问题处理
2015/11/09 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
pycharm创建一个python包方法图解
2019/04/10 Python
澳大利亚在线高跟鞋商店:Shoe Me
2019/11/19 全球购物
文员个人求职自荐信
2013/09/21 职场文书
文体活动实施方案
2014/03/27 职场文书
学生会干部自我鉴定2014
2014/09/18 职场文书
2014年党员整改措施范文
2014/09/21 职场文书
承租经营合作者协议书
2014/10/01 职场文书
Axios取消重复请求的方法实例详解
2021/06/15 Javascript
SQL SERVER中的流程控制语句
2022/05/25 SQL Server