Dados POST em formato JSON

86

Tenho alguns dados que preciso converter para o formato JSON e, em seguida, fazer um POST com uma função JavaScript.

<body onload="javascript:document.myform.submit()">
<form action="https://www.test.net/Services/RegistrationService.svc/InviteNewContact" method="post" name="myform">
  <input name="firstName" value="harry" />
  <input name="lastName" value="tester" />
  <input name="toEmail" value="testtest@test.com" />
</form>
</body>

Esta é a forma como a postagem está agora. Preciso enviar os valores no formato JSON e fazer o POST com JavaScript.

— Damjan Pavlica
fonte

Que estrutura os dados JSON devem ter? Apenas {"firstName":"harry", "lastName":"tester", "toEmail":"testtest@test.com"}?

— Gumbo

1

Sim, os dados estariam no formato que você descreveu! obrigado pelas respostas!

172

Não tenho certeza se você deseja jQuery.

var form;

form.onsubmit = function (e) {
  // stop the regular form submission
  e.preventDefault();

  // collect the form data while iterating over the inputs
  var data = {};
  for (var i = 0, ii = form.length; i < ii; ++i) {
    var input = form[i];
    if (input.name) {
      data[input.name] = input.value;
    }
  }

  // construct an HTTP request
  var xhr = new XMLHttpRequest();
  xhr.open(form.method, form.action, true);
  xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');

  // send the collected data as JSON
  xhr.send(JSON.stringify(data));

  xhr.onloadend = function () {
    // done
  };
};

— JK
fonte

62

Acho que este é um exemplo bom, claro e conciso de como fazer o trabalho em 20 linhas de código, sem 100K de estrutura.

— spidee

1

@IanKuca Obrigado :) Eu queria saber se podemos enviar os dados json sem urlencode os dados? Quero dizer, quero enviar dados como "cmd":"<img src=0 onerror=alert(1)>"não%3Cimg+src%3D0+onerror%3Dalert%281%29%3E

— tli2020

2

@liweijian Você deve ir com tudo que JSON.stringifyretorna.

— JK

2

@IanKuca Parece que os dados do post foram codificados por html formnot JSON.stringify.

— tli2020

@liweijian, você precisará codificar os valores do formulário primeiro se for esse o caso

— Kevin Peno

28

Aqui está um exemplo usando jQuery ...

 <head>
   <title>Test</title>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
   <script type="text/javascript" src="http://www.json.org/json2.js"></script>
   <script type="text/javascript">
     $(function() {
       var frm = $(document.myform);
       var dat = JSON.stringify(frm.serializeArray());

       alert("I am about to POST this:\n\n" + dat);

       $.post(
         frm.attr("action"),
         dat,
         function(data) {
           alert("Response: " + data);
         }
       );
     });
   </script>
</head>

A função jQuery serializeArray cria um objeto Javascript com os valores do formulário. Em seguida, você pode usar JSON.stringify para convertê-lo em uma string, se necessário. E você também pode remover seu corpo durante a carga.

— Josh Stodola
fonte

2

Josh, o exemplo em jQuery mostra o contrário: parece mais uma string de consulta padrão do que JSON.

— Sampson

4

Vocês estão certos. Eu atualizei a resposta de acordo. Obrigado!

— Josh Stodola

7

Este é um bom exemplo, no entanto, de acordo com o título, isso deve ser feito usando javascript, não uma biblioteca javascript (como jQuery neste caso)

— Juan Carlos Alpizar Chinchilla

4

Você é, é claro, bem-vindo para fazer isso da maneira mais difícil. Todos os outros usam jQuery.

— PaulMurrayCbr

9

A questão pergunta como fazer o POST de dados usando javascript , não a biblioteca jquery. Isso responde à pergunta errada.

— Blair Anderson de

3

Outro exemplo está disponível aqui:

Enviando um JSON para o servidor e recuperando um JSON em troca, sem JQuery

Que é o mesmo que a resposta de jans, mas também verifica a resposta dos servidores definindo um retorno de chamada onreadystatechange no XMLHttpRequest.

— andrew pate
fonte

1

Usando o novo objeto FormData (e outras coisas ES6), você pode fazer isso para transformar todo o seu formulário em JSON:

let data = {};
let formdata = new FormData(theform);
for (let tuple of formdata.entries()) data[tuple[0]] = tuple[1];

e então, xhr.send(JSON.stringify(data));como na resposta original de Jan.

— Felk
fonte

Isso não vai funcionar. Objetos FormData não são utilmente stringificados em JSON.

— Quentin