Indirizzare un iframe con un post HTML con jQuery

Question

Se sto usando jQuery o JavaScript per fare un post, come posso renderlo un iframe target piuttosto che la pagina corrente?

jQuery.post( 
    url, 
    [data], 
    [callback], 
    [type] 
) 

Questo è il formato del post jQuery, non sembra come se non v'è nessuna parte per specificare la destinazione che ci sia nel tag <form>.

Qualche idea?

Answer 1

Forse ti manca il punto di una richiesta AJAX - perché stai cercando di specificare il "target" di una richiesta asincrona? Questo non ha senso perché l'intero punto di AJAX è che la richiesta dal server viene rimandata al Javascript, senza ricariche di pagine o destinazioni HTML.

Se si voleva caricare il risultato della richiesta su un iframe, si potrebbe fare:

$.post('myurl', function(data) { 
    $('#myframe').html(data); 
}, 'html'); 

Answer 2

Ti manca il punto di AJAX. Se vuoi pubblicare qualcosa su un iframe, puoi farlo con un semplice modulo, pubblicato da JavaScript o nel solito modo: un pulsante di invio.

Answer 3

È possibile farlo attraverso una forma regolare:

<form action="targetpage.php" method="post" target="iframename" id="formid"> 
    <input type="hidden" name="foo" value="bar" /> 
</form> 

È possibile quindi utilizzare jQuery per inviare il modulo:

$("#formid").submit(); 

Answer 4

È possibile risolvere la non-forma-permesso-in-a -forma il problema creando dinamicamente il modulo e aggiungendolo al corpo. Così si farebbe qualcosa di simile:

$().ready(function() { 
    $('body').append('<form 
     action="url" 
     method="post" 
     target="iframename" 
     id="myspecialform"> 
     <input type="hidden" name="parameter" value="value" /> 
     </form>'); 
}); 

che crea la vostra forma iframe-aggiornamento al di fuori della forma principale che racchiude tutto il resto della pagina. Quindi chiamalo come consigliato da Josh: $('#myspecialform').submit();.

Answer 5

Ecco cosa ho fatto per risolvere il problema di avere un modulo all'interno di un modulo su una pagina asp.net quando ho avuto bisogno di inviare dati a una pagina remota tramite un modulo che utilizza idealmente AJAX/jQuery.

1. ho creato le variabili per catturare il nome del modulo asp.net, bersaglio, azione, metodo, ecc

2. Ho tenuto che le informazioni dal modulo in quelle variabili e poi cambiato la forma stessa usando jQuery per fare quello che mi serviva da fare.

3. Quindi ho inviato il modulo tramite AJAX (perché avevo bisogno di un modulo per postare in modo dinamico una pagina separata in modo che l'altra pagina RICEVERE le informazioni).

4. Infine, ho modificato il modulo asp.net in modo che il resto della pagina potesse funzionare correttamente.

Questo sembra aver risolto il mio bisogno di una soluzione simile.

Answer 6

So che questa domanda è vecchia, ma ecco come l'ho fatta su ASP.Net (C#) usando jQuery.

//Create the form in a jQuery object 
$("<form action='/FormPostTo.aspx' method='post' target='nameofframe'></form>") 
    //Get the value from the asp textbox with the ID txtBox1 and POST it as b1 
    .append($("<input type='hidden' name='b1' />").attr('value',$('#<%= txtBox1.ClientID %>').val())) 
    //Get the value from the asp textbox with the ID txtBox2 and POST it as b2 
    .append($("<input type='hidden' name='b2' />").attr('value',$('#<%= txtBox2.ClientID %>').val())) 
    //Add the form to the body tag 
    .appendTo('body') 
    //Submit the form which posts the variables into the iframe 
    .submit() 
    //Remove the form from the DOM (so subsequent requests won't keep expanding the DOM) 
    .remove(); 

Solo una breve nota: ho fatto i tag input del genere piuttosto che concatenare, nel caso in cui il valore della casella di testo ha avuto una citazione (') in esso. Se l'hai concatenato, questo avrebbe rovinato l'HTML e non sarebbe stato analizzato correttamente.

Inoltre, questo rimuove il modulo dal DOM dopo che è stato utilizzato in modo da non riempire il DOM con elementi di modulo se si inviano ai più volte iFrame.

Un leggero cambiamento che si potrebbe fare, sarebbe quello di creare l'elemento del modulo, se non esiste e poi basta fare riferimento a essa per ID se già esiste e riutilizzarla.

Answer 7

ecco come ho fatto in javascript con html semplice:

var form=$("<form/>").attr({ 
    method: "post", 
    action: "iframe.php", 
    target: "list_frame" 
}); 
form.append($("<input/>").attr({name:"field1",value:0})); 
form.append($("<input/>").attr({name:"field2",value:1})); 
form.append($("<input/>").attr({name:"field3",value:2})); 
form.append($("<input/>").attr({name:"field4",value:3})); 
form.append($("<input/>").attr({name:"field5",value:4})); 
$("body").append(form); 
form.submit();