5

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

4

7 回答 7

3

如果两个页面在同一个域,第三种方法是使用 HTML5 localStorage:http ://diveintohtml5.info/storage.html

事实上,localStorage 正是针对您想要的。处理 GET 参数或窗口/文档 JS 引用不是很便携(即使,我知道,所有浏览器都不支持 localStorage)。

于 2012-12-06T00:27:50.350 回答
2

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

于 2012-12-06T00:25:54.710 回答
2

嗯,例如,你有对象

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"

最后,在加载的页面上进行反向操作。

于 2012-12-06T00:32:51.340 回答
2

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

像这样的东西...

我使用 JQUERY 和 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 的长度或要发送的变量数量。

最好的!

于 2012-12-06T01:24:46.573 回答
2

这是一些非常简单的纯 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']; ?> );
于 2016-01-28T23:03:01.543 回答
1

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

就像是:

window.open(yourUrl + '?json=' + serializedJson)
于 2012-12-06T00:26:06.360 回答
0

假设您的 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>
于 2019-01-14T06:10:24.747 回答