Data POST dalam format JSON

Question 1

Saya memiliki beberapa data yang perlu saya ubah ke format JSON dan kemudian POST dengan fungsi 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>

Ini adalah tampilan postingan sekarang. Saya membutuhkannya untuk mengirimkan nilai dalam format JSON dan melakukan POST dengan JavaScript.

Question 2

Tidak yakin apakah Anda menginginkan 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

Berikut ini contoh menggunakan 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>

Fungsi jQuery serializeArray membuat objek Javascript dengan nilai formulir. Kemudian Anda dapat menggunakan JSON.stringify untuk mengubahnya menjadi string, jika perlu. Dan Anda juga dapat menghilangkan beban tubuh Anda.

Question 4

Contoh lain tersedia di sini:

Mengirim JSON ke server dan mengambil JSON sebagai gantinya, tanpa JQuery

Yang sama dengan jawaban jans, tetapi juga memeriksa respons server dengan menyetel callback onreadystatechange pada XMLHttpRequest.

Question 5

Menggunakan objek FormData baru (dan hal-hal ES6 lainnya), Anda dapat melakukan ini untuk mengubah seluruh formulir Anda menjadi JSON:

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

dan kemudian xhr.send(JSON.stringify(data));seperti dalam jawaban asli Jan.

Answer 1

87

Saya memiliki beberapa data yang perlu saya ubah ke format JSON dan kemudian POST dengan fungsi 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>

Ini adalah tampilan postingan sekarang. Saya membutuhkannya untuk mengirimkan nilai dalam format JSON dan melakukan POST dengan JavaScript.

javascript json post xmlhttprequest Damjan Pavlica
sumber

Struktur apa yang harus dimiliki data JSON? Hanya {"firstName":"harry", "lastName":"tester", "toEmail":"[email protected]"}?

Gumbo

1

Ya, datanya akan dalam format yang Anda jelaskan! terima kasih atas tanggapannya!

Answer 2

Struktur apa yang harus dimiliki data JSON? Hanya {"firstName":"harry", "lastName":"tester", "toEmail":"[email protected]"}?

Gumbo

Answer 3

1

Ya, datanya akan dalam format yang Anda jelaskan! terima kasih atas tanggapannya!

Answer 4

173

Tidak yakin apakah Anda menginginkan 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
sumber

62

Saya rasa ini adalah contoh yang bagus, bersih, dan ringkas tentang cara menyelesaikan pekerjaan dalam 20 baris kode, tanpa kerangka kerja 100K.

spidee

1

@IanKuca Terima kasih :) Saya ingin tahu apakah kami dapat mengirim data json tanpa urlencode datanya? Maksud saya, saya ingin mengirim data seperti "cmd":"<img src=0 onerror=alert(1)>"tidak%3Cimg+src%3D0+onerror%3Dalert%281%29%3E

tli2020

2

@liweijian Anda harus pergi dengan JSON.stringifyhasil apa pun .

JK

2

@IanKuca Tampaknya data posting dikodekan oleh html formtidak JSON.stringify.

tli2020

@liweijian Anda harus urldecode nilai formulir terlebih dahulu jika itu masalahnya

Kevin Peno

Answer 5

62

Saya rasa ini adalah contoh yang bagus, bersih, dan ringkas tentang cara menyelesaikan pekerjaan dalam 20 baris kode, tanpa kerangka kerja 100K.

spidee

Answer 6

1

@IanKuca Terima kasih :) Saya ingin tahu apakah kami dapat mengirim data json tanpa urlencode datanya? Maksud saya, saya ingin mengirim data seperti "cmd":"<img src=0 onerror=alert(1)>"tidak%3Cimg+src%3D0+onerror%3Dalert%281%29%3E

tli2020

Answer 7

2

@liweijian Anda harus pergi dengan JSON.stringifyhasil apa pun .

JK

Answer 8

2

@IanKuca Tampaknya data posting dikodekan oleh html formtidak JSON.stringify.

tli2020

Answer 9

@liweijian Anda harus urldecode nilai formulir terlebih dahulu jika itu masalahnya

Kevin Peno

Answer 10

28

Berikut ini contoh menggunakan 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>

Fungsi jQuery serializeArray membuat objek Javascript dengan nilai formulir. Kemudian Anda dapat menggunakan JSON.stringify untuk mengubahnya menjadi string, jika perlu. Dan Anda juga dapat menghilangkan beban tubuh Anda.

Josh Stodola
sumber

2

Josh, contoh di jQuery menunjukkan sebaliknya: Terlihat lebih seperti string kueri standar daripada seperti JSON.

Sampson

4

Kalian benar. Saya telah memperbarui jawabannya. Terima kasih!

Josh Stodola

7

Ini adalah contoh yang bagus, namun menurut judulnya ini harus dilakukan menggunakan javascript, bukan pustaka javascript (seperti jQuery dalam kasus ini)

Juan Carlos Alpizar Chinchilla

4

Anda, tentu saja, dipersilakan untuk melakukannya dengan cara yang sulit. Semua orang menggunakan jQuery.

PaulMurrayCbr

9

Pertanyaannya menanyakan bagaimana cara POST data menggunakan javascript , bukan perpustakaan jquery. Ini menjawab pertanyaan yang salah.

Blair Anderson

Answer 11

2

Josh, contoh di jQuery menunjukkan sebaliknya: Terlihat lebih seperti string kueri standar daripada seperti JSON.

Sampson

Answer 12

4

Kalian benar. Saya telah memperbarui jawabannya. Terima kasih!

Josh Stodola

Answer 13

7

Ini adalah contoh yang bagus, namun menurut judulnya ini harus dilakukan menggunakan javascript, bukan pustaka javascript (seperti jQuery dalam kasus ini)

Juan Carlos Alpizar Chinchilla

Answer 14

4

Anda, tentu saja, dipersilakan untuk melakukannya dengan cara yang sulit. Semua orang menggunakan jQuery.

PaulMurrayCbr

Answer 15

9

Pertanyaannya menanyakan bagaimana cara POST data menggunakan javascript , bukan perpustakaan jquery. Ini menjawab pertanyaan yang salah.

Blair Anderson

Answer 16

Contoh lain tersedia di sini:

Mengirim JSON ke server dan mengambil JSON sebagai gantinya, tanpa JQuery

Yang sama dengan jawaban jans, tetapi juga memeriksa respons server dengan menyetel callback onreadystatechange pada XMLHttpRequest.

Answer 17

2

Menggunakan objek FormData baru (dan hal-hal ES6 lainnya), Anda dapat melakukan ini untuk mengubah seluruh formulir Anda menjadi JSON:

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

dan kemudian xhr.send(JSON.stringify(data));seperti dalam jawaban asli Jan.

Felk
sumber

Itu tidak akan berhasil. Objek FormData tidak secara berguna dirangkai menjadi JSON.

Quentin

Answer 18

Itu tidak akan berhasil. Objek FormData tidak secara berguna dirangkai menjadi JSON.

Quentin

Data POST dalam format JSON

Jawaban: