Window.open e passa i parametri tramite il metodo post

97

Con il metodo window.open apro un nuovo sito con parametri, che devo passare per metodo post.Ho trovato soluzione, ma purtroppo non funziona. Questo è il mio codice:

<script  type="text/javascript">    
function openWindowWithPost(url,name,keys,values)
{
    var newWindow = window.open(url, name);

    if (!newWindow) return false;

    var html = "";
    html += "<html><head></head><body><form id='formid' method='post' action='" + url +"'>";

    if (keys && values && (keys.length == values.length))
        for (var i=0; i < keys.length; i++)
            html += "<input type='hidden' name='" + keys[i] + "' value='" + values[i] + "'/>";

    html += "</form><script type='text/javascript'>document.getElementById(\"formid\").submit()</sc"+"ript></body></html>";

    newWindow.document.write(html);
    return newWindow;
}
</script>

Successivamente, creo array:

<script type="text/javascript">    
var values= new Array("value1", "value2", "value3") 
var keys= new Array("a","b","c") 
</script>

E chiama la funzione:

<input id="Button1" type="button" value="Pass values" onclick="openWindowWithPost('test.asp','',keys,values)" />

Ma, quando clicco su questo pulsante, il sito test.asp è vuoto (ovviamente provo a ottenere valori di passaggio - Request.Form("b")).

Come posso risolvere questo problema, perché non riesco a ottenere i valori passati?

javascript

— luk4443
fonte

2

Cosa non funziona? Ho salvato una copia su jsfiddle.net/TZMMF e funziona come previsto.

— Presentati il

Grazie per la risposta. Sì, mi dispiace - il codice sopra funziona. Ma provo questa funzione con un array di chiavi: <script type = "text / javascript"> var values = new Array ("value1", "value2", "value3") var keys = new Array ("1", "2 "," 3 ") // al posto di a, b, c </script> ottengo valore da Request.Form (" 2 ") In IE e Firefox ottengo una pagina vuota.

— luk4443

121

Invece di scrivere un modulo nella nuova finestra (che è difficile da correggere, con la codifica dei valori nel codice HTML), apri semplicemente una finestra vuota e inserisci un modulo in essa.

Esempio:

<form id="TheForm" method="post" action="test.asp" target="TheWindow">
<input type="hidden" name="something" value="something" />
<input type="hidden" name="more" value="something" />
<input type="hidden" name="other" value="something" />
</form>

<script type="text/javascript">
window.open('', 'TheWindow');
document.getElementById('TheForm').submit();
</script>

Modificare:

Per impostare dinamicamente i valori nel modulo, puoi procedere in questo modo:

function openWindowWithPost(something, additional, misc) {
  var f = document.getElementById('TheForm');
  f.something.value = something;
  f.more.value = additional;
  f.other.value = misc;
  window.open('', 'TheWindow');
  f.submit();
}

Per pubblicare il modulo chiamate la funzione con i valori, come openWindowWithPost('a','b','c');.

Nota: ho variato i nomi dei parametri in relazione ai nomi dei moduli per mostrare che non devono essere gli stessi. Di solito li manterrai simili tra loro per rendere più semplice tenere traccia dei valori.

— Guffa
fonte

È esattamente quello che stavo pensando. Il codice originale pubblicato sembrava funzionare però ... tranne che su IE.

— Presentati il

Grazie per la risposta. Ma ho una tabella, dove nella colonna ci sono i pulsanti. Quando clicco su questo pulsante, apro una nuova pagina e passo alcuni parametri. Quindi devo scrivere la funzione e per ogni pulsante chiamarla e passare argomenti fissi. La mia domanda, come potrei riscrivere il codice sopra per funzionare?

— luk4443

1

@ luk4443: se utilizzi l'URL quando apri la finestra, la pagina verrà semplicemente sostituita quando pubblichi il modulo. Inserisci l'URL nella actionproprietà del modulo.

— Guffa

1

@Guffa qualche modo per simulare anche il comportamento di target="_blank"?

— everton

2

@EvertonAgner: utilizza un nome univoco per la finestra e funzionerà come _blank.

— Guffa

62

Dato che volevi l'intero modulo all'interno del javascript, invece di scriverlo nei tag, puoi farlo:

var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", "openData.do");

form.setAttribute("target", "view");

var hiddenField = document.createElement("input"); 
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", "message");
hiddenField.setAttribute("value", "val");
form.appendChild(hiddenField);
document.body.appendChild(form);

window.open('', 'view');

form.submit();

— Mercenario
fonte

5

Nessuna implementazione basata su jQuery e Pure JavaScript. Grazie.

— Pawan Pillai

2

@ La pagina del mercenario è aperta in una nuova scheda qui, posso aprire la pagina in una nuova finestra popup?

— Yaje

29

Anche se sono in ritardo di 3 anni, ma per semplificare l'esempio di Guffa, non hai nemmeno bisogno di avere il modulo sulla pagina:

$('<form method="post" action="test.asp" target="TheWindow">
       <input type="hidden" name="something" value="something">
       ...
   </form>').submit();

Modificato:

$('<form method="post" action="test.asp" target="TheWindow">
       <input type="hidden" name="something" value="something">
       ...
   </form>').appendTo('body').submit().remove();

Forse un consiglio utile per qualcuno :)

— Andrius Naruševičius
fonte

7

Questa soluzione è incompleta. Dovrebbe prima aggiungere questo modulo al corpo e poi inviarlo. Quindi, dove dice .submit (); dovrebbe dire .appendTo ('body'). submit ();

— Jonathan van de Veen

1

Senza questa parte $("body").append(form);non funzionerà

— Axel

4

Se aggiungi un .remove()dopo il suggerimento di Jonathan .appendTo('body').submit(), ripulirai anche te stesso e non ingombrerai la pagina corrente con oggetti modulo.

— Simon

24

Sono completamente d'accordo con la risposta di mercenary postata sopra e ho creato questa funzione per me che funziona per me. Non è una risposta, è un commento al post sopra di mercenary

function openWindowWithPostRequest() {
  var winName='MyWindow';
  var winURL='search.action';
  var windowoption='resizable=yes,height=600,width=800,location=0,menubar=0,scrollbars=1';
  var params = { 'param1' : '1','param2' :'2'};         
  var form = document.createElement("form");
  form.setAttribute("method", "post");
  form.setAttribute("action", winURL);
  form.setAttribute("target",winName);  
  for (var i in params) {
    if (params.hasOwnProperty(i)) {
      var input = document.createElement('input');
      input.type = 'hidden';
      input.name = i;
      input.value = params[i];
      form.appendChild(input);
    }
  }              
  document.body.appendChild(form);                       
  window.open('', winName,windowoption);
  form.target = winName;
  form.submit();                 
  document.body.removeChild(form);           
}

— Youdhveer
fonte

12

Potresti semplicemente usare target="_blank"sul modulo.

<form action="action.php" method="post" target="_blank">
    <input type="hidden" name="something" value="some value">
</form>

Aggiungi input nascosti nel modo che preferisci, quindi invia semplicemente il modulo con JS.

— Molo
fonte

Inoltre, poiché window.openverrebbe bloccato come popup, quando non viene chiamato all'interno di un clickgestore (o qualsiasi evento attivato dall'utente come quello)

— Xenos

4

Ho creato una funzione per generare un form, basato su url, target e un oggetto come il metodo POST/ GETdata e submit. Supporta tipi nidificati e misti all'interno di quell'oggetto, quindi può replicare completamente qualsiasi struttura che gli dai: PHP lo analizza automaticamente e lo restituisce come un array nidificato. Tuttavia, c'è una sola restrizione: le parentesi [e ]non devono far parte di alcuna chiave nell'oggetto (come {"this [key] is problematic" : "hello world"}). Se qualcuno sa come evadere correttamente, per favore dillo!

Senza ulteriori indugi, ecco la fonte:

Mostra snippet di codice

function getForm(url, target, values, method) {
  function grabValues(x) {
    var path = [];
    var depth = 0;
    var results = [];

    function iterate(x) {
      switch (typeof x) {
        case 'function':
        case 'undefined':
        case 'null':
          break;
        case 'object':
          if (Array.isArray(x))
            for (var i = 0; i < x.length; i++) {
              path[depth++] = i;
              iterate(x[i]);
            }
          else
            for (var i in x) {
              path[depth++] = i;
              iterate(x[i]);
            }
          break;
        default:
          results.push({
            path: path.slice(0),
            value: x
          })
          break;
      }
      path.splice(--depth);
    }
    iterate(x);
    return results;
  }
  var form = document.createElement("form");
  form.method = method;
  form.action = url;
  form.target = target;

  var values = grabValues(values);

  for (var j = 0; j < values.length; j++) {
    var input = document.createElement("input");
    input.type = "hidden";
    input.value = values[j].value;
    input.name = values[j].path[0];
    for (var k = 1; k < values[j].path.length; k++) {
      input.name += "[" + values[j].path[k] + "]";
    }
    form.appendChild(input);
  }
  return form;
}

Espandi lo snippet

Esempio di utilizzo:

document.body.onclick = function() {
  var obj = {
    "a": [1, 2, [3, 4]],
    "b": "a",
    "c": {
      "x": [1],
      "y": [2, 3],
      "z": [{
        "a": "Hello",
        "b": "World"
      }, {
        "a": "Hallo",
        "b": "Welt"
      }]
    }
  };

  var form = getForm("http://example.com", "_blank", obj, "post");

  document.body.appendChild(form);
  form.submit();
  form.parentNode.removeChild(form);
}

Espandi lo snippet

— Cerimonia
fonte

oops, l'URL nell'esempio di utilizzo non era corretto. se risolto, quindi non ci sono più errori.

— Cerimonia

1

Sembra ancora rotto, ricevo una pagina vuota.

— Adam Parkin

2

Ho trovato un modo migliore per passare i parametri alla finestra popup e persino per recuperare i parametri da essa:

Nella pagina principale:

var popupwindow;
var sharedObject = {};

function openPopupWindow()
{
   // Define the datas you want to pass
   sharedObject.var1 = 
   sharedObject.var2 = 
   ...

   // Open the popup window
   window.open(URL_OF_POPUP_WINDOW, NAME_OF_POPUP_WINDOW, POPUP_WINDOW_STYLE_PROPERTIES);
   if (window.focus) { popupwindow.focus(); }
}

function closePopupWindow()
{
    popupwindow.close();

    // Retrieve the datas from the popup window
    = sharedObject.var1;
    = sharedObject.var2;
    ...
}

Nella finestra popup:

var sharedObject = window.opener.sharedObject;

// function you have to to call to close the popup window
function myclose()
{
    //Define the parameters you want to pass to the main calling window
    sharedObject.var1 = 
    sharedObject.var2 = 
    ...
    window.opener.closePopupWindow();
}

Questo è tutto !

E questo è molto comodo perché:

Non è necessario impostare i parametri nell'URL della finestra popup.
Nessuna forma da definire
Puoi utilizzare parametri illimitati anche oggetti.
Bi-direzionale: puoi passare parametri E, se lo desideri, puoi recuperare nuovi parametri.
Molto facile da implementare.

Divertiti!

— Uomo blu
fonte

nota: window.openernon è supportato da tutti i browser.

— Raptor

1

Volevo farlo in React usando J semplici e il polyfill fetch . OP non ha detto che voleva specificamente creare un modulo e invocare il metodo di invio su di esso, quindi l'ho fatto pubblicando i valori del modulo come json:

examplePostData = {
    method: 'POST',
    headers: {
       'Content-type' : 'application/json',
       'Accept' : 'text/html'
    },
    body: JSON.stringify({
        someList: [1,2,3,4],
        someProperty: 'something',
        someObject: {some: 'object'}
    })
}

asyncPostPopup = () => {

    //open a new window and set some text until the fetch completes
    let win=window.open('about:blank')
    writeToWindow(win,'Loading...')

    //async load the data into the window
    fetch('../postUrl', this.examplePostData)
    .then((response) => response.text())
    .then((text) => writeToWindow(win,text))
    .catch((error) => console.log(error))
}

writeToWindow = (win,text) => {
    win.document.open()
    win.document.write(text)
    win.document.close()
}

0

L'azione di invio predefinita è Ext.form.action.Submit, che utilizza una richiesta Ajax per inviare i valori del modulo a un URL configurato. Per abilitare l'invio normale da parte del browser di un modulo Ext, utilizzare l'opzione di configurazione standardSubmit.

Collegamento: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.Basic-cfg-standardSubmit

soluzione: metti standardSubmit: true nella tua configurazione. Spero che questo ti possa aiutare :)

— user2420964
fonte

0

L'ho usato in passato, poiché in genere usiamo la sintassi del rasoio per la codifica

@using (Html.BeginForm("actionName", "controllerName", FormMethod.Post, new { target = "_blank" }))

{

// aggiungi nascosto e il modulo archiviato qui

}

— riscatti
fonte