Question

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

Answer 1

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

Answer 2

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

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

Answer 3

嗯，例如，你有对象

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"

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

Answer 4

您可以使用隐藏/文本输入值创建“动态”表单，这将保存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长度或要发送多少变量。

最好！

Answer 5

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

类似的东西：

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

Answer 6

这里有一些非常简单的纯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']; ?> );

Answer 7

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

发送JSON数据的页面的script标签中应包含以下代码。

                $.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>

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

7 个答案: