Come inviare un oggetto JSON utilizzando i dati del modulo html

129

Quindi ho questo modulo HTML:

<html>
<head><title>test</title></head>
<body>
    <form action="myurl" method="POST" name="myForm">
        <p><label for="first_name">First Name:</label>
        <input type="text" name="first_name" id="fname"></p>

        <p><label for="last_name">Last Name:</label>
        <input type="text" name="last_name" id="lname"></p>

        <input value="Submit" type="submit" onclick="submitform()">
    </form>
</body>
</html>

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

AGGIORNAMENTO: Sono arrivato fino a questo punto, ma non sembra funzionare:

<script type="text/javascript">
    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?

— kstratis
fonte

1

Dai un'occhiata $.ajaxe serializenell'API jQuery.

— Rory McCrossan,

1

Deve assolutamente essere un oggetto JSON? Quale struttura dovrebbe avere l'oggetto?

— Anthony Grist,

1

@AnthonyGrist Sì, deve essere una JSON perché è indirizzata verso un servizio ReST.

— kstratis,

4

Cosa significa "non sembra funzionare"? Ricorda, non possiamo vedere il tuo schermo.

— Dour High Arch,

2

@ Konos5 - REST non ha nulla a che fare con JSON. Non richiede che i dati siano in alcun formato particolare.

— Daniel

136

Ottieni dati di modulo completi come array e json li stringono.

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

Puoi usarlo più tardi in Ajax. O se non stai usando Ajax; mettilo in textarea nascosta e passa al server. Se questi dati vengono passati come stringa json tramite i normali dati del modulo, è necessario decodificarli 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"
});

— SachinGutte
fonte

4

Hai taggato la domanda con jQuery. Quindi lo stai usando? con $.ajaxè davvero facile passare questi dati.

— SachinGutte

51

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

Se vuoi davvero gestirlo dal client, allora dovresti ricorrere all'uso di JavaScript per:

raccogliere i dati dal modulo tramite DOM
organizzarlo in un oggetto o un array
generare JSON con JSON.stringify
POST con XMLHttpRequest

Probabilmente sarebbe meglio attenersi ai application/x-www-form-urlencodeddati ed elaborarli sul server anziché su JSON. Il modulo non ha una gerarchia complicata che trarrebbe vantaggio da una struttura di dati JSON.

Aggiornamento in risposta alla riscrittura principale della domanda ...

Il tuo JS non ha un readystatechangegestore, quindi non fai nulla con la risposta
Si attiva JS quando si fa clic sul pulsante di invio senza annullare il comportamento predefinito. Il browser invierà il modulo (in modo regolare) non appena la funzione JS sarà completa.

— Quentin
fonte

1

OK, quindi come posso risolvere questo problema?

— kstratis,

1

@Quentin: Nel mio caso ho bisogno di un POST interdominio senza controllo del dominio.

— user2284570,

1

@ user2284570 - Se si dispone di una nuova domanda, quindi chiedere uno.

— Quentin,

1

C'è una proposta da aggiungere enctype='application/json'alla definizione del modulo per creare dati JSON w3.org/TR/html-json-forms

— EkriirkE

4

@EkriirkE - Hai letto quella pagina? Dice che, in una scatola enorme con una striscia di pericolo nera e gialla attorno, fai attenzione. Questa specifica non è più in manutenzione attiva e il gruppo di lavoro HTML non intende mantenerla ulteriormente.

— Quentin,

3

il codice è corretto ma mai eseguito, causa del pulsante submit [type = "submit"] sostituiscilo semplicemente con type = button

<input value="Submit" type="button" onclick="submitform()">

all'interno della tua sceneggiatura; il modulo non è dichiarato.

let form = document.forms[0];
xhr.open(form.method, form.action, true);

— tdjprog
fonte

Esattamente type = "button" è molto importante, se non lo utilizza, reindirizza con i parametri url.

— Rohit Parte,

1

Sono in ritardo, ma devo dire che per chi ha bisogno di un oggetto, usando solo HTML, c'è un modo. In alcuni framework lato server come PHP puoi scrivere il seguente codice:

<form action="myurl" method="POST" name="myForm">
        <p><label for="first_name">First Name:</label>
        <input type="text" name="name[first]" id="fname"></p>

        <p><label for="last_name">Last Name:</label>
        <input type="text" name="name[last]" id="lname"></p>

        <input value="Submit" type="submit">
    </form>

Quindi, abbiamo bisogno di impostare il nome dell'input come object[property]per ottenere un oggetto. Nell'esempio sopra, abbiamo ottenuto un dato con il seguente JSON:

{
"name": {
  "first": "some data",
  "last": "some data"
 }
}

— orafaelreis
fonte