JavaScript - 如何打開新頁面並將JSON數據傳遞給它？

我有一個名爲search.jsp的頁面。當用戶選擇一條記錄並按下一個編輯按鈕時，我想用記錄數據（存儲在json對象中並傳遞給新頁面）打開一個新頁面（在同一個窗口中）。我如何使用Javascript（或jQuery）打開一個新頁面並傳遞JSON數據？JavaScript - 如何打開新頁面並將JSON數據傳遞給它？

來源

2012-12-06 James

感謝大家的答覆。這些網頁位於同一個域中。我很抱歉沒有在原始文章中包含這些內容。 – James

如果這兩個網頁位於同一個域，第三方法是使用HTML5的localStorage：http://diveintohtml5.info/storage.html

事實上localStorage的恰恰是用於你想要什麼。處理GET參數或窗口/文檔JS引用不是很便攜（即使我知道所有瀏覽器都不支持localStorage）。

來源

2012-12-06 00:27:50 Ulflander

我認爲本地存儲受限於域（雖然我不記得細節）？畢竟，你不希望惡意。網站.com訪問your.bank.com設置的localStorage？ – machineghost

你是完全正確的。這個問題以某種方式問我認爲這兩個頁面將在同一個域上。精確地編輯答案。而我發現其他解決方案有點難看.. – Ulflander

是的;這兩個頁面都在同一個域中，所以這將工作得很好。使用後我必須小心清理存儲空間。 – James

假設這兩個頁面位於同一個域中，您可以使用由window.open（）創建的返回對象來訪問（和編輯）新打開的窗口的窗口對象。

來源

2012-12-06 00:25:54 Jack

我必須將新頁面保存在同一個窗口中（即window.open（'edit.jsp'，'_self'））當搜索頁面不再存在時，如何從搜索頁面操作編輯頁面的窗口對象？ – James

你能提供可以描述更多答案的代碼片段嗎 – dom

如果JSON足夠小，則可以在打開新窗口時將其作爲GET參數包含在URL中。

喜歡的東西：

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

來源

2012-12-06 00:26:06 machineghost

但我更喜歡傑克的答案;沒有JSON長度限制，並且在用戶可以看到的URL中沒有巨大的JSON混亂。 – machineghost

我最近遇到了這個聲明，「如果JSON足夠小」小到足夠小以及涉及的邊界是什麼？ – Jay

http://stackoverflow.com/questions/2659952/maximum-length-of-http-get-request – machineghost

嗯，例如，你有對象

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

您可以透過JSON.stringify方法

var dataObjectString = JSON.stringify(dataObject);

那麼你應該使用Base64編碼爲您的數據編碼它翻譯成字符串（的base64編碼/解碼方法可以在搜索引擎中輕鬆找到）

var dataObjectBase64 = base64encode(dataObjectString);

你會得到最後

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

，扭轉加載的頁面上的操作：這樣的事情

e3BhcmFtIDogJ3BhcmFtJyxwYXJhbTIgOiAncGFyYW0yJ307

然後你就可以通過這個字符串作爲參數。

來源

2012-12-06 00:32:51 bonbonez

您可以創建一個帶有隱藏/文本輸入值的「即時」表單，這將保存json值，然後您可以通過javascript提交此表單。

事情是這樣的......

即時通訊使用jQuery和下劃線（模板目的）

這

<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();       
}

現在你做nt不得不擔心你的長度或者發送多少個變量。

最好！

來源

2012-12-06 01:24:46 ncubica

感謝您的回答。我相信本地存儲解決方案（由Ulflander提出）可能會更簡單一些，因爲這兩個頁面都在同一個域中。 – James

嗯，這是一個交叉瀏覽器解決方案，而Ulflander沒有，但你的權利，他的答案是更簡單的原因是隻是利用了html5的新功能。當然，正如您所說，當您的網頁位於不同的域時，此解決方案可以爲您提供幫助。最好 ... – ncubica

下面是將對象轉換爲JSON並將其提交到另一頁一些非常簡單的純JavaScript（沒有HTML，沒有jQuery的）：

/* 
    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-28 23:03:01 terrymorse

JavaScript - 如何打開新頁面並將JSON數據傳遞給它？

回答

相關問題