JSON प्रारूप में POST डेटा

86

मेरे पास कुछ डेटा हैं जिन्हें मुझे JSON प्रारूप में बदलने की आवश्यकता है और फिर इसे एक जावास्क्रिप्ट फ़ंक्शन के साथ पोस्ट करें।

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

यह जिस तरह से अब पोस्ट दिखता है। मुझे इसकी आवश्यकता है JSON प्रारूप में मान सबमिट करें और जावास्क्रिप्ट के साथ POST करें।

— दज्जन पाव्लिका
स्रोत

JSON डेटा की क्या संरचना होनी चाहिए? बस {"firstName":"harry", "lastName":"tester", "toEmail":"testtest@test.com"}?

— गुमबो

1

हां, डेटा आपके द्वारा वर्णित प्रारूप में होगा! प्रतिक्रियाओं के लिए धन्यवाद!

172

यकीन नहीं होता अगर आप 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

मुझे लगता है कि यह कोड के 20 लाइनों में काम पाने के लिए एक अच्छा, स्वच्छ, संक्षिप्त उदाहरण है, 100K के फ्रेमवर्क के बिना।

— स्पिडे

1

@IanKuca धन्यवाद :) मैं सोच रहा था कि क्या हम डेटा को बिना urlencode के json डेटा भेज सकते हैं? मेरा मतलब है कि मैं डेटा "cmd":"<img src=0 onerror=alert(1)>"नहीं भेजना चाहता%3Cimg+src%3D0+onerror%3Dalert%281%29%3E

— tli2020

2

@liweijian आपको जो भी JSON.stringifyरिटर्न चाहिए, उसके साथ जाना चाहिए ।

— जेके

2

@IanKuca ऐसा लगता है कि पोस्ट डेटा html formनहीं द्वारा एन्कोड किया गया था JSON.stringify।

— tli2020

@liweijian आपको फॉर्म वैल्यू को पहले सेट करना होगा अगर ऐसा हो

— केविन पेनो

28

यहाँ 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>

JQuery serializeArray फ़ंक्शन प्रपत्र मानों के साथ एक जावास्क्रिप्ट ऑब्जेक्ट बनाता है। तब आप JSON.stringify का उपयोग कर सकते हैं , यदि आवश्यक हो तो इसे एक स्ट्रिंग में परिवर्तित करने के लिए। और आप अपने शरीर के भार को भी हटा सकते हैं।

— जोश स्टोडोला
स्रोत

2

जोश, jQuery पर उदाहरण अन्यथा दिखाता है: JSON की तुलना में मानक क्वेरी-स्ट्रिंग की तरह अधिक दिखता है।

— सैम्पसन

4

आप लोग सही हैं। मैंने उसी हिसाब से जवाब अपडेट किया है। धन्यवाद!

— जोश स्टोडोला

7

यह एक अच्छा उदाहरण है, हालांकि शीर्षक के अनुसार यह जावास्क्रिप्ट का उपयोग करके किया जाना चाहिए, एक जावास्क्रिप्ट पुस्तकालय नहीं (जैसे कि इस मामले में jQuery)

— जुआन कार्लोस अल्पीज़र चिनचिला

4

आप निश्चित रूप से, यह कठिन तरीका करने के लिए आपका स्वागत है। हर कोई jQuery का उपयोग करता है।

— पॉलमुर्रेब्रैन

9

सवाल पूछता है कि कैसे जावास्क्रिप्ट का उपयोग करके POST डेटा , न कि jquery लाइब्रेरी। यह गलत प्रश्न का उत्तर देता है।

— ब्लेयर एंडरसन

3

एक और उदाहरण यहाँ उपलब्ध है:

JSON को सर्वर पर भेजना और बदले में JSON प्राप्त करना, JQuery के बिना

जो कि jans उत्तर के समान है, लेकिन XMLHttpRequest पर एक onreadystatechange कॉलबैक सेट करके सर्वर की प्रतिक्रिया की भी जांच करता है।

— andrew pate
स्रोत

1

नए फॉर्मडाटा ऑब्जेक्ट (और अन्य ES6 सामान) का उपयोग करके , आप अपना संपूर्ण फॉर्म JSON में बदल सकते हैं:

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

और फिर xhr.send(JSON.stringify(data));जन के मूल उत्तर की तरह।

— Felk
स्रोत

यह काम नहीं करेगा। एक FormData ऑब्जेक्ट्स JSON के लिए उपयोगी रूप से कठोर नहीं है।

— क्वेंटिन