純Javascript發送沒有表格的文章數據

40

可以按如下方式使用XMLHttpRequest對象：

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

該代碼會後someStuff到url。只要確保在創建對象時，它將是跨瀏覽器兼容的。這裏有無數的例子。

來源

2011-06-18 12:51:59

+1

你能寫一個'someStuff'的例子嗎？ – FluorescentGreen5

+0

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

+1

這是一個很好的答案，'someStuff'可以是任何你想要的東西，即使是一個簡單的字符串。您可以使用我個人最喜歡的在線服務檢查請求：（https://requestb.in） – JamesC

37

你可以把它和插入數據機體：

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

來源

2016-08-16 19:07:00

2

此外，REST風格讓你從獲取數據回POST請求。

JS（放靜電/ 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)

控制檯日誌（鉻）：

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

來源

2017-09-17 23:07:57

4

[新十歲上下。在寫本在2017年的時候] Fetch API被intented使GET請求很容易，但它也能夠發佈。

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

來源

2017-11-01 23:38:05 ContinuousLoad

純Javascript發送沒有表格的文章數據

回答

相關問題