我有一个名为 search.jsp 的页面。当用户选择一条记录并按下编辑按钮时,我想用记录数据(存储在 json 对象中并传递给新页面)打开一个新页面(在同一窗口中)。如何使用 Javascript(或 jQuery)打开新页面并传递 JSON 数据?
7 回答
如果两个页面在同一个域,第三种方法是使用 HTML5 localStorage:http ://diveintohtml5.info/storage.html
事实上,localStorage 正是针对您想要的。处理 GET 参数或窗口/文档 JS 引用不是很便携(即使,我知道,所有浏览器都不支持 localStorage)。
假设两个页面在同一个域中,您可以使用 window.open() 创建的返回对象来访问(和编辑)新打开的窗口的窗口对象。
嗯,例如,你有对象
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"
最后,在加载的页面上进行反向操作。
您可以“即时”创建一个带有隐藏/文本输入值的表单,该值将保存 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 的长度或要发送的变量数量。
最好的!
这是一些非常简单的纯 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']; ?> );
如果 JSON 足够小,您可以在打开新窗口时将其作为 GET 参数包含在 URL 中。
就像是:
window.open(yourUrl + '?json=' + serializedJson)
假设您的 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>