Como enviar um objeto JSON usando dados de formulário html

129

Então, eu tenho este formulário 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>

Qual seria a maneira mais fácil de enviar os dados deste formulário como um objeto JSON para o meu servidor quando um usuário clica em enviar?

UPDATE: Eu fui tão longe quanto isso, mas não parece funcionar:

<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));

O que estou fazendo de errado?

javascript jquery html json forms kstratis
fonte
1
Dê uma olhada $.ajaxe serializena API jQuery.
Rory McCrossan
1
É absolutamente necessário que seja um objeto JSON? Que estrutura o objeto deve ter?
Anthony Grist
1
@AnthonyGrist Sim, deve ser um JSON, pois é direcionado a um serviço ReST.
precisa saber é o seguinte
4
O que significa "não parece funcionar"? Lembre-se, não podemos ver sua tela.
Dour High Arch
2
@ Konos5 - REST não tem nada a ver com JSON. Não requer que os dados estejam em nenhum formato específico.
Danielm 1/10

Respostas:

136

Obtenha dados completos do formulário como array e json stringify.

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

Você pode usá-lo mais tarde no ajax. Ou se você não estiver usando ajax; coloque-o na área de texto oculta e passe para o servidor. Se esses dados são transmitidos como string json por meio de dados de formulário normais, você deve decodificá-lo usando json_decode . Você receberá todos os dados em uma matriz.

$.ajax({
  type: "POST",
  url: "serverUrl",
  data: formData,
  success: function(){},
  dataType: "json",
  contentType : "application/json"
});
SachinGutte
fonte
4
Você marcou a pergunta com jQuery. Então você está usando? com $.ajaxisso é realmente fácil passar esses dados.
precisa saber é o seguinte
51

HTML não fornece nenhuma maneira de gerar JSON a partir de dados do formulário.

Se você realmente deseja lidar com isso no cliente, precisará recorrer ao JavaScript para:

  1. reunir seus dados do formulário via DOM
  2. organizá-lo em um objeto ou matriz
  3. gerar JSON com JSON.stringify
  4. POST-lo com XMLHttpRequest

Você provavelmente preferiria manter os application/x-www-form-urlencodeddados e processá- los no servidor, em vez de JSON. Seu formulário não possui nenhuma hierarquia complicada que se beneficiaria de uma estrutura de dados JSON.

Atualização em resposta à grande reescrita da pergunta…

  • Seu JS não possui readystatechangemanipulador, portanto você não faz nada com a resposta
  • Você aciona o JS quando o botão Enviar é clicado sem cancelar o comportamento padrão. O navegador enviará o formulário (normalmente) assim que a função JS for concluída.
Quentin
fonte
1
OK, então como faço para corrigir isso?
kstratis
1
@ Quentin: No meu caso, eu preciso de POST entre domínios sem controle de domínio.
user2284570
1
@ user2284570 - Se você tiver uma nova pergunta, faça uma.
Quentin
1
Há uma proposta para adicionar enctype='application/json'à definição de formulário para criar dados JSON w3.org/TR/html-json-forms
EkriirkE
4
@EkriirkE - Você leu essa página? Diz, em uma caixa enorme com uma faixa de perigo preta e amarela ao redor . Cuidado. Essa especificação não está mais em manutenção ativa e o HTML Working Group não pretende mantê-la ainda mais.
Quentin
3

seu código está correto, mas nunca executado, causa do botão de envio [type = "submit"] basta substituí-lo pelo tipo = botão

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

dentro do seu script; formulário não é declarado.

let form = document.forms[0];
xhr.open(form.method, form.action, true);
tdjprog
fonte
Exatamente type = "button" é muito importante; caso contrário, ele será redirecionado com parâmetros de URL.
Rohit Parte
1

Estou atrasado, mas preciso dizer para quem precisa de um objeto, usando apenas html, há uma maneira. Em algumas estruturas do lado do servidor, como PHP, você pode escrever o seguinte código:

<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>

Portanto, precisamos configurar o nome da entrada como object[property]para obter um objeto. No exemplo acima, obtivemos dados com o seguinte JSON:

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