JavaScript: come si apre una nuova pagina e si passano i dati JSON?

Question

Ho una pagina chiamata search.jsp. Quando l'utente seleziona un record e preme un pulsante di modifica, vorrei aprire una nuova pagina (nella stessa finestra) con i dati del record (che è memorizzata in un oggetto JSON e passata alla nuova pagina). Come posso usare Javascript (o jQuery) per aprire una nuova pagina e passare i dati JSON?

Answer 1

Se le due pagine sono sullo stesso dominio, un terzo modo è quello di utilizzare HTML5 localStorage: http://diveintohtml5.info/storage.html

Infatti localStorage è appunto inteso per ciò che si vuole. Gestire i parametri GET o i riferimenti JS di finestre/documenti non è molto portabile (anche se, lo so, tutti i browser non supportano localStorage).

Answer 2

Supponendo che le due pagine si trovino nello stesso dominio, è possibile utilizzare l'oggetto restituito creato da window.open() per accedere (e modificare) l'oggetto finestra di una finestra appena aperta.

Answer 3

Se il JSON è abbastanza piccolo, è sufficiente includerlo come parametro GET per l'URL quando si apre la nuova finestra.

Qualcosa di simile:

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

Answer 4

Hmm, ad esempio, si dispone oggetto

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

È possibile tradurlo in stringa, utilizzando il metodo JSON.stringify

var dataObjectString = JSON.stringify(dataObject); 

Poi si dovrebbe utilizzare la codifica Base64 per codificare i tuoi dati (base64 metodi di codifica/decodifica possono essere easely trovati nei motori di ricerca)

var dataObjectBase64 = base64encode(dataObjectString); 

otterrete qualcosa di simile

e3BhcmFtIDogJ3BhcmFtJyxwYXJhbTIgOiAncGFyYW0yJ307 

Poi si può passare questa stringa come un parametro:

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

Infine, azioni sulla pagina caricata retromarcia.

Answer 5

È possibile creare "al volo" un modulo con un valore di input nascosto/testo che manterrà il valore di json, quindi è possibile inviare questo modulo tramite javascript.

qualcosa di simile ...

Im utilizzando jQuery e underscore (a scopo template)

Questo è il modello

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

si può quindi posta utilizzarlo su 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();       
} 

ora si fa Non devi preoccuparti della lunghezza di te json o di quante variabili inviare.

meglio!

Answer 6

Ecco alcuni molto semplici JavaScript puro (senza HTML, senza jQuery) che converte un oggetto JSON e lo sottopone ad un'altra pagina:

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

utilizzare alcuni di PHP come questo sulla pagina di destinazione per ottenere il JSON :

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

O, più semplicemente per JavaScript:

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