jquery serialize e $ .post

Sto cercando di inviare molti dati da un modulo usando il metodo $ .post in jQuery. Ho usato prima la funzione serialize () per trasformare tutti i dati del form in una stringa lunga che poi esploderà sul lato server. La cosa strana è quando provo ad inviarlo usando $ .post accoda il risultato di serialize () all’URL come se lo stessi inviando usando GET. Qualcuno ha qualche idea del perché questo sta accadendo?

Ecco la jquery:

$("#addShowFormSubmit").click(function(){ var perfTimes = $("#addShowForm").serialize(); $.post("includes/add_show.php", {name: $("#showTitle").val(), results: perfTimes }, function(data) { $("#addShowSuccess").empty().slideDown("slow").append(data); }); }); 

ecco il php:

 $show = $_POST['name']; $results = $_POST['results']; $perfs = explode("&", $results); foreach($perfs as $perf) { $perf_key_values = explode("=", $perf); $key = urldecode($perf_key_values[0]); $values = urldecode($perf_key_values[1]); } echo $key, $values; 

Se stai usando un elemento per triggersre serialize e ajax, e se quell’elemento trova all’interno dell’elemento form , il button agirà automaticamente come una sottomodazione del form, indipendentemente da quale sia l’assegnazione .click assegnata con jQuery .

type = ‘submit’

e sono la stessa cosa. Presenteranno un modulo se inserito all’interno dell’elemento

.

type = ‘pulsante’

è diverso. È solo un pulsante normale e non invierà il modulo (a meno che non lo faccia di proposito per inviare il modulo tramite JavaScript).

E nel caso in cui un elemento del modulo non abbia specificato alcun attributo di azione, questo invio semplicemente rimanda i dati sulla stessa pagina. Così finirai per vedere un aggiornamento della pagina, insieme ai dati serializzati che appaiono nell’URL come se avessi usato GET nel tuo ajax.

Possibili soluzioni

1 – Fai il type. Come spiegato sopra, ciò impedirà al pulsante di inviare il modulo.

Prima:

 

Dopo:

 

2 – Sposta l’elemento all’esterno dell’elemento

. Ciò impedirà al pulsante di inviare il modulo.

Prima:

 

Dopo:

 

3 – Aggiungi in preventDefault() al gestore di clic del pulsante per impedire che il modulo venga inviato (è l’azione predefinita):

 $("#addShowFormSubmit").click(function(event){ event.preventDefault(); var perfTimes = $("#addShowForm").serialize(); $.post("includes/add_show.php", {name: $("#showTitle").val(), results: perfTimes }, function(data) { $("#addShowSuccess").empty().slideDown("slow").append(data); }); }); 

Ovviamente senza vedere tutto il tuo codice, non ho idea se questo è il tuo caso, ma l’unica ragione per cui ho mai visto il comportamento che stai descrivendo è perché il pulsante di invio era un senza un tipo specificato.

prova a usare serializeArray () invece di serialize (). serialize () produrrà una stringa di query con codifica url, mentre serializeArray () produce una struttura di dati JSON.

Cosa ti porta a credere che i dati siano aggiunti all’URL?

Ad ogni modo, non avrebbe più senso passare i valori del modulo nei dati del modulo stesso? Ti permetterà di saltare la fase di “esplosione”:

 $("#addShowFormSubmit") .click(function() { var perfTimes = $("#addShowForm").serialize(); $.post("includes/add_show.php", $.param({name: $("#showTitle").val()}) + "&" + perfTimes, function(data) {...}); }); 

Quindi questo è probabilmente un po ‘ottuso, ma ho fatto una funzione per aiutarmi a fare proprio questa cosa da quando mi sono stancato di fare un sacco di correzioni ogni volta. serializeArray è un po ‘fastidioso perché fornisce una collezione di oggetti, quando tutto quello che volevo fare ribuild PhP era un array associativo. La funzione seguente passerà attraverso l’array serializzato e costruirà un nuovo object con le proprietà appropriate solo quando esiste un valore.

Innanzitutto, la funzione (prende l’ID del modulo in questione):

 function wrapFormValues(form) { form = "#" + form.attr("id") + " :input"; form = $(form).serializeArray(); var dataArray = new Object(); for( index in form) { if(form[index].value) { dataArray[form[index].name] = form[index].value; } } return dataArray; } 

Quando costruisco i miei post di solito uso anche un object poiché di solito taggo su due o tre altri valori prima dei dati del modulo e penso che sia più pulito che definirlo in linea, quindi il passaggio finale è simile al seguente:

 var payload = new Object(); //stringify requires json2.js from http://www.json.org/js.html payload.data = JSON.stringify(data); $.post("page.php", payload, function(reply) { //deal with reply. }); 

Lato server tutto quello che devi fare è $payload = json_decode($_POST['data'], true) e tu hai un array associativo in cui le chiavi sono i nomi dei campi del modulo.

Tuttavia, in caso di selezioni multiple, probabilmente non funzionerà qui, probabilmente si otterrà solo il valore ultimo nell’elenco. Questo è anche creato in modo molto specifico per soddisfare uno dei miei progetti, quindi potresti volerlo ritoccare per te. Ad esempio, io uso JSON per tutte le mie risposte dal server.

Prova questa syntax. Lo uso per serializzare un modulo e POST tramite una chiamata ajax al servizio WCF. Inoltre, puoi inviare a questo un singolo object JSON invece di build l’object come sei. Prova questo:

 var serializedForm = serializedForm = $("#addShowForm").serializeArray(); $.post("includes/add_show.php", { "myObjectName": ("#showTitle").val(), results: perfTimes }, function(data) { $("#addShowSuccess").empty() .slideDown("slow") .append(JSON.stringify(serializedForm)); }); 

Dal lato php, potresti voler esaminare parse_str . Analizzerà la stringa url in variabili o in una matrice se si utilizza il 2 ° parametro opzionale.

Un altro motivo in più per questo problema: se si dispone di un modulo senza alcuna azione di invio assegnato, ogni volta che si preme il tasto “INVIO” durante la compilazione del modulo, il modulo verrà inviato all’URL corrente, quindi vedere i dati serializzati visualizzati nell’URL come se si stesse utilizzando una transazione GET ajax. Una soluzione semplice a questo problema, impedisce semplicemente a INVIO di inviare il modulo quando viene premuto:

 //Prevent Form Submission when Pressing Enter $("form").bind("keypress", function(e) { if (e.keyCode == 13) return false; });