2011-06-18 31 views
44

Sadece saf Javascript (jQuery $.post() değil) kullanarak bir form ve yenileme sayfası olmadan yazı yöntemi kullanarak veri göndermek için bir yolu var mı? Belki httprequest ya da başka bir şey, şimdi onu bulamıyor. aşağıdaki gibiSaf Javascript form olmadan veri göndermek

+0

XMLHttpRequest olan cevabı ... $ sonrası başlık altında aynı kullanır.. – Chandu

cevap

40

Sen XMLHttpRequest nesneyi kullanabilirsiniz:

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

Bu kod url için someStuff sonrası olacaktır. Sadece XMLHttpRequest nesnesini oluşturduğunuzda, çapraz tarayıcı uyumlu olacağından emin olun. Bunun nasıl yapılacağıyla ilgili sonsuz örnekler var.

+1

'someStuff' için bir örnek yazabilir misiniz? – FluorescentGreen5

+0

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

+1

Bu iyi bir cevap ve 'someStuff' basit bir dizge bile istediğiniz her şey olabilir. kişisel favorim gibi çevrimiçi hizmetleri kullanarak isteği kontrol edebilirsiniz: (https://requestb.in) – JamesC

37

Sen vücuda veri göndermek ve ekleyebilirsiniz:

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

arada, get isteği için: Ayrıca

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

, RESTful bir geri VERİ almak sağlar POST isteği.

JS (Python aracılığıyla hizmet etmek statik/hello.html koymak):

<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 sunucusu (test için):

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) 

Konsol günlüğünü (krom):

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

Konsol günlüğü (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 } 

Konsol günlüğü (Kenar):

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 günlüğü:

HTTP 8/postman[post]: PATH='/postman' 
URL 8/postman[post]: request data = {"value":"value"} 
URL 8/postman[post]: response data = {"req": {"value": "value"}} 
4

Fetch API [2017 yılında yazma anda yeni-imsi], GET istekleri kolay oluşturulması hedeflenmektedir ancak POST da yapabilir.

let data = {element: "barium"}; 

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

me (ya da sadece bir kısayol/yardımcı tercih) gibi tembel değilseniz:

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

// ... 

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