POST请求到新的页面

最新推荐文章于 2022-01-14 16:08:10 发布

loetca

最新推荐文章于 2022-01-14 16:08:10 发布

阅读量4.2k

点赞数 1

分类专栏： JavaScript 文章标签： POST请求 jQuery JavaScript JSON

本文链接：https://blog.csdn.net/adsl624153/article/details/78453886

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1）问题的提出

通过GET请求传递的参数有限，而且window.open(); 只适用于GET请求；如果通过POST请求传递参数，则需要自己封装函数来实现

2) 具体实现

⑴ 传递JSON

① 传递JSON，通过jQuery实现

    /**
     * POST请求到新的窗口，传递JSON，通过jQuery实现
     * 
     * @param url 请求路径
     * @param json JSON字符串
     */
    function postToNewTabWithJSONByjQuery(url, json) {
        var $form = $('<form action="' + url + '" method="POST" target="_blank" style="display:none;"></form>');
        for (var param in json) {
            $form.append('<input type="hidden" name="' + param + '" value="' + json[param] + '" />');
        }
        $("body").append($form);
        $form.submit();
        $form.remove();
    };

② 传递JSON，通过JavaScript实现

    /**
     * POST请求到新的窗口，传递JSON，通过JavaScript实现
     *
     * @param url 请求路径
     * @param json JSON字符串
     */
    function postToNewTabWithJSONByJavaScript(url, json) {
        var form = document.createElement("form");
        form.action = url;
        form.method = "POST";
        form.target = "_blank";
        form.style.display = "none";

        var hidden;
        for (var param in json) {
            hidden = document.createElement("input");
            hidden.type = "hidden"
            hidden.name = param;
            hidden.value = json[param];
            form.appendChild(hidden);
        }
        document.body.appendChild(form);
        form.submit();
        document.body.removeChild(form);
    };

⑵ 传递Array数组

① 传递Array数组，通过jQuery实现

    /**
     * POST请求到新的窗口，传递Array数组，通过jQuery实现
     *
     * @param url 请求路径
     * @param array Array数组
     */
    function postToNewTabWithArrayByjQuery(url, array) {
        var $form = $('<form action="' + url + '" method="POST" target="_blank" style="display:none;"></form>');
        for (var element in array) {
            for (var param in array[element]) {
                $form.append('<input type="hidden" name="' + param + '" value="' + array[element][param] + '" />');
            }
        }
        $("body").append($form);
        $form.submit();
        $form.remove();
    };

② 传递Array数组，通过JavaScript实现

    /**
     * POST请求到新的窗口，传递Array数组，通过JavaScript实现
     *
     * @param url 请求路径
     * @param array Array数组
     */
    function postToNewTabWithArrayByJavaScript(url, array) {
        var form = document.createElement("form");
        form.action = url;
        form.method = "POST";
        form.target = "_blank";
        form.style.display = "none";

        var hidden;
        for (var element in array) {
            for (var param in array[element]) {
                hidden = document.createElement("input");
                hidden.type = "hidden"
                hidden.name = param;
                hidden.value = array[element][param];
                form.appendChild(hidden);
            }
        }
        document.body.appendChild(form);
        form.submit();
        document.body.removeChild(form);
    };

3) 使用示例

    var url = "???";
    var person = {
        "id": "1",
        "name": "张三",
        "age": 14
    };
    postToNewTabWithJSONByjQuery(url, person);

    var url = "???";
    var array = new Array();
    var person1 = {
        "persons[0].id": "1",
        "persons[0].name": "张三",
        "persons[0].age": 14
    };
    var person2 = {
        "persons[1].id": "2",
        "persons[1].name": "李四",
        "persons[1].age": 12
    };
    array.push(person1);
    array.push(person2);
    postToNewTabWithArrayByJavaScript(url, array);