关于jquery：JavaScript – 如何打开新页面并将JSON数据传递给它？


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

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

相关讨论

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

像这样......

我正在使用JQUERY AND UNDERSCORE(用于模板目的)

这是模板

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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长度或发送多少变量。

最好！

相关讨论

嗯，例如，你有对象

1
2
3
4
var dataObject = {
    param  : 'param',
    param2 : 'param2'
};

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

1
var dataObjectString = JSON.stringify(dataObject);

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

1
var dataObjectBase64 = base64encode(dataObjectString);

你会得到这样的东西

1
e3BhcmFtIDogJ3BhcmFtJyxwYXJhbTIgOiAncGFyYW0yJ307

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

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

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

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

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

相关讨论

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

相关讨论

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

就像是：

1
window.open(yourUrl + '?json=' + serializedJson)
相关讨论

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
                $.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>" +"

       " +Click here+"" +"

    </td>
                   ");                
                    }
                    });

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html>
                    <head></head>
                    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js">
                    <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 +"
JSON=" + q.team);
                                        }

                           
                </html>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/*
    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：

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

或者，更简单的JavaScript：

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