前言

我们知道，打开一个新窗口，是只能带get参数的，如果想带post参数该怎么办呢？这个时候只要新建一个窗口，插入一个post表单即可 。

上代码

参考了网上的一个js函数，我修改了一下，让其支持多个参数post，并且支持string参数和json关联数组，现将代码分享出来。

test.html

<a onclick="openWindowWithPost('http://127.0.0.1/test.php', 'a=b&c=d&x[]=o&x[]=oo')">test string</a>
<br/>
<a onclick="openWindowWithPost('http://127.0.0.1/test.php', {'name':'xx','age':'24','sex':'1','cn':'中文'})">test json</a>

<script>
    /**
     * 在新窗口中打开带post数据的url，param支持字符串和json
     * by hisune.com
     */
    function openWindowWithPost(url, param) {
        var newWindow = window.open(url, 'newWindow');
        if (!newWindow)
            return false;

        var html = "";
        html += "<!DOCTYPE html><html><head><meta charset='utf-8'></head><body><form id='form-id' method='post' action='" + url + "'>";

        switch(typeof param){
            case 'string':
                var newParam = {}, seg = param.split('&'), len = seg.length, i = 0, s;
                for (; i < len; i++) {
                    if (!seg[i]) continue;
                    s = seg[i].split('=');
                    html += "<input type='hidden' name='" + s[0] + "' value='" + s[1] + "'/>";
                }
                break;
            case 'object':
                for (var o in param)
                    html += "<input type='hidden' name='" + o + "' value='" + param[o] + "'/>";
                break;
        }

        html += "</form><script type='text/javascript'>document.getElementById('form-id').submit();";
        html += "<\/script></body></html>".toString().replace(/^.+?\*|\\(?=\/)|\*.+?$/gi, "");
        newWindow.document.write(html);

        return newWindow;
    }
</script>

后端测试页面，test.php：

<?php
header("Content-type: text/html; charset=utf-8");

var_dump($_POST);

效果如下

string：
array (size=3)
  'a' => string 'b' (length=1)
  'c' => string 'd' (length=1)
  'x' => 
    array (size=2)
      0 => string 'o' (length=1)
      1 => string 'oo' (length=2)
json：
array (size=4)
  'name' => string 'xx' (length=2)
  'age' => string '24' (length=2)
  'sex' => string '1' (length=1)
  'cn' => string '中文' (length=6)

如果您觉得您在我这里学到了新姿势，博主支持转载，姿势本身就是用来相互学习的。同时，本站文章如未注明均为 hisune 原创 请尊重劳动成果 转载请注明 转自: js实现在新窗口中打开带post数据的url - hisune.com