JavaScript - Wie öffne ich eine neue Seite und gebe JSON-Daten an sie weiter?

Question

Ich habe eine Seite namens search.jsp. Wenn der Benutzer einen Datensatz auswählt und die Bearbeitungsschaltfläche drückt, möchte ich eine neue Seite (im selben Fenster) mit den Datensatzdaten öffnen (die in einem JSON-Objekt gespeichert sind und an die neue Seite übergeben werden). Wie verwende ich Javascript (oder jQuery), um eine neue Seite zu öffnen und die JSON-Daten weiterzuleiten?

Answer 1

Wenn die beiden Seiten auf der gleichen Domäne sind, einen dritten Weg HTML5 local zu verwenden ist. Der Umgang mit GET-Parametern oder Fenster-/Dokument-JS-Referenzen ist nicht sehr portabel (auch wenn ich weiß, dass alle Browser localStorage nicht unterstützen).

Answer 2

die beiden Seiten sind auf der gleichen Domain Unter der Annahme, können Sie das zurückgegebene Objekt von window.open(), um Zugang (und bearbeiten), um das Fenster-Objekt eines neu geöffneten Fenster erstellt wurden.

Answer 3

Wenn der JSON klein genug ist, können Sie ihn einfach als GET-Parameter in die URL aufnehmen, wenn Sie das neue Fenster öffnen.

Etwas wie: http://diveintohtml5.info/storage.html

In der Tat genau für local, was Sie wollen bestimmt ist:

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

Answer 4

Hmm, zum Beispiel, haben Sie Objekt

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

Sie können es in Zeichenfolge übersetzen, JSON.stringify Methode

var dataObjectString = JSON.stringify(dataObject); 

Dann sollten Sie Base64-Codierung verwenden Sie Daten zu kodieren (base64 kodieren/decodieren Methoden können in den Suchmaschinen leicht gefunden werden)

var dataObjectBase64 = base64encode(dataObjectString); 

Sie erhalten so etwas wie dies

e3BhcmFtIDogJ3BhcmFtJyxwYXJhbTIgOiAncGFyYW0yJ307 

Dann können Sie diese Zeichenfolge als Parameter übergeben:

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

Schließlich Reverse Aktionen auf der geladenen Seite.

Answer 5

Sie können „on the fly“ eine Form mit einem versteckten/Texteingabewert schaffen dies den json Wert hält, dann können Sie dieses Formular über Javascript einreichen.

So etwas ...

Im mit JQUERY und Unterstrichen (für Vorlage Zweck)

dies die Vorlage

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

Sie dann Post verwenden Javascript kann, ist

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

jetzt tun Sie Sie müssen sich keine Sorgen über die Länge von Ihnen json oder wie viele Variablen zu senden.

am besten!

Answer 6

Hier einige sehr einfache reine JavaScript (kein HTML, keine jQuery), die ein Objekt zu JSON konvertiert und legt es auf eine andere Seite:

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

einige PHP, wie dies auf der Zielseite Verwenden Sie die JSON zu erhalten :

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

oder einfacher für JavaScript:

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