用post方式打开新页面

发表于 更新于 分类于 阅读次数：

摘要：用post方式打开新页面

大家都知道打开一个标签页或者重定向页面可以使用下面的方法

1
window.open('https://www.baidu.com');
1
window.location.href='https://www.baidu.com';

但是这样打开的页面是通过GET方法请求的，参数只能通过问号的形式拼接到url后面。如果想要通过post方式重定向可以使用下面的方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>POST跳转示例</title>
</head>
<body>
<input type="text" id="param1" placeholder="param1">
<input type="text" id="param2" placeholder="param2">
<button type="button" onclick="handleOnclick()">提交并跳转</button>
</body>
<script type="text/javascript">
    // 构造form表单进行提交
    function postRequest(url, data) {
        const form = document.createElement("form");
        form.id = "form";
        form.name = "form";
        document.body.appendChild(form);

        // 设置相应参数
        for (const key in data) {
            const input = document.createElement("input");
            input.type = "text";
            input.name = key;
            input.value = data[key];
            // 将该输入框插入到 form 中
            form.appendChild(input);
        }
        // form 的提交方式
        form.method = "POST";
        // form 提交路径
        form.action = url;
        // 如需打开新窗口，form的target属性要设置为'_blank'
        // form.target = "_blank";
        // 对该 form 执行提交
        form.submit();
        // 删除该 form
        document.body.removeChild(form);
    }

    // 点击跳转页面
    function handleOnclick() {
        // 构造数据
        const url = "https://www.baidu.com";
        const data = {
            param1: document.getElementById('param1').value,
            param2: document.getElementById('param2').value,
        };
        postRequest(url, data);
    }
</script>
</html>