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.

— Damjan Pavlica
sumber

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!

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

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

3

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.

— andrew pate
sumber

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