Dane POST w formacie JSON

Question 1

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="[email protected]" />
</form>
</body>

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

Question 2

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

Question 3

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.

Question 4

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.

Question 5

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.

Answer 1

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="[email protected]" />
</form>
</body>

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

javascript json post xmlhttprequest Damjan Pavlica
źródło

Jaką strukturę powinny mieć dane JSON? Po prostu {"firstName":"harry", "lastName":"tester", "toEmail":"[email protected]"}?

Gumbo

1

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

Answer 2

Jaką strukturę powinny mieć dane JSON? Po prostu {"firstName":"harry", "lastName":"tester", "toEmail":"[email protected]"}?

Gumbo

Answer 3

1

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

Answer 4

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

Answer 5

62

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

spidee

Answer 6

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

Answer 7

2

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

JK

Answer 8

2

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

tli2020

Answer 9

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

Kevin Peno

Answer 10

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

Answer 11

2

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

Sampson

Answer 12

4

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

Josh Stodola

Answer 13

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

Answer 14

4

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

PaulMurrayCbr

Answer 15

9

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

Blair Anderson

Answer 16

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.

Answer 17

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

Answer 18

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

Quentin

Dane POST w formacie JSON

Odpowiedzi: