iframe&location.href使用post方式传参

get请求在浏览器存在数据限制 且暴露数据 详情查看get/post请求参数长度最大值的一个理解误区

两种方式 三种方法 可以混用 如下参数为写在input中 也可以把参数跟在action的url后

iframe 使用form表单承载数据 指定form数据提交位置_iframe_name js调用提交

<form id="_form" th:action="@{${address}}" target="_iframe_name" method="post">
    <input type="hidden" name="one" th:value="${one}"/>
    <input type="hidden" name="two" th:value="${two}"/>
    <input type="hidden" name="three" th:value="${three}"/>
form>
<iframe id="_iframe" name="_iframe_name" src="" style="width: 100%;height: 100vh;border: 0px;">iframe>
<script>
    window.onload = function () {
        document.getElementById('_form').submit();
    }
script>

---

location.href 使用jquery动态创建元素并以post方式提交数据

// 定义一个form表单
var form = $("
");
form.attr('method', 'post');
// 注意如果把数据直接加在'action'属性值后 数据还是会已get方式显示在地址栏 但是数据会以post方式提交
form.attr('action', '/pdf/pdf-view');

// target指定form数据提交位置 _self为当前页面 _parent为父页面 默认在最外层即相当于直接访问路径
// form.attr('target', '_parent');

var input_1 = $('');
input_1.attr('type', 'hidden');
input_1.attr('name', 'one');
input_1.attr('value', data.one);

var input_2 = $('');
input_2.attr('type', 'hidden');
input_2.attr('name', 'two');
input_2.attr('value', data.two);

var input_3 = $('');
input_3.attr('type', 'hidden');
input_3.attr('name', 'three');
input_3.attr('value', data.three);

$('body').append(form); // 将表单放置在web中
form.append(input_1);
form.append(input_2);
form.append(input_3);

form.submit(); // 提交表单
form.remove(); // 删除元素

---

传统ajax或jquery不支持不跳转页面下载文件 ajax会解析返回的数据 form提交则不会解析响应数据 如上两种实现form提交的两种方式皆可避免跳转页面下载文件

---

但是通过post传递的值无法通过js获取只能通过后台动态赋值

get方式 页面获取参数可使用js或后端渲染

function GetRequest() {
    var url = location.search; // 获取url中'?'后的字符串
    var urlData = []; // 定义空数组
    if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
            urlData[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
        }
    }
    return urlData;
}

// 通过数组下标获取参数
var parameter_1, parameter_2, parameter_3, parameter_n;
parameter_1 = Request['parameter_1'];
parameter_2 = Request['parameter_2'];
parameter_3 = Request['parameter_3'];
parameter_n = Request['parameter_n'];

post方式 页面获取参数只能通过后端渲染html

// java使用springmvc往页面发送数据
model.addAttribute("parameter", parameter);
// java原生servlet往页面发送数据
request.setAttribute("parameter", parameter);

---

<form id="login" action="/login" method="post">
    <input type="text" name="username">
    <input type="password" name="pwd">
    <button type="button" onclick='login()'>提交<button/>
form>
<script>
	function login() {
		var form = document.getElementById('login');
		...
		form.submit();
	}
script>



<form id='login' action='/login' method='post' omsubmit='return login()'>
    <input type='text' name='username'>
    <input type='password' name='password'>
    <button type='submit'>提交<button/>
<form/>
<script>
	function login() {
	    document.getElementById('login');
	    ...
	    return true;
	}
<script/>

---

注意 使用form表单的方式发起get请求 地址栏参数会被encodeURI编码 服务端可以正常获取

js一般用encodeURI对URI的网址部分编码 用encodeURIComponent对URI中传递的参数进行编码
解码则用decodeURI对URI的网址部分解码 用decodeURIComponent对URI中传递的参数进行解码

但get返回的页面js获取地址栏参数就要使用如上方式解码 使用localtion.href=url则路径和参数不会被改变