在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 相关文章推荐
尝试在让script的type属性等于text/html
Jan 15 Javascript
防止按钮在短时间内被多次点击的方法
Mar 10 Javascript
css与javascript跨浏览器兼容性总结
Sep 15 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
JavaScript获取短信验证码(周期性)
Dec 29 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
Jan 04 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
微信小程序block的使用教程
Apr 01 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 Javascript
layui switch 开关监听 弹出确定状态转换的例子
Sep 21 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
Dec 30 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创建自定义菜单的方法
2016/08/01 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
JavaScript:Array类型全面解析
2016/05/19 Javascript
详解jQuery中关于Ajax的几个常用的函数
2017/07/17 jQuery
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
js实现一个简易计算器
2020/03/30 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
python使用pil生成缩略图的方法
2015/03/26 Python
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
python删除某个字符
2018/03/19 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
python调用支付宝支付接口流程
2019/08/15 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
python实现杨辉三角的几种方法代码实例
2021/03/02 Python
CSS改变网页中鼠标选中文字背景颜色例子
2014/04/23 HTML / CSS
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
门诊挂号室室长岗位职责
2013/11/27 职场文书
供用电专业求职信
2014/07/07 职场文书
全国优秀教师事迹材料
2014/08/26 职场文书
教学质量月活动总结
2015/05/11 职场文书
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle
给numpy.array增加维度的超简单方法
2021/06/02 Python
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技