post跳转页面避免414提示url过长

最新推荐文章于 2024-08-24 18:12:47 发布

weixin_34104341

最新推荐文章于 2024-08-24 18:12:47 发布

阅读量1k

点赞数

文章标签：前端 java 运维 ViewUI

原文链接：https://segmentfault.com/a/1190000012155894

版权

414状态码

在前端中，411 Length Required 服务器无法处理客户端发送的不带Content-Length的请求信息，有的时候面对这种情况会比较心碎，基本思路如下：

压缩参数
使用post

不过以上并不能很好的处理一些情况，压缩参数这个需要后端配合，使用post的话，如果是接口API的话，还好，如果是页面的话，就需要post跳转页面。

post页面跳转

基本思路是使用表单来提交参数，步骤：

创建表单
跳转action来指向跳转页面
添加表单数据
插入dom中，设置不可见
通过submit来提交

基本原生javascript的使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button onclick="post()">post</button>
    <script>
        function post() {
            //创建form表单
            var temp_form = document.createElement("form");
            temp_form.action = "https://cn.bing.com";
            //如需打开新窗口，form的target属性要设置为'_blank'
            temp_form.target = "_self";
            temp_form.method = "post";
            temp_form.style.display = "none";
            var PARAMTERS = [{
                name: 'no',
                value: 1
            }, {
                name: 'name',
                value: 'baidu'
            }, {
                name: 'page',
                value: 1
            }, {
                name: 'id',
                value: 'cwj'
            }, {
                name: 'no',
                value: 20
            }, {
                name: 'file',
                value: 'filename'
            }, {
                name: 'name',
                value: 'qq'
            }, {
                name: 'name',
                value: 'wechat'
            }];
            //添加参数
            for (var item in PARAMTERS) {
                var opt = document.createElement("textarea");
                opt.name = PARAMTERS[item].name;
                opt.value = PARAMTERS[item].value;
                temp_form.appendChild(opt);
            }
            document.body.appendChild(temp_form);
            //提交数据
            temp_form.submit();
        }
    </script>
</body>

</html>

需要注意：