Pure JavaScript ส่งข้อมูล POST โดยไม่มีแบบฟอร์ม


141

มีวิธีส่งข้อมูลโดยใช้เมธอด POST โดยไม่มีแบบฟอร์มและไม่รีเฟรชเพจโดยใช้ JavaScript ล้วนๆ (ไม่ใช่ jQuery $.post()) หรือไม่ อาจจะhttprequestหรืออย่างอื่น (หาไม่ได้แล้ว)?


1
XMLHttpRequest คือคำตอบ ... $. post ใช้เหมือนกันภายใต้ประทุน
จันดู

คำตอบ:


141

คุณสามารถส่งและแทรกข้อมูลไปยังเนื้อหา:

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 คืออะไร?
Hylle


68

[new-ish ณ เวลาที่เขียนในปี 2017] Fetch APIมีจุดมุ่งหมายเพื่อให้คำขอ GET เป็นเรื่องง่าย แต่ก็สามารถโพสต์ได้เช่นกัน

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หน่อยได้ไหม
FluorescentGreen 5

4
someStuff = 'param1 = val1 & param2 = val2 & param3 = val3'
Camel

1
นั่นเป็นคำตอบที่ดีและsomeStuffสามารถเป็นอะไรก็ได้ที่คุณต้องการแม้แต่สตริงธรรมดา ๆ คุณสามารถตรวจสอบคำขอโดยใช้บริการออนไลน์เช่นรายการโปรดส่วนตัวของฉัน: ( requestb.in )
JamesC

application/x-www-form-urlencodedชนิดไมม์ไม่ได้มีcharsetพารามิเตอร์: iana.org/assignments/media-types/application/...
JBG

29

นอกจากนี้ RESTful ยังให้คุณได้รับข้อมูลคืนจากคำขอPOST

JS (ใส่ใน static / hello.html เพื่อแสดงผ่าน Python):

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

เซิร์ฟเวอร์ Python (สำหรับการทดสอบ):

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

บันทึกคอนโซล (Firefox):

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

บันทึก Python:

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 reugular

ข้อมูลเพิ่มเติม

ขอแนะนำว่าคุณต้องไม่ตั้งค่าส่วนหัว Content-Type เมื่อส่ง FormData เนื่องจากเบราว์เซอร์จะดูแลสิ่งนั้น


❗️ FormDataจะสร้างคำขอแบบฟอร์มหลายส่วนแทนapplication/x-www-form-urlencodedคำขอ
ccpizza

@ccpizza - ขอบคุณสำหรับคำชี้แจง เนื่องจาก OP ไม่ได้กล่าวถึงประเภทของข้อมูลที่จะเป็น POST-ed ฉันคิดว่า FormData เป็นวิธีที่เหมาะสมที่สุดในการตอบ
Armin Hemati Nik

7

navigator.sendBeacon ()

หากคุณต้องการPOSTข้อมูลและไม่ต้องการการตอบกลับจากเซิร์ฟเวอร์วิธีแก้ปัญหาที่สั้นที่สุดคือใช้navigator.sendBeacon():

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

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

1
ไม่สามารถเรียกใช้งาน 'sendBeacon' บน 'Navigator': Beacons ได้รับการสนับสนุนผ่าน HTTP (S) เท่านั้น
Ali80

navigator.sendBeaconไม่ได้หมายถึงการใช้เพื่อจุดประสงค์นี้ในความคิดของฉัน
jolivier

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 API

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);
    });

2

คุณรู้หรือไม่ว่า JavaScript มีเมธอดและ libs ในตัวเพื่อสร้างแบบฟอร์มและส่ง

ฉันเห็นคำตอบมากมายที่นี่ทั้งหมดขอให้ใช้ไลบรารีของบุคคลที่สามซึ่งฉันคิดว่ามันเกินความจำเป็น

ฉันจะทำสิ่งต่อไปนี้ใน Javascript แท้:

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

วิธีนี้ (A) คุณไม่จำเป็นต้องพึ่งพาบุคคลที่สามในการทำงาน (B) ทุกเบราว์เซอร์ทั้งหมดในตัว (C) เร็วขึ้น (D) ใช้งานได้อย่าลังเลที่จะทดลองใช้

ฉันหวังว่านี่จะช่วยได้. H

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.