Data POST dalam format JSON


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="testtest@test.com" />
</form>
</body>

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


Struktur apa yang harus dimiliki data JSON? Hanya {"firstName":"harry", "lastName":"tester", "toEmail":"testtest@test.com"}?
Gumbo

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

Jawaban:


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

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

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.


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


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.


Itu tidak akan berhasil. Objek FormData tidak secara berguna dirangkai menjadi JSON.
Quentin
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.