2009-09-11 14 views
17

Anche se $ .ajax() può essere usato per fare cose jax, non penso che sia adatto per pubblicare valori di una grande forma.Come pubblicare un modulo con molti campi con jQuery?

Come sarebbe post una grande forma (molti campi) senza inserirli tutti a mano?

+3

Penso che l'OP si riferisca alla pubblicazione di un modulo con molti campi. C'è molto codice boilerplate da scrivere quando pubblichi i campi uno per uno e penso che l'OP si stia chiedendo se c'è un modo per pubblicare semplicemente tutti i campi sul modulo. Questa domanda è stata molto utile per me. –

risposta

42

Qual è il tuo ragionamento dietro questa ipotesi? Il POST è progettato per il trasferimento di grandi quantità di dati rispetto a GET. Una richiesta POST AJAX è quasi identica a una richiesta POST "normale", è solo in bundle e gestita internamente da un browser in un modo leggermente diverso. Un paio di intestazioni potrebbero essere leggermente diverse, ma i dati sono tutti uguali. Perché AJAX non dovrebbe gestire una forma "grande"?

Che cosa definiresti comunque una "grande" forma?

Modifica: Grazie per il chiarimento sulla tua domanda. Capisco quello che stai chiedendo ora, e vedo da dove vieni. Per un modulo con molti input, potrebbe essere complicato raggrupparlo in una richiesta Ajax per tutto il tempo.

Poiché si utilizza jQuery, c'è una soluzione semplice a questo. Controlla il metodo serialize(). Gli dai un modulo e ti restituisce una stringa di query di tutti gli elementi e i valori di input del modulo che puoi passare direttamente a una richiesta Ajax. C'è un esempio nella pagina del manuale che mostra come è fatto.

Tutto quello che dovete fare è questo:

$.ajax({ 
    data: $("form").serialize(), 
    //etc. 
}); 

dove "form" è l'ID del modulo.

+8

Non sono d'accordo sul fatto che il POST sia per il trasferimento di una grande quantità di dati quindi GET. Il POST serve a modificare lo stato del server con nuove informazioni. GET serve per recuperare una risorsa dal server. –

+0

Come è serialize() fatto? Mi sto prendendo cura delle sue prestazioni. – omg

+2

@ John: Sì, questa è l'intenzione principale di ciascuno. Tuttavia, non esiste un limite pratico alla dimensione di una richiesta POST, mentre le richieste GET hanno limiti noti che causano problemi quando superati. Suppongo che il mio uso della frase "specificatamente per" sia leggermente scorretto, poiché implica che quello è l'unico * scopo * del POST, che ovviamente non era l'interpretazione voluta. – zombat

1

Se non lo avete ancora provato. Quindi crea un modulo BIG (ora qualunque cosa tu voglia dire) e usa il plugin $.ajax() o jQuery Forms per postarlo. Saprai se è per questo tipo di cose o no!

MODIFICA: - (dopo la modifica) Quindi forms plugin è per voi! Dagli Un colpo.

+0

Sai come deciderà il contenuto dei post? Automaticamente (alcuni meccanismi predefiniti come quando inviamo il modulo) o controlliamo uno per uno? – omg

+0

@Shore hai detto che devi ** impostare manualmente i dati che è .. ** Questo invierà automaticamente tutti i campi nel modulo. È possibile serializzare un sottoinsieme di campi per interrogare la stringa. Si prega di controllare la loro documentazione qui: http: //malsup.com/jquery/form/ – TheVillageIdiot

6

È possibile utilizzare jQuery.post(url, data, callback, type), come più semplice per jQuery.ajax(options).

Utilizzando serialize, è possibile inviare automaticamente l'intero modulo.

$.post("/post_handler/", 
    $("form#my_form").serialize(), 
    function(json){ 
     /*your success code*/ 
    }, "json"); 

Un esempio più completo:

<script> 
$().ready(function(){ 
    $("form#my_form submit").click(function(){ 
     $.post("/post_handler/", 
      $("form#my_form").serialize(), 
      function(json){ 
       /*your success code*/ 
      }, "json"); 
     return false; 
    }); 
} 
</script> 
<form id="my_form" action="/post_handler/" method="post"> 
    <input type="text" name="text1" value="my text 1" /> 
    <input type="text" name="text2" value="my text 2" /> 
    <input type="submit" name="submit_button" value="Send" /> 
</form> 

Questo sarebbe ignorare l'impostazione predefinita post, ed eseguire con AJAX.

+0

Che dire di serialize() stesso? Come è fatto principalmente? – omg

+0

'$ (" form # my_form "). Serialize()' fornisce il contenuto di '

' pronto per essere inviato attraverso il filo in formato querystring ('multiple = Multiple2 & check = check2 & radio = radio1'). – voyager

+0

Parli di quello che mentre sto chiedendo come. – omg

10

Probabilmente si desidera utilizzare serialize se non si desidera gestire manualmente ciascun elemento.

$.ajax({ 
    type: "POST", 
    url: "form.php", 
    data: $("#form_id").serialize() 
    success: function(msg) { 
    alert("Form Submitted: " + msg); 
    } 
}); 
1

Ho inviato moduli piuttosto complessi (grandi) con $ .ajax() e non ha avuto problemi. Non ho inviato file su richieste Ajax, ma l'ho visto e funziona meglio dei post tradizionali perché non lega il browser durante il caricamento.

Sulla base del tuo commento a @zombat, suppongo che tu abbia un numero molto elevato di input, la maggior parte dei quali sarà vuota la maggior parte del tempo. Due suggerimenti qui 1) suddividere gli input in moduli separati e inviarli solo non appena viene toccato/completato. 2) esamina lo stato del tuo modulo con JavaScript e avvolgi le informazioni in JSON o XML e, invece di pubblicare i dati del modulo, pubblica solo la struttura dei dati.

"Large" non dovrebbe essere un problema, forse puoi trovare un aggettivo migliore per descrivere i tuoi dati che faranno sapere a tutti perché è difficile da inviare.

Problemi correlati