2011-06-18 17 views
44

Czy istnieje sposób przesyłania danych za pomocą metody post bez formularza i bez odświeżania strony przy użyciu wyłącznie kodu JavaScript (nie jQuery $.post())? Może httprequest lub coś innego, po prostu nie może go teraz znaleźć.Czysta JavaScript wysyłać dane pocztowe bez formularza

+0

XMLHttpRequest jest odpowiedzią ... $ po wykorzystuje takie same pod maską.. – Chandu

Odpowiedz

40

Można użyć obiektu XMLHttpRequest następująco:

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

Ten kod będzie zakładać someStuff do url. Upewnij się tylko, że podczas tworzenia obiektu XMLHttpRequest będzie on zgodny z przeglądarkami. Istnieją niekończące się przykłady tego, jak to zrobić.

+1

Czy mógłbyś napisać przykład dla 'someStuff'? – FluorescentGreen5

+0

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

+1

To dobra odpowiedź, a 'someStuff' może być wszystkim, co chcesz, nawet prostym łańcuchem. możesz sprawdzić prośbę za pomocą usług online, takich jak mój ulubiony: (https://requestb.in) – JamesC

37

Można wysłać go i wstawić dane do ciała:

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

Nawiasem mówiąc, na zamówienie Pobierz:

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

Również relaksującego pozwala uzyskać dane powrotem od A POST wniosek.

JS (umieścić w statycznej/hello.html służyć za pośrednictwem 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> 

serwera Pythona (do testowania):

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) 

dziennik Console (chrom):

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

Dziennik konsoli (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 } 

dziennik Console (Edge): log

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

[nowego-owski w czasie pisania w 2017 roku] Fetch API jest odnie do żądania GET łatwe, ale jest również w stanie POST.

let data = {element: "barium"}; 

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

Jeśli tak leniwy jak ja (albo po prostu wolą skrótu/pomocnika):

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

// ... 

post("post/data/here", {element: "osmium"}); 
Powiązane problemy