纯JavaScript发送不带表单的POST数据

您可以发送它并将数据插入正文：

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

膛嵌墒缅欠

您可以按如下方式使用“ 4”对象：

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

该代码会将someStuff发布到url。只要确保在创建XMLHttpRequest对象时，该对象即可跨浏览器兼容。那里有无数个如何做到这一点的例子。

壬驴拿歪竞

Fetch API旨在[使2017年写作时崭新]使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\"});

芯伶句餐绕

此外，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)

控制台日志（chrome）：

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

臀博

navigator.sendBeacon（）如果仅需要POST数据并且不需要服务器响应，则最短的解决方案是使用navigator.sendBeacon()：

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

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

珊畴炮贩号

有一种简单的方法可以包装数据并将其发送到服务器，就像使用POST发送HTML表单一样。您可以使用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时不要设置Content-Type标头，因为浏览器会处理。

纯JavaScript发送不带表单的POST数据

6 个回复

发起人

httpwebrequest

javascript

post

xmlhttprequest

http_post

问题状态

纯JavaScript发送不带表单的POST数据

与内容相关的链接

6 个回复

发起人

httpwebrequest

javascript

post

xmlhttprequest

http_post

问题状态