堆栈内存溢出
  繁体   English   中英

JavaScript - 如何打开新页面并将JSON数据传递给它？

[英]JavaScript - How do I open a new page and pass JSON data to it?

 原文  2012-12-06 00:14:27  2   7    javascript/ jquery/ json

问题描述

我有一个名为search.jsp的页面。 当用户选择一个记录并按下一个编辑按钮时，我想打开一个新页面（在同一个窗口中），其中包含记录数据（存储在json对象中并传递给新页面）。 如何使用Javascript（或jQuery）打开新页面并传递JSON数据？

7 个解决方案

解决方案1
 2  2012-12-06 00:25:54

假设两个页面位于同一个域中，您可以使用window.open（）创建的返回对象来访问（和编辑）新打开的窗口的窗口对象。

解决方案2
 2 已采纳  2012-12-06 00:27:50

如果这两个页面位于同一个域中，则第三种方法是使用HTML5 localStorage： http ： //diveintohtml5.info/storage.html

事实上，localStorage正是为了你想要的。 处理GET参数或窗口/文档JS引用不是非常便携（即使我知道，所有浏览器都不支持localStorage）。

解决方案3
 2  2012-12-06 00:32:51

嗯，例如，你有对象 

var dataObject = {
    param  : 'param',
    param2 : 'param2'
};

您可以使用JSON.stringify方法将其转换为字符串 

var dataObjectString = JSON.stringify(dataObject);

然后你应该使用Base64编码对你的数据进行编码（在搜索引擎中可以很容易地找到base64编码/解码方法） 

var dataObjectBase64 = base64encode(dataObjectString);

你会得到这样的东西 

e3BhcmFtIDogJ3BhcmFtJyxwYXJhbTIgOiAncGFyYW0yJ307

然后您可以将此字符串作为参数传递： 

iframe src="http://page.com/?data=e3BhcmFtIDogJ3BhcmFtJyxwYXJhbTIgOiAncGFyYW0yJ307"

最后，在加载的页面上执行反向操作。

解决方案4
 2  2012-12-06 01:24:46

您可以“动态”创建一个带有隐藏/文本输入值的表单，这将保存json值，然后您可以通过javascript提交此表单。

像这样......

我正在使用JQUERY AND UNDERSCORE（用于模板目的）

这是模板 

<form method='<%= method %>' action="<%= action %>" name="<%= name %>" id="<%= id %>" target="_blank">
    <input type='hidden' name='json' id='<%= valueId %>' />
</form>

然后你可以在javascript上发布使用它 

function makePost(){
    var _t = _.template("use the template here");              
    var o = {
            method : "POST",
            action :"someurl.php",
            name : "_virtual_form",
            id : "_virtual_form_id",
            valueId : "_virtual_value"
        }

    var form = _t(o); //cast the object on the template
            //you can append the form into a element or do it in memory                   
    $(".warp").append(form);        

            //stringify you json        
        $("#_virtual_value").val(JSON.stringify(json)); 
        $("#_virtual_form_id").submit();
        $("#_virtual_form_id").remove();                        
}

现在你不必担心你的json长度或发送多少变量。

最好！

解决方案5
 1  2012-12-06 00:26:06

如果JSON足够小，您可以在打开新窗口时将其作为GET参数包含在URL中。

就像是： 

window.open(yourUrl + '?json=' + serializedJson)

解决方案6
 1  2016-01-28 23:03:01

这里有一些非常简单的纯JavaScript（没有HTML，没有jQuery）将对象转换为JSON并将其提交到另一个页面： 

/*
    submit JSON as 'post' to a new page
    Parameters:
    path        (URL)   path to the new page
    data        (obj)   object to be converted to JSON and passed
    postName    (str)   name of the POST parameter to send the JSON
*/
function submitJSON( path, data, postName ) {
    // convert data to JSON
    var dataJSON = JSON.stringify(data);

    // create the form
    var form = document.createElement('form');
    form.setAttribute('method', 'post');
    form.setAttribute('action', path);

    // create hidden input containing JSON and add to form
    var hiddenField = document.createElement("input");
    hiddenField.setAttribute("type", "hidden");
    hiddenField.setAttribute("name", postName);
    hiddenField.setAttribute("value", dataJSON);
    form.appendChild(hiddenField);

    // add form to body and submit
    document.body.appendChild(form);
    form.submit();
}

在目标页面上使用这样的PHP来获取JSON： 

$postVarsJSON = $_POST['myPostName'];
$postVars = json_decode( $postVarsJSON );

或者，更简单的JavaScript： 

var postVars = JSON.parse( <?php $_POST['myPostName']; ?> );

解决方案7
 0  2019-01-14 06:10:24

假设您的json数据var data = {“name”：“abc”};

发送JSON数据的页面应在脚本标记中包含以下代码。 

                $.getJSON( "myData.json", function( obj ) {
                console.log(obj);
                for(var j=0;j

<obj.length;j++){
                tData[j]=obj;
                //Passing JSON data in URL
                tData[j]=JSON.stringify(tData[j]);
                strTData[j]=encodeURIComponent(tData[j]);
                //End of Passing JSON data in URL
                tr = $('\


    <tr/>
                    ');
                    //Send the json data as url parameter
                    tr.append("


    <td>" + "

        <a href=\"fetchJSON.html?jsonDATA="+strTData[j]+"\" target=\"_blank\">" +Click here+ "</a>" + "

    </td>
                    ");                 
                    }
                    });

接收JSON数据的页面应该包含代码。 

<html>
                    <head></head>
                    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
                    <body>
                        <p id="id"></p>
                    </body>
                    <script type="text/javascript">
                            function getQuery() {
                                          var s=window.location.search;
                                          var reg = /([^?&=]*)=([^&]*)/g;
                                          var q = {};
                                          var i = null;
                                          while(i=reg.exec(s)) {
                                            q[i[1]] = decodeURIComponent(i[2]);
                                          }
                                          return q;
                            }
                                        var q = getQuery();
                                        try {
                                          var data = JSON.parse(q.jsonDATA);
                                          var name=data.name;
                                          console.log(name);
                                        document.getElementById("id").innerHTML=name;
                                        } catch (err) {
                                          alert(err + "\nJSON=" + q.team);
                                        }

                            </script>
                </html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在新页面上打开数据？ 如何使用 javascript 文件中的已发布数据打开新的 PHP 页面 如何使用JavaScript在ibox中打开页面？ 如何在新窗口中打开SAME页面，并将JavaScript与它们交叉？ Chrome Javascript扩展程序 - 如何在新标签页中打开页面，而无需实际转到该标签页？ 如何将数据从Chrome扩展程序传递到使用window.open打开的网页？ 如何将此JSON数据传递给自动完成功能 如何仅使用JavaScript将表单数据从一个HTML页面传递到另一HTML页面？ 如何在新页面或新标签页中打开此javascript？ 如何将参数从 Javascript 传递到新页面？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM