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


115

मुझे JSON भेजने की आवश्यकता है (जिसे मैं स्ट्रिंग कर सकता हूं) सर्वर पर और परिणामी JSON को पुनः प्राप्त करने के लिए, JQuery का उपयोग किए बिना।

अगर मुझे GET का उपयोग करना चाहिए, तो मैं JSON को एक पैरामीटर के रूप में कैसे पास करूं? क्या कोई जोखिम है जो बहुत लंबा होगा?

यदि मुझे एक POST का उपयोग करना चाहिए, तो मैं onloadGET में एक फ़ंक्शन के बराबर कैसे सेट करूं ?

या मुझे एक अलग विधि का उपयोग करना चाहिए?

REMARK

यह सवाल एक साधारण AJAX भेजने के बारे में नहीं है। इसे नकल के रूप में बंद नहीं किया जाना चाहिए।


आपको उपयोग करने की आवश्यकता है XMLHttpRequest। नाम के बावजूद, आप JSON डेटा के लिए इसका उपयोग कर सकते हैं (और यह वास्तव में पृष्ठभूमि में jQuery कैसे करता है)।
elixenide

2
मैं डेटा पोस्ट करूंगा। : इस पर एक नज़र डालें youmightnotneedjquery.com । यह दिखाता है कि आप वैनिला जेएस के साथ डेटा कैसे प्राप्त / पोस्ट कर सकते हैं।
हकुरहफ

1
@ ईडी कॉटरेल संदर्भित प्रश्न का इससे कोई लेना-देना नहीं है। संदर्भ (JUST) sendingएक अजाक्स अनुरोध के बारे में ले रहा है , जो काफी सामान्य बात है। यह कोई भी sendingलेकिन receiving JSONशुद्ध जावास्क्रिप्ट के लिए पूछ रहा है । इसके अलावा, इस JSON को वापस भेजने के लिए, आपको यह जानना होगा कि समस्या के इस भाग को कैसे हल किया जाए, server-sideजिस पर संदर्भित प्रश्न पर उल्लेखित नहीं है।
hex494D49

1
@ ईडी कॉटरेल आपके द्वारा संदर्भित प्रश्न का स्वीकृत उत्तर नहीं है और अजाक्स अनुरोध बनाने के लिए पुराने तरीकों का उपयोग करता है। यह इस प्रश्न का पूर्ण उत्तर प्रदान नहीं करता है। मेरा प्रश्न पारंपरिक अजाक्स POST या GET की तुलना में अधिक सूक्ष्म है। तुम चूक गए।
जेरेमे वर्स्ट्रीनेज

1
@JVstry onreadystatechangeका उपयोग आप अनुकरण करने के लिए करते हैं onload, जैसा कि नीचे दिए गए उत्तर द्वारा दिखाया गया है। पार्स करने के लिए, आप बस JSON.parse()(फिर से, जैसा कि उत्तर में दिखाया गया है) का उपयोग करते हैं, लेकिन मैं यह मान रहा था कि आप पहले से ही जानते थे कि जब से आपने प्रश्न में स्ट्रिंग का उल्लेख किया है। मैंने आपको इन बिंदुओं को कवर करने के लिए 1 नहीं बल्कि 2 प्रश्नों की ओर इशारा करते हुए आपकी मदद करने की कोशिश की है। स्पष्ट रूप से कुछ अंतर है - शायद ही कभी 2 प्रश्न बिल्कुल समान हैं - लेकिन यह तुच्छ है यदि आप पहले से ही जानते हैं कि जौन को कैसे कठोर और पार्स करना है। उस ने कहा, जब से तुम और @ hex494D49 असहमत हैं, मैं इसे फिर से खोलने के लिए नामांकित कर रहा हूं।
15

जवाबों:


221

पोस्ट विधि का उपयोग करके JSON प्रारूप में डेटा भेजना और प्राप्त करना

// Sending and receiving data in JSON format using POST method
//
var xhr = new XMLHttpRequest();
var url = "url";
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var json = JSON.parse(xhr.responseText);
        console.log(json.email + ", " + json.password);
    }
};
var data = JSON.stringify({"email": "hey@mail.com", "password": "101010"});
xhr.send(data);

GET विधि का उपयोग करके JSON प्रारूप में डेटा भेजना और प्राप्त करना

// Sending a receiving data in JSON format using GET method
//      
var xhr = new XMLHttpRequest();
var url = "url?data=" + encodeURIComponent(JSON.stringify({"email": "hey@mail.com", "password": "101010"}));
xhr.open("GET", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var json = JSON.parse(xhr.responseText);
        console.log(json.email + ", " + json.password);
    }
};
xhr.send();

PHP का उपयोग कर सर्वर-साइड पर JSON प्रारूप में डेटा को संभालना

<?php
// Handling data in JSON format on the server-side using PHP
//
header("Content-Type: application/json");
// build a PHP variable from JSON sent using POST method
$v = json_decode(stripslashes(file_get_contents("php://input")));
// build a PHP variable from JSON sent using GET method
$v = json_decode(stripslashes($_GET["data"]));
// encode the PHP variable to JSON and send it back on client-side
echo json_encode($v);
?>

HTTP गेट अनुरोध की लंबाई की सीमा 2kB - 8kB से उपयोग किए जाने वाले सर्वर और क्लाइंट (ब्राउज़र) दोनों पर निर्भर है। सर्वर 414 (रिक्वेस्ट-यूआरआई टू लॉन्ग) स्टेटस वापस करना चाहिए, यदि कोई यूआरआई सर्वर को हैंडल करने से अधिक लंबा है।

नोट किसी ने कहा कि मैं राज्य मूल्यों के बजाय राज्य के नाम का उपयोग कर सकता हूं; दूसरे शब्दों में, मैं समस्या के xhr.readyState === xhr.DONEबजाय उपयोग कर सकता था xhr.readyState === 4कि इंटरनेट एक्सप्लोरर विभिन्न राज्य नामों का उपयोग करता है, इसलिए राज्य मूल्यों का उपयोग करना बेहतर है।


4
होना चाहिए xhr.status === 200
गिना हुआ

मैं उसी कोड का उपयोग RSON API पर होस्ट करने के लिए JSON डेटा पोस्ट करने के लिए कर रहा हूं, जिसे लोकलहोस्ट किया गया है, लेकिन त्रुटि मिल रही हैXHR failed loading: POST
viveksinghggits

@viveksinghggits सबसे पहले, देखें कि ऊपर से कोड आपके लोकलहोस्ट पर काम करता है या नहीं। यदि यह करता है (और यह काम करना चाहिए) तो समस्या आपके सर्वर की तरफ कहीं होनी चाहिए; अगर ऐसा नहीं है, तो मुझे बताएं और मैं इसकी जांच करूंगा। इस तरह, आपके कोड का कुछ भी नहीं होने से, मैं आपकी मदद नहीं कर सकता।
hex494D49

@ hex494D49 आपकी प्रतिक्रिया के लिए बहुत आभारी हूं, मैं वास्तव में फॉर्म की सबमिट कार्रवाई पर एक्सएचआर को निकाल रहा था, जब मैंने इसे एक क्लिक इवेंट द्वारा निकाल दिया गया था। मुझे CORS त्रुटि मिली, यह समझ में आता है और मैं इसके लिए अपना सर्वर साइड कोड बदल रहा हूं। मैंने इसके बारे में यहाँ माध्यम से लिखा है : .com
viveksinghggits

6

नई एपीआई लाने का उपयोग :

const dataToSend = JSON.stringify({"email": "hey@mail.com", "password": "101010"});
let dataReceived=""; 
fetch("",{credentials:'same-origin',mode:'same-origin',method:"post",body:dataToSend})
              .then(resp => {
                if(resp.status==200){
                   return resp.json()
                }else{
                    console.log("Status: "+resp.status);
                    return Promise.reject("server")
                }
              })
           .then(dataJson =>{
                 dataReceived = JSON.parse(dataJson);
             })
              .catch(err =>{
                if(err=="server")return
                console.log(err);
            })
            
 console.log(`Received: ${dataReceived}`)                
जब सर्वर 200 (ओके) के बजाय अन्य स्थिति भेजता है, तो आपको उस परिणाम को अस्वीकार करना चाहिए क्योंकि यदि आप इसे खाली में छोड़ देते हैं, तो यह जसन को पार्स करने की कोशिश करेगा लेकिन ऐसा नहीं है, इसलिए यह एक त्रुटि फेंक देगा


1
आप JSON.stringifyदो बार उपयोग कर रहे हैं ।
शुकांत पाल
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.