Cum să preluați date POST dintr-un apel AJAX

Problemă

"Serializarea" este actul de a transforma un obiect de date într-o reprezentare sub formă de șir de caractere. jQuery serializează automat proprietatea data înainte de a trimite o cerere AJAX. Serverul apoi deserializează șirul de interogare GET din URL și corpul cererii pentru cererile POST înainte de a popula variabilele de cerere PHP.

Codul dvs. a funcționat conform așteptărilor atunci când data consta doar din datele serializate ale formularului (adică data: newFormRecherche,), deoarece datele erau deja într-un format de șir și, prin urmare, nu puteau fi serializate în continuare. Pasul de deserializare al serverului a analizat corect datele formularului în variabilele de cerere.

Cu toate acestea, când argumentul data este un obiect, jQuery trebuie să îl serializeze pentru a-l trimite către server. Ca proprietate a acelui obiect, datele dvs. pre-serializate ale formularului sunt tratate ca orice alt șir - mai precis, sunt escaponate într-un mod care să împiedice "confundarea" lor cu un obiect serializat. Deci, când serverul deserializează data, newFormRecherche este deserializat în valoarea pe care jQuery a primit-o inițial - adică un șir - și, prin urmare, necesită al doilea pas de deserializare la care @czerspalace a făcut referire în comentarii pentru a produce un tablou asociativ de date ale formularului.

Soluții

- jQuery

Pentru a preveni dubla serializare a datelor formularului, obțineți-le ca un tablou de perechi cheie/valoare în loc de un șir serializat, invocând metoda jQuery .serializeArray() pe elementul formular în loc de .serialize().

Deși jQuery este capabil să serializeze corect acest format de tablou cheie/valoare al data, se pare că întâmpină probleme atunci când un astfel de tablou este imbricat ca proprietate a unui obiect data (trimitând în schimb șirul '[object Object]' în locul fiecărei perechi cheie/valoare), precum și atunci când încearcă să imbriche un astfel de tablou cheie/valoare în altul. Prin urmare, cred că cel mai bun mod de a trimite datele formularului ca parte a unor date multidimensionale este să convertiți tabloul cheie/valoare într-un obiect.

Toate acestea pot fi făcute după cum urmează:

function ajaxSubmit() {
  var newFormRecherche = jQuery( this ).serializeArray();

  jQuery.ajax({
    type:"POST",
    data: { 
      action: "mon_action",
      newFormRecherche: formFieldsToObject( newFormRecherche )
    },
    url: ajaxurl,
    success: function( response ){
      console.log( response );
    }
  });

  return false;
}

function formFieldsToObject( fields ) {
  var product = {};

  for( var i = 0; i < fields.length; i++ ) {
    var field = fields[ i ];

    if( ! product.hasOwnProperty( field.name ) ) {
      product[ field.name ] = field.value;
    }
    else {
      if( ! product[ field.name ] instanceof Array )
        product[ field.name ] = [ product[ field.name ] ];

      product[ field.name ].push( field.value );
    }
  }

  return product;
}

- HTML5 FormData

Alternativ, dacă trebuie să suportați doar browsere moderne sau nu vă deranjează să încărcați un polifil pentru a suporta cele mai vechi, puteți folosi obiectul FormData pentru a trimite datele formularului ca un obiect de date propriu-zis:

function ajaxSubmit() {
  var newFormRecherche = new FormData( this );

  jQuery.ajax({
    type:"POST",
    data: { 
      action: "mon_action",
      newFormRecherche: newFormRecherche
    },
    url: ajaxurl,
    success: function( response ){
      console.log( response );
    }
  });

  return false;
}

- Deserializare Dublă pe Server

Așa cum sugerează @czerspalace în comentarii, contabilizarea dublei serializări prin simpla deserializare manuală a datelor formularului pe server este, de asemenea, o soluție complet validă:

add_action( 'wp_ajax_mon_action', 'mon_action' );
add_action( 'wp_ajax_nopriv_mon_action', 'mon_action' );

function mon_action() {
  if( isset( $_POST[ 'newFormRecherche' ] ) ) {
    parse_str( $_POST[ 'newFormRecherche' ], $newFormRecherche );
    die( json_encode( $newFormRecherche ) );
  }
}

Sunt înclinat să cred că celelalte abordări sunt mai "profesionale" prin faptul că toate datele trimise către server sunt ambalate într-un format consistent și așteptat - nu este necesară nicio "decodare" suplimentară din partea serverului, îmbunătățind modularitatea codului.

Dar modularitatea codului și "profesionalismul" subiectiv nu sunt întotdeauna cei mai importanți factori - uneori soluția cea mai simplă este cea mai potrivită.

Nu uitați să validați și să curățați datele cererii pe server înainte de a le folosi pentru a reduce vulnerabilitățile de securitate.