在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代码
Apr 23 Javascript
用Javascript评估用户输入密码的强度实现代码
Nov 30 Javascript
Javascript中的delete介绍
Sep 02 Javascript
一个可拖拽列宽表格实例演示
Nov 26 Javascript
Node.js中对通用模块的封装方法
Jun 06 Javascript
JavaScript将取代AppleScript?
Sep 18 Javascript
JS实现支持Ajax验证的表单插件
Mar 24 Javascript
基于javascript实现按圆形排列DIV元素(三)
Dec 02 Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
小程序实现图片移动缩放效果
May 26 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
Dec 24 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中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
使用URL传输SESSION信息
2015/07/14 PHP
常用js脚本
2006/12/03 Javascript
eval的两组性能测试数据
2012/08/17 Javascript
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
JQuery each打印JS对象的方法
2013/11/13 Javascript
javascript操作css属性
2013/12/30 Javascript
JavaScript中如何通过arguments对象实现对象的重载
2014/05/12 Javascript
用原生JS获取CLASS对象(很简单实用)
2014/10/15 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
axios的拦截请求与响应方法
2018/08/11 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
python中sleep函数用法实例分析
2015/04/29 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
django2笔记之路由path语法的实现
2019/07/17 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
初中物理教学反思
2014/01/14 职场文书
建议书怎么写
2014/03/12 职场文书
车队司机个人自我鉴定
2014/04/17 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
2014年体检中心工作总结
2014/12/23 职场文书
小学体育组工作总结2015
2015/07/21 职场文书