Come inviare un object JSON utilizzando i dati del modulo html

Quindi ho questo modulo HTML:

 test  

Quale sarebbe il modo più semplice per inviare i dati di questo modulo come object JSON al mio server quando un utente fa clic su Invia?

AGGIORNAMENTO: mi sono spinto fino a qui ma non sembra funzionare:

  function submitform(){ alert("Sending Json"); var xhr = new XMLHttpRequest(); xhr.open(form.method, form.action, true); xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); var j = { "first_name":"binchen", "last_name":"heris", }; xhr.send(JSON.stringify(j)); 

Che cosa sto facendo di sbagliato?

Ottieni i dati completi del modulo come array e json lo stringa.

 var formData = JSON.stringify($("#myForm").serializeArray()); 

Puoi usarlo più tardi in ajax. O se non stai usando un jax; metterlo in textarea nascosta e passare al server. Se questi dati vengono passati come stringa json tramite normali dati del modulo, è necessario decodificarlo utilizzando json_decode . Otterrai quindi tutti i dati in un array.

 $.ajax({ type: "POST", url: "serverUrl", data: formData, success: function(){}, dataType: "json", contentType : "application/json" }); 

HTML non fornisce alcun modo per generare JSON dai dati del modulo.

Se vuoi davvero gestirlo dal client, dovresti ricorrere all’utilizzo di JavaScript per:

  1. raccogli i tuoi dati dal modulo tramite DOM
  2. organizzalo in un object o array
  3. genera JSON con JSON.stringify
  4. Pubblicalo con XMLHttpRequest

Probabilmente staresti meglio ad attaccare ai dati application/x-www-form-urlencoded e ad elaborarli sul server invece che su JSON. Il tuo modulo non ha alcuna gerarchia complicata che trarrebbe beneficio da una struttura di dati JSON.


Aggiornamento in risposta alla grande riscrittura della domanda …

  • Il tuo JS non ha un gestore di readystatechange , quindi non fai nulla con la risposta
  • Si triggers il JS quando si fa clic sul pulsante di invio senza annullare il comportamento predefinito. Il browser invierà il modulo (nel modo normale) non appena la funzione JS sarà completa.