纯JavaScript发送POST数据没有表单

小开

你可以像下面这样使用XMLHttpRequest对象:

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

该代码将把someStuff传递给url。只要确保在创建XMLHttpRequest对象时，它是跨浏览器兼容的。关于如何做到这一点，有无数的例子。

小开

你可以发送它并将数据插入到body:

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

顺便说一下，对于get请求:

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

小开

同样，RESTful允许你从帖子请求中获得数据回来。

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 }

控制台日志(Edge):

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

小开

获取API的目的是使GET请求更容易，但它也能够POST。

let data = {element: "barium"};


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

如果你和我一样懒(或者只是喜欢快捷方式/助手):

window.post = function(url, data) {
return fetch(url, {method: "POST", headers: {'Content-Type': 'application/json'}, body: JSON.stringify(data)});
}


// ...


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

小开

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头，因为浏览器会注意到这一点。

小开

你可以使用XMLHttpRequest，获取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);
};

或者如果你想使用取回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);
}).catch(err => {
// if any error occured, then catch it here
console.error(err);
});

小开

你知道JavaScript有内置的方法和库来创建和提交表单吗?

我在这里看到很多回复都要求使用第三方库，我认为这是多余的。

我将在纯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);
   

// To submit the form:
myForm.method = "POST";
myForm.action = "whatever.aspx";  // or "response.php"
myForm.submit();


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

小开

const data = { username: 'example' };


fetch('https://example.com/profile', {
method: 'POST', // or 'PUT'
headers: {
'           Content-Type': 'application/json',
},
body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => {
console.log('Success:', data);
})
.catch((error) => {
console.error('Error:', error);
});

小开

这里最流行的答案没有显示如何从POST中获取数据。此外，流行的“fetch"解决方案在最新版本的Chrome中不能工作，当发送数据到最新版本的NodeJS时，除非你传递报头并打开response.json()承诺。此外，流行的答案不使用async/await。

这是我能想到的最干净、最完整的解决方案。

async function postJsonData(jsonObject) {
const response = await fetch("/echo", {
method: "POST",
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(jsonObject)
});
    

const actualResponse = await response.json();
}

小开

你也可以使用这个:https://github.com/floscodes/JS/blob/master/Requests.js

您可以轻松地发送http请求。只使用:

HttpRequest("https://example.com", method="post", data="yourkey=yourdata");

就是这样!即使站点受csrf保护，它也可以工作。

或者通过使用发送GET-Request

HttpRequest("https://example.com", method="get");

小开

这里有一个很好的函数，你(或其他人)可以在他们的代码中使用:

function post(url, data) {
return new Promise((res, rej) => {
let stringified = "";
for (const [key, value] of Object.entries(data))
stringified += `${stringified != '' ? '&' : ''}${key}=${value}`


const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState == 4)
if (xhr.status == 200)
res(xhr.responseText)
else
rej({ code: xhr.status, text: xhr.responseText })
}
xhr.open("POST", url, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(stringified);
})
}

小开

使用jbezz库的这个函数

var makeHttpObject = function () {
try {return new XMLHttpRequest();}
catch (error) {}
try {return new ActiveXObject("Msxml2.XMLHTTP");}
catch (error) {}
try {return new ActiveXObject("Microsoft.XMLHTTP");}
catch (error) {}
throw new Error("Could not create HTTP request object.");
}
function SendData(data){
let type = (data.type ? data.type : "GET")
let DataS = data.data;
let url = data.url;
let func = (data.success ? data.success : function(){})
let funcE =(data.error ? data.error : function(){})
let a_syne = (data.asyne ? data.asyne : false);
let u = null;
try{u = new URLSearchParams(DataS).toString();}catch(e){u = Object.keys(DataS).map(function(k) {return encodeURIComponent(k) + '=' + encodeURIComponent(DataS[k])}).join('&')}
if(type == "GET"){url +="?"+u}
const xhttp =  makeHttpObject();
xhttp.onload = function(){func(this.responseText)}
xmlHttp.onreadystatechange = function() {if (xmlHttp.readyState == 4)
{if(xmlHttp.status !== 200){funcE(xmlHttp.statusText)}}}
xhttp.open(type,url,a_syne);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send(u);
}

使用这个运行:

SendData({
url:"YOUR_URL",
asyne:true,
type:"POST", // or GET
data:{
username:"ali",
password:"mypass" // Your Data
},
success:function(Result){
console.log(Result)
},
error:function(e){
console.log("We Have Some Error")
}
});

或

下载jbezz并添加到你的页面。

下载链接:github.com

使用:

$$.api({
url:"YOUR_URL",
asyne:true,
type:"POST", // or GET
data:{
username:"ali",
password:"mypass" // Your Data
},
success:function(Result){
console.log(Result)
},
error:function(e){
console.log("We Have Some Error")
}
});