Dane POST w formacie JSON

86

Mam pewne dane, które muszę przekonwertować na format JSON, a następnie POST z funkcją 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>

Tak wygląda teraz post. Potrzebuję, aby przesłać wartości w formacie JSON i wykonać POST z JavaScript.

— Damjan Pavlica
źródło

Jaką strukturę powinny mieć dane JSON? Po prostu {"firstName":"harry", "lastName":"tester", "toEmail":"testtest@test.com"}?

— Gumbo

1

Tak, dane będą w formacie, który opisałeś! dzięki za odpowiedzi!

172

Nie jestem pewien, czy chcesz mieć 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
źródło

62

Myślę, że to dobry, przejrzysty, zwięzły przykład wykonania pracy w 20 wierszach kodu, bez 100 KB frameworka.

— spidee

1

@IanKuca Thanks :) Zastanawiałem się, czy możemy wysłać dane json bez urlencode danych? Chodzi mi o to, że chcę wysłać dane jak "cmd":"<img src=0 onerror=alert(1)>"nie%3Cimg+src%3D0+onerror%3Dalert%281%29%3E

— tli2020

2

@liweijian Powinieneś iść z czymkolwiek JSON.stringifyzwraca.

— JK

2

@IanKuca Wygląda na to, że dane postu zostały zakodowane przez html formnot JSON.stringify.

— tli2020

@liweijian musisz najpierw urldkodować wartości formularza, jeśli tak jest

— Kevin Peno

28

Oto przykład użycia 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>

Funkcja jQuery serializeArray tworzy obiekt Javascript z wartościami formularza. Następnie możesz użyć JSON.stringify, aby w razie potrzeby przekonwertować to na ciąg. Możesz też odciążyć swoje ciało.

— Josh Stodola
źródło

2

Josh, przykład w jQuery pokazuje inaczej: wygląda bardziej jak standardowy ciąg zapytania niż jak JSON.

— Sampson

4

Macie rację. Odpowiednio zaktualizowałem odpowiedź. Dzięki!

— Josh Stodola

7

To dobry przykład, jednak zgodnie z tytułem powinno to być wykonane przy użyciu javascript, a nie biblioteki javascript (jak w tym przypadku jQuery)

— Juan Carlos Alpizar Chinchilla

4

Możesz oczywiście zrobić to na własnej skórze. Wszyscy inni używają jQuery.

— PaulMurrayCbr

9

Pytanie dotyczy sposobu POST danych przy użyciu javascript , a nie biblioteki jquery. To odpowiada na złe pytanie.

— Blair Anderson

3

Inny przykład jest dostępny tutaj:

Wysyłanie JSON do serwera i pobieranie w zamian JSON, bez JQuery

To jest to samo, co odpowiedź jans, ale sprawdza również odpowiedź serwera, ustawiając wywołanie zwrotne onreadystatechange w XMLHttpRequest.

— pasztet z andrzeja
źródło

1

Używając nowego obiektu FormData (i innych rzeczy ES6), możesz to zrobić, aby przekształcić cały formularz w JSON:

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

a potem tak xhr.send(JSON.stringify(data));jak w oryginalnej odpowiedzi Jana.

— Felk
źródło

To nie zadziała. Obiekty FormData nie są przydatne do stringifikacji do formatu JSON.

— Quentin