JSON biçiminde POST verileri

87

JSON biçimine dönüştürmem ve ardından JavaScript işleviyle POST yapmam gereken bazı verilerim var.

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

Gönderinin şu anki hali bu. Değerleri JSON formatında göndermesine ve POST'u JavaScript ile yapmasına ihtiyacım var.

— Damjan Pavlica
kaynak

JSON verileri hangi yapıya sahip olmalıdır? Sadece {"firstName":"harry", "lastName":"tester", "toEmail":"testtest@test.com"}mi?

— Gumbo

1

Evet, veriler tanımladığınız formatta olacaktır! cevaplar için teşekkürler!

173

JQuery isteyip istemediğinizden emin değilim.

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
kaynak

62

Bence bu, 100K çerçeve olmadan işin 20 satır kodda nasıl yapılacağına dair iyi, temiz ve öz bir örnek.

— spidee

1

@IanKuca Teşekkürler :) json verilerini urlencode olmadan veri gönderebilir miyiz acaba? Demek istediğim, "cmd":"<img src=0 onerror=alert(1)>"değil gibi veri göndermek istiyorum%3Cimg+src%3D0+onerror%3Dalert%281%29%3E

— tli2020

2

@liweijian Ne olursa olsun JSON.stringifygeri dönmelisiniz .

— JK

2

@IanKuca Görünüşe göre post verilerinin kodlaması html formdeğil JSON.stringify.

— tli2020

@liweijian, eğer durum buysa, önce form değerlerini urldecode etmeniz gerekir

— Kevin Peno

28

İşte jQuery kullanan bir örnek ...

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

JQuery serializeArray işlevi, form değerleriyle bir Javascript nesnesi oluşturur. Ardından , gerekirse bunu bir dizeye dönüştürmek için JSON.stringify kullanabilirsiniz . Ayrıca vücudunuzun yükünü de kaldırabilirsiniz.

— Josh Stodola
kaynak

2

Josh, jQuery'deki örnek aksini gösterir: JSON'dan çok standart bir sorgu dizesine benziyor.

— Sampson

4

Siz haklısınız. Cevabı buna göre güncelledim. Teşekkürler!

— Josh Stodola

7

Bu iyi bir örnek, ancak başlığa göre bu bir javascript kitaplığı değil javascript kullanılarak yapılmalıdır (bu durumda jQuery gibi)

— Juan Carlos Alpizar Chinchilla

4

Elbette bunu zor yoldan yapmaya hoş geldiniz. Diğer herkes jQuery kullanıyor.

— PaulMurrayCbr

9

Soru, verilerin jquery kitaplığını değil javascript kullanarak nasıl POST yapılacağını sorar . Bu yanlış soruyu yanıtlıyor.

— Blair Anderson

3

Başka bir örnek burada mevcuttur:

JQuery olmadan sunucuya bir JSON gönderme ve karşılığında bir JSON alma

Bu, jans yanıtıyla aynıdır, ancak aynı zamanda XMLHttpRequest üzerinde bir onreadystatechange geri çağrısı ayarlayarak sunucu yanıtını kontrol eder.

— andrew pate
kaynak

2

Yeni FormData nesnesini (ve diğer ES6 öğelerini) kullanarak, tüm formunuzu JSON'a dönüştürmek için bunu yapabilirsiniz:

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

ve sonra tıpkı xhr.send(JSON.stringify(data));Jan'ın orijinal cevabındaki gibi.

— Felk
kaynak

Bu işe yaramaz. Bir FormData nesneleri, JSON'a dizginleme yapmaz.

— Quentin