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?

— 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

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:

reunir seus dados do formulário via DOM
organizá-lo em um objeto ou matriz
gerar JSON com JSON.stringify
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