純粋なJavascriptはフォームなしで投稿データを送信します

純粋なJavascript（jQueryではなく$.post()）のみを使用して、フォームなしでポストメソッドを使用してデータを送信する方法はありますか？たぶんhttprequestか他の何か、ちょうど今それを見つけることができません。純粋なJavascriptはフォームなしで投稿データを送信します

出典

2011-06-18 John

XMLHttpRequestが答え... $ポストは、ボンネットの下に同じを使用していますです。 – Chandu

次のようにXMLHttpRequestオブジェクトを使用することができます。コードはurlにsomeStuffを投稿するだろう

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

を。 XMLHttpRequestオブジェクトを作成するときは、ブラウザ間で互換性があることを確認してください。そこには、それを行う方法の無限の例があります。

出典

2011-06-18 12:51:59

'someStuff'の例を書くことができますか？ – FluorescentGreen5

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

これは良い答えです。 'someStuff'は単純な文字列でも何でも構いません。私の個人的な好み（https://requestb.in）などのオンラインサービスを使用してリクエストを確認することができます。 – JamesC

あなたはそれを送信し、身体にデータを挿入することができます

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

をまた、RESTfulなあなたが戻ってからデータを取得することができますPOSTリクエスト。（パイソン経由で機能する静的/ hello.htmlに入れて）

JS：（テスト用）

<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

Fetch API [2017への書き込み時には新しいっぽい]は、GETリクエストを簡単にするためにintentedされているが、 POSTも可能です。

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はフォームなしで投稿データを送信します

答えて

関連する問題