शुद्ध जावास्क्रिप्ट फॉर्म के बिना POST डेटा भेजें


141

क्या बिना फॉर्म के और केवल शुद्ध जावास्क्रिप्ट (jQuery के नहीं $.post()) का उपयोग करके पेज को रीफ्रेश किए बिना डेटा भेजने का एक तरीका है ? शायद httprequestया कुछ और (अभी नहीं मिल सकता है)?


1
XMLHttpRequest का उत्तर है ... $ पोस्ट हूड के तहत समान का उपयोग करता है।
चंदू

जवाबों:


140

आप इसे भेज सकते हैं और डेटा को शरीर में डाल सकते हैं:

var xhr = new XMLHttpRequest();
xhr.open("POST", yourUrl, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
    value: value
}));

वैसे, अनुरोध प्राप्त करने के लिए:

var xhr = new XMLHttpRequest();
// we defined the xhr

xhr.onreadystatechange = function () {
    if (this.readyState != 4) return;

    if (this.status == 200) {
        var data = JSON.parse(this.responseText);

        // we get the returned data
    }

    // end of state change: it can be after some time (async)
};

xhr.open('GET', yourUrl, true);
xhr.send();

2
Xhr.open में असली बूलियन चर क्या है?
हिलेले


68

[2017 में लेखन के समय नया-ईश] Fetch API GET अनुरोधों को आसान बनाने के लिए है, लेकिन यह POST के रूप में भी सक्षम है।

let data = {element: "barium"};

fetch("/post/data/here", {
  method: "POST", 
  body: JSON.stringify(data)
}).then(res => {
  console.log("Request complete! response:", res);
});

यदि आप मेरे जैसे आलसी हैं (या सिर्फ शॉर्टकट / सहायक चाहते हैं):

window.post = function(url, data) {
  return fetch(url, {method: "POST", body: JSON.stringify(data)});
}

// ...

post("post/data/here", {element: "osmium"});

54

आप XMLHttpRequestवस्तु का उपयोग इस प्रकार कर सकते हैं :

xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
xhr.send(someStuff);

यही कारण है कि कोड पोस्ट करेंगे someStuffकरने के लिए url। बस यह सुनिश्चित करें कि जब आप अपना XMLHttpRequestऑब्जेक्ट बनाते हैं , तो यह क्रॉस-ब्राउज़र संगत होगा। वहाँ अंतहीन उदाहरण हैं कि कैसे करना है।


1
आप के लिए एक उदाहरण लिख सकते हैं someStuff?
फ्लोरेसेंटग्रीन 5

4
someStuff = 'param1 = val1 & param2 = val2 & par33 = val3'
ऊंट

1
यह एक अच्छा जवाब है, और someStuffकुछ भी हो सकता है जिसे आप एक साधारण स्ट्रिंग भी चाहते हैं। आप ऑनलाइन सेवाओं जैसे मेरे व्यक्तिगत पसंदीदा: ( requestb.in ) का उपयोग करके अनुरोध की जांच कर सकते हैं
जेम्सको

application/x-www-form-urlencodedMIME प्रकार एक नहीं है charset: पैरामीटर iana.org/assignments/media-types/application/...
JBG

29

इसके अलावा, Restful आपको डेटा प्राप्त करने देता है POST अनुरोध से वापस

जेएस (पायथन के माध्यम से सेवा करने के लिए स्थैतिक / hello.html में डालें):

<html><head><meta charset="utf-8"/></head><body>
Hello.

<script>

var xhr = new XMLHttpRequest();
xhr.open("POST", "/postman", true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
    value: 'value'
}));
xhr.onload = function() {
  console.log("HELLO")
  console.log(this.responseText);
  var data = JSON.parse(this.responseText);
  console.log(data);
}

</script></body></html>

पायथन सर्वर (परीक्षण के लिए):

import time, threading, socket, SocketServer, BaseHTTPServer
import os, traceback, sys, json


log_lock           = threading.Lock()
log_next_thread_id = 0

# Local log functiondef


def Log(module, msg):
    with log_lock:
        thread = threading.current_thread().__name__
        msg    = "%s %s: %s" % (module, thread, msg)
        sys.stderr.write(msg + '\n')

def Log_Traceback():
    t   = traceback.format_exc().strip('\n').split('\n')
    if ', in ' in t[-3]:
        t[-3] = t[-3].replace(', in','\n***\n***  In') + '(...):'
        t[-2] += '\n***'
    err = '\n***  '.join(t[-3:]).replace('"','').replace(' File ', '')
    err = err.replace(', line',':')
    Log("Traceback", '\n'.join(t[:-3]) + '\n\n\n***\n*** ' + err + '\n***\n\n')

    os._exit(4)

def Set_Thread_Label(s):
    global log_next_thread_id
    with log_lock:
        threading.current_thread().__name__ = "%d%s" \
            % (log_next_thread_id, s)
        log_next_thread_id += 1


class Handler(BaseHTTPServer.BaseHTTPRequestHandler):

    def do_GET(self):
        Set_Thread_Label(self.path + "[get]")
        try:
            Log("HTTP", "PATH='%s'" % self.path)
            with open('static' + self.path) as f:
                data = f.read()
            Log("Static", "DATA='%s'" % data)
            self.send_response(200)
            self.send_header("Content-type", "text/html")
            self.end_headers()
            self.wfile.write(data)
        except:
            Log_Traceback()

    def do_POST(self):
        Set_Thread_Label(self.path + "[post]")
        try:
            length = int(self.headers.getheader('content-length'))
            req   = self.rfile.read(length)
            Log("HTTP", "PATH='%s'" % self.path)
            Log("URL", "request data = %s" % req)
            req = json.loads(req)
            response = {'req': req}
            response = json.dumps(response)
            Log("URL", "response data = %s" % response)
            self.send_response(200)
            self.send_header("Content-type", "application/json")
            self.send_header("content-length", str(len(response)))
            self.end_headers()
            self.wfile.write(response)
        except:
            Log_Traceback()


# Create ONE socket.
addr = ('', 8000)
sock = socket.socket (socket.AF_INET, socket.SOCK_STREAM)
sock.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
sock.bind(addr)
sock.listen(5)

# Launch 100 listener threads.
class Thread(threading.Thread):
    def __init__(self, i):
        threading.Thread.__init__(self)
        self.i = i
        self.daemon = True
        self.start()
    def run(self):
        httpd = BaseHTTPServer.HTTPServer(addr, Handler, False)

        # Prevent the HTTP server from re-binding every handler.
        # https://stackoverflow.com/questions/46210672/
        httpd.socket = sock
        httpd.server_bind = self.server_close = lambda self: None

        httpd.serve_forever()
[Thread(i) for i in range(10)]
time.sleep(9e9)

कंसोल लॉग (क्रोम):

HELLO
hello.html:14 {"req": {"value": "value"}}
hello.html:16 
{req: {…}}
req
:
{value: "value"}
__proto__
:
Object

कंसोल लॉग (फ़ायरफ़ॉक्स):

GET 
http://XXXXX:8000/hello.html [HTTP/1.0 200 OK 0ms]
POST 
XHR 
http://XXXXX:8000/postman [HTTP/1.0 200 OK 0ms]
HELLO hello.html:13:3
{"req": {"value": "value"}} hello.html:14:3
Object { req: Object }

कंसोल लॉग (एज):

HTML1300: Navigation occurred.
hello.html
HTML1527: DOCTYPE expected. Consider adding a valid HTML5 doctype: "<!DOCTYPE html>".
hello.html (1,1)
Current window: XXXXX/hello.html
HELLO
hello.html (13,3)
{"req": {"value": "value"}}
hello.html (14,3)
[object Object]
hello.html (16,3)
   {
      [functions]: ,
      __proto__: { },
      req: {
         [functions]: ,
         __proto__: { },
         value: "value"
      }
   }

पायथन लॉग:

HTTP 8/postman[post]: PATH='/postman'
URL 8/postman[post]: request data = {"value":"value"}
URL 8/postman[post]: response data = {"req": {"value": "value"}}

8

आपके डेटा को लपेटने और इसे सर्वर पर भेजने की एक आसान विधि है जैसे कि आप एक HTML फॉर्म का उपयोग करके भेज रहे थे POST। आप FormDataनिम्नानुसार वस्तु का उपयोग कर सकते हैं :

data = new FormData()
data.set('Foo',1)
data.set('Bar','boo')

let request = new XMLHttpRequest();
request.open("POST", 'some_url/', true);
request.send(data)

अब आप सर्वर साइड पर डेटा को उसी तरह से हैंडल कर सकते हैं, जिस तरह से आप HTML फॉर्म के साथ सौदा करते हैं।

अतिरिक्त जानकारी

यह सलाह दी जाती है कि फॉर्मडटा भेजते समय आपको कंटेंट-टाइप हेडर सेट नहीं करना चाहिए क्योंकि ब्राउज़र इसका ध्यान रखेगा।


❗️ FormDataएक बहुखण्डीय प्रपत्र अनुरोध के बजाय एक पैदा करेगा application/x-www-form-urlencodedअनुरोध
ccpizza

@ccpizza - स्पष्टीकरण के लिए धन्यवाद। चूंकि ओपी ने यह उल्लेख नहीं किया था कि किस प्रकार का डेटा पोस्ट-एड होना है, इसलिए मुझे लगता है कि फॉर्मडेटा जवाब देने के लिए सबसे उपयुक्त तरीका है।
आर्मिन हेमती निक

7

navigator.sendBeacon ()

यदि आपको केवल POSTडेटा की आवश्यकता है और सर्वर से प्रतिक्रिया की आवश्यकता नहीं है, तो सबसे छोटा समाधान उपयोग करना होगा navigator.sendBeacon():

const data = JSON.stringify({
  example_1: 123,
  example_2: 'Hello, world!',
});

navigator.sendBeacon('example.php', data);

1
'नेविगेटर' पर 'सेंडबेकन' को निष्पादित करने में विफल: बीकन केवल HTTP (एस) पर समर्थित हैं।
अली80

navigator.sendBeaconमेरी राय में इस उद्देश्य के लिए उपयोग करने के लिए नहीं है।
जोलीवर

6

आप XMLHttpRequest, fetch API का उपयोग कर सकते हैं, ...

यदि आप XMLHttpRequest का उपयोग करना चाहते हैं , तो आप निम्न कार्य कर सकते हैं

var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
    name: "Deska",
    email: "deska@gmail.com",
    phone: "342234553"
 }));
xhr.onload = function() {
    var data = JSON.parse(this.responseText);
    console.log(data);
};

या यदि आप लाने के लिए चाहते हैं एपीआई

fetch(url, {
    method:"POST",
    body: JSON.stringify({
        name: "Deska",
        email: "deska@gmail.com",
        phone: "342234553"
        })
    })
    .then(result => {
        // do something with the result
        console.log("Completed with result:", result);
    });

1

क्या आप जानते हैं कि जावास्क्रिप्ट ने फॉर्म बनाने और उन्हें जमा करने के लिए बिल्ट-इन मेथड्स और लिबास बनाए हैं।

मैं यहां बहुत सारे उत्तरों को देख रहा हूं जो सभी को एक 3 पार्टी लाइब्रेरी का उपयोग करने के लिए कह रहे हैं जो मुझे लगता है कि एक ओवरकिल है।

मैं शुद्ध जावास्क्रिप्ट में निम्नलिखित कार्य करूंगा:

<script>
function launchMyForm()
{
   var myForm = document.createElement("FORM");
   myForm.setAttribute("id","TestForm");
   document.body.appendChild(myForm);

// this will create a new FORM which is mapped to the Java Object of myForm, with an id of TestForm. Equivalent to: <form id="TestForm"></form>

   var myInput = document.createElement("INPUT");
   myInput.setAttribute("id","MyInput");
   myInput.setAttribute("type","text");
   myInput.setAttribute("value","Heider");
   document.getElementById("TestForm").appendChild(myInput);

// This will create an INPUT equivalent to: <INPUT id="MyInput" type="text" value="Heider" /> and then assign it to be inside the TestForm tags. 
}
</script>

इस तरह (ए) आपको काम करने के लिए 3 पार्टियों पर भरोसा करने की आवश्यकता नहीं है। (बी) यह सभी अंतर्निहित सभी ब्राउज़रों के लिए है, (सी) तेजी से, (डी) यह काम करता है, इसे आज़माने के लिए स्वतंत्र महसूस करें।

आशा है कि ये आपकी मदद करेगा। एच

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