在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 相关文章推荐
js实现兼容IE6与IE7的DIV高度
May 13 Javascript
Javascript中的this绑定介绍
Sep 22 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
Jan 17 Javascript
javascript中的delete使用详解
Apr 11 Javascript
jquery 缓存问题的几个解决方法
Nov 11 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
May 17 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
May 25 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
May 31 Javascript
vue.js中npm安装教程图解
Apr 10 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
vue中在vuex的actions中请求数据实例
Nov 08 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 设置MySQL连接字符集的方法
2011/01/02 PHP
PHP 登录记住密码实现思路
2013/05/07 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
php实现按文件名搜索文件的远程文件查找器
2014/05/10 PHP
33道php常见面试题及答案
2015/07/06 PHP
php利用ob_start()清除输出和选择性输出的方法
2018/01/18 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
jQuery 使用手册(二)
2009/09/23 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
一款由jquery实现的整屏切换特效
2014/09/15 Javascript
JS获取表格内指定单元格html内容的方法
2015/03/31 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
2016/09/05 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
ES10 特性的完整指南小结
2019/03/04 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
python基于xml parse实现解析cdatasection数据
2014/09/30 Python
Python设计模式之抽象工厂模式
2016/08/25 Python
如何用itertools解决无序排列组合的问题
2017/05/18 Python
python3基于TCP实现CS架构文件传输
2018/07/28 Python
基于Python打造账号共享浏览器功能
2019/05/30 Python
Python如何计算语句执行时间
2019/11/22 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
使用Python webdriver图书馆抢座自动预约的正确方法
2021/03/04 Python
便利店的创业计划书
2014/01/15 职场文书
创意广告词
2014/03/17 职场文书
升旗仪式主持词
2014/03/19 职场文书
医学专业大学生求职信
2014/07/12 职场文书
中小学校园安全广播稿
2014/09/29 职场文书
项目经理岗位职责
2015/01/31 职场文书
Python PIL按比例裁剪图片
2022/05/11 Python
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android