কোনও খাঁটি জাভাস্ক্রিপ্ট (jQuery নয় $.post()) ব্যবহার করে কোনও ফর্ম ছাড়াই এবং পৃষ্ঠাটি রিফ্রেশ না করে POST পদ্ধতি ব্যবহার করে ডেটা প্রেরণের কোনও উপায় আছে কি ? হতে পারে httprequestবা অন্য কিছু (এখনই এটি খুঁজে পাচ্ছেন না)?
উত্তর:
আপনি এটি প্রেরণ করতে এবং দেহে ডেটা canোকাতে পারেন:
var xhr = new XMLHttpRequest();
xhr.open("POST", yourUrl, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
value: value
}));
যাই হোক, অনুরোধ পাওয়ার জন্য:
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();
[২০১ 2017 সালে লেখার সময় নতুন-ইশ] আনার এপিআই হ'ল জিইটি অনুরোধগুলি সহজ করার উদ্দেশ্যে তৈরি হয়েছে তবে এটি পোস্ট করতে সক্ষমও হয়।
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"});
আপনি XMLHttpRequestনিম্নলিখিতটি অবজেক্টটি ব্যবহার করতে পারেন :
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
xhr.send(someStuff);
যে কোড পোস্ট someStuffকরতে হবে url। কেবলমাত্র নিশ্চিত হয়ে নিন যে আপনি যখন নিজের XMLHttpRequestবস্তুটি তৈরি করবেন তখন এটি ক্রস ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ হবে। কীভাবে এটি করা যায় তার অবিরাম উদাহরণ রয়েছে।
someStuff?
someStuffআপনি এমনকি একটি সাধারণ স্ট্রিং চান এমন কিছু হতে পারে। আপনি অনলাইন পরিষেবাদি যেমন আমার ব্যক্তিগত পছন্দ ব্যবহার করে অনুরোধটি পরীক্ষা করতে পারেন: ( রেকটিউব.ইন )
application/x-www-form-urlencodedMIME প্রকার একটি নেই charset: প্যারামিটার iana.org/assignments/media-types/application/...
এছাড়াও, RESTful আপনাকে একটি পোষ্ট অনুরোধ থেকে ডেটা ফিরে পেতে দেয় ।
জেএস (পাইথনের মাধ্যমে পরিবেশন করতে স্ট্যাটিক / হ্যালো এইচটিএমএল রাখুন):
<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>
পাইথন সার্ভার (পরীক্ষার জন্য):
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
কনসোল লগ (ফায়ারফক্স):
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"
}
}
পাইথন লগ:
HTTP 8/postman[post]: PATH='/postman'
URL 8/postman[post]: request data = {"value":"value"}
URL 8/postman[post]: response data = {"req": {"value": "value"}}
আপনার ডেটা মোড়ানো এবং এটি সার্ভারে প্রেরণের একটি সহজ পদ্ধতি রয়েছে যেন আপনি কোনও HTML ফর্ম ব্যবহার করে প্রেরণ করছেন POST। আপনি FormDataনিম্নলিখিত হিসাবে অবজেক্টটি ব্যবহার করে এটি করতে পারেন :
data = new FormData()
data.set('Foo',1)
data.set('Bar','boo')
let request = new XMLHttpRequest();
request.open("POST", 'some_url/', true);
request.send(data)আপনি যেমনটি পুনরায় সারণী এইচটিএমএল ফর্মগুলির সাথে ডিল করেন ঠিক তেমনই এখন আপনি সার্ভার-সাইডে ডেটা পরিচালনা করতে পারবেন।
অতিরিক্ত তথ্য
এটি পরামর্শ দেওয়া হয় যে ফর্ম্যাটা পাঠানোর সময় আপনাকে অবশ্যই সামগ্রী-ধরণের শিরোনাম সেট করবেন না যেহেতু ব্রাউজারটি এটির যত্ন নেবে।
FormDataএকটি বহু-অংশযুক্ত ফর্ম অনুরোধ বদলে একটি তৈরি করবে application/x-www-form-urlencodedঅনুরোধ
যদি আপনার কেবল POSTডেটা প্রয়োজন হয় এবং সার্ভারের কাছ থেকে কোনও প্রতিক্রিয়া প্রয়োজন না হয়, তবে সংক্ষিপ্ততম সমাধানটি ব্যবহার করতে হবে navigator.sendBeacon():
const data = JSON.stringify({
example_1: 123,
example_2: 'Hello, world!',
});
navigator.sendBeacon('example.php', data);navigator.sendBeaconআমার মতে এই উদ্দেশ্যে ব্যবহার করার উদ্দেশ্যে নয়।
আপনি XMLHttpRequest ব্যবহার করতে পারেন, API এনেছেন, ...
আপনি যদি XMLHttpRequest ব্যবহার করতে চান তবে আপনি নিম্নলিখিতটি করতে পারেন
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
name: "Deska",
email: "deska@gmail.com",
phone: "342234553"
}));
xhr.onload = function() {
var data = JSON.parse(this.responseText);
console.log(data);
};অথবা আপনি যদি ফেচ এপিআই ব্যবহার করতে চান তবে
fetch(url, {
method:"POST",
body: JSON.stringify({
name: "Deska",
email: "deska@gmail.com",
phone: "342234553"
})
})
.then(result => {
// do something with the result
console.log("Completed with result:", result);
});আপনি কি জানেন যে ফর্ম তৈরি করতে এবং জমা দেওয়ার জন্য জাভাস্ক্রিপ্টটির অন্তর্নির্মিত পদ্ধতি এবং লিব রয়েছে?
আমি এখানে প্রচুর জবাব দেখতে পাচ্ছি যে সমস্ত তৃতীয় পক্ষের লাইব্রেরিটি ব্যবহার করতে বলছে যা আমি মনে করি যে এটি একটি ওভারকিল।
খাঁটি জাভাস্ক্রিপ্টে আমি নিম্নলিখিতটি করব:
<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>এইভাবে (এ) কাজটি করার জন্য আপনার তৃতীয় পক্ষের উপর নির্ভর করার দরকার নেই। (খ) এটি সমস্ত ব্রাউজারগুলিতে অন্তর্নির্মিত, (সি) দ্রুত, (ডি) এটি কার্যকর হয়, এটি চেষ্টা করে নির্দ্বিধায়।
আশা করি এটা কাজে লাগবে. এইচ