Is er een manier om gegevens te verzenden met de POST-methode zonder een formulier en zonder de pagina te vernieuwen met alleen pure JavaScript (niet jQuery $.post())? Misschien httprequestof iets anders (kan het nu alleen niet vinden)?
Antwoord 1, autoriteit 100%
U kunt het verzenden en de gegevens in de hoofdtekst invoegen:
var xhr = new XMLHttpRequest();
xhr.open("POST", yourUrl, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
value: value
}));
Trouwens, voor een verzoek:
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();
Antwoord 2, autoriteit 67%
De [nieuwe-achtig op het moment van schrijven in 2017] Fetch APIis bedoeld om GET-verzoeken gemakkelijk te maken, maar kan ook POST-en.
let data = {element: "barium"};
fetch("/post/data/here", {
method: "POST",
body: JSON.stringify(data)
}).then(res => {
console.log("Request complete! response:", res);
});
Als je net zo lui bent als ik (of gewoon de voorkeur geeft aan een snelkoppeling/helper):
window.post = function(url, data) {
return fetch(url, {method: "POST", body: JSON.stringify(data)});
}
// ...
post("post/data/here", {element: "osmium"});
Antwoord 3, autoriteit 31%
U kunt het object XMLHttpRequestals volgt gebruiken:
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
xhr.send(someStuff);
Die code zou someStuffposten op url. Zorg ervoor dat wanneer u uw XMLHttpRequest-object maakt, het compatibel is met meerdere browsers. Er zijn eindeloos veel voorbeelden van hoe je dat kunt doen.
Antwoord 4, autoriteit 19%
Ook met RESTful kunt u gegevens terugkrijgen van een POST-verzoek.
JS (plaats in static/hello.html om via Python te dienen):
<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-server (voor testen):
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)
Consolelogboek (chroom):
HELLO
hello.html:14 {"req": {"value": "value"}}
hello.html:16
{req: {…}}
req
:
{value: "value"}
__proto__
:
Object
Console-logboek (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 }
Console-logboek (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-logboek:
HTTP 8/postman[post]: PATH='/postman'
URL 8/postman[post]: request data = {"value":"value"}
URL 8/postman[post]: response data = {"req": {"value": "value"}}
Antwoord 5, autoriteit 12%
U kunt XMLHttpRequest, fetch API, … gebruiken
Als u XMLHttpRequest wilt gebruiken, kunt u het volgende doen
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
name: "Deska",
email: "[email protected]",
phone: "342234553"
}));
xhr.onload = function() {
var data = JSON.parse(this.responseText);
console.log(data);
};
Of als u de fetch API wilt gebruiken
fetch(url, {
method:"POST",
body: JSON.stringify({
name: "Deska",
email: "[email protected]",
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);
});
Antwoord 6, autoriteit 5%
Er is een eenvoudige methode om uw gegevens in te pakken en naar de server te verzenden alsof u een HTML-formulier verzendt met behulp van POST.
u kunt dat als volgt doen met het FormData-object:
data = new FormData()
data.set('Foo',1)
data.set('Bar','boo')
let request = new XMLHttpRequest();
request.open("POST", 'some_url/', true);
request.send(data)
nu kunt u de gegevens aan de serverzijde verwerken, net zoals u met gewone HTML-formulieren omgaat.
Aanvullende informatie
Het is aan te raden om de Content-Type header niet in te stellen bij het verzenden van FormData, aangezien de browser daarvoor zorgt.
Antwoord 7, autoriteit 4%
navigator.sendBeacon()
Als je gewoon POSTgegevens en geen reactie van de server vereisen, is de kortste oplossing het gebruik van navigator.sendBeacon():
const data = JSON.stringify({
example_1: 123,
example_2: 'Hello, world!',
});
navigator.sendBeacon('example.php', data);
Antwoord 8, autoriteit 4%
Wist u dat JavaScript zijn ingebouwde methoden en bibliotheken heeft om formulieren te maken en in te dienen?
Ik zie hier veel reacties die allemaal vragen om een bibliotheek van derden te gebruiken, wat volgens mij een overkill is.
Ik zou het volgende doen in puur 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>
Op deze manier (A) hoeft u niet afhankelijk te zijn van derden om het werk te doen. (B) Het is allemaal ingebouwd in alle browsers, (C) sneller, (D) het werkt, probeer het gerust uit.
Ik hoop dat dit helpt.
H
Antwoord 9
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);
});
Antwoord 10
De meest populaire antwoorden hier laten niet zien hoe u gegevens uit de POST terugkrijgt. Ook werken de populaire “fetch”-oplossingen niet in de nieuwste versie van Chrome bij het verzenden van gegevens naar de nieuwste versie van NodeJS, tenzij je headers doorgeeft en ook de response.json()-belofte uitpakt. Ook gebruiken de populaire antwoorden geen asynchrone/wachten.
Hier is de schoonste en meest complete oplossing die ik kon bedenken die werkt.
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();
}
Antwoord 11
Hier is een leuke functie die jij (of iemand anders) in hun code zou kunnen gebruiken:
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);
})
}
Antwoord 12
Je kunt dit ook gebruiken: https://github.com/floscodes /JS/blob/master/Requests.js
U kunt eenvoudig een http-verzoek verzenden. Gebruik gewoon:
HttpRequest("https://example.com", method="post", data="yourkey=yourdata");
Dat is het! Het zou zelfs moeten werken als de site CSRF-beveiligd is.
Of stuur gewoon een GET-Request met behulp van
HttpRequest("https://example.com", method="get");