在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 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 Javascript
Mootools 1.2教程 排序类和方法简介
Sep 15 Javascript
Jquery中删除元素的实现代码
Dec 29 Javascript
javascript中的void运算符语法及使用介绍
Mar 10 Javascript
jquery更换文章内容与改变字体大小代码
Sep 30 Javascript
JavaScript中的数学运算介绍
Dec 29 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
Jun 03 Javascript
JQuery为元素添加样式的实现方法
Jul 20 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 Javascript
VUE JS 使用组件实现双向绑定的示例代码
Jan 10 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 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中smarty区域循环的方法
2015/06/11 PHP
Laravel SQL语句记录方式(推荐)
2016/05/26 PHP
比较简单的一个符合web标准的JS调用flash方法
2007/11/29 Javascript
firefox下frameset取不到值的解决方法
2010/09/06 Javascript
jQuery学习笔记之jQuery的DOM操作
2010/12/22 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
2014/05/22 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
跟我学习javascript的函数和函数表达式
2015/11/16 Javascript
javascript html5摇一摇功能的实现
2016/04/19 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
Django自定义认证方式用法示例
2017/06/23 Python
django 2.0更新的10条注意事项总结
2018/01/05 Python
python中的不可变数据类型与可变数据类型详解
2018/09/16 Python
将Python字符串生成PDF的实例代码详解
2019/05/17 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
如何让python的运行速度得到提升
2020/07/08 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
HTML5 b和i标记将被赋予真正的语义
2009/07/16 HTML / CSS
美国女孩服装购物网站:Justice
2017/03/04 全球购物
办公室经理岗位职责
2014/01/01 职场文书
打架检讨书400字
2014/01/17 职场文书
院系推荐意见
2015/06/05 职场文书
Python包argparse模块常用方法
2021/06/04 Python
总结Python使用过程中的bug
2021/06/18 Python