আমি জাভাস্ক্রিপ্টে XMLHttpRequest ব্যবহার করে কিছু ডেটা প্রেরণ করতে চাই।
বলুন আমার এইচটিএমএলে নিম্নলিখিত ফর্ম রয়েছে:
<form name="inputform" action="somewhere" method="post">
<input type="hidden" value="person" name="user">
<input type="hidden" value="password" name="pwd">
<input type="hidden" value="place" name="organization">
<input type="hidden" value="key" name="requiredkey">
</form>আমি কীভাবে জাভাস্ক্রিপ্টে একটি এক্সএমএলএইচটিপিআরকিউস্ট ব্যবহার করে সমতুল্য লিখতে পারি?
উত্তর:
নীচের কোডটি কীভাবে এটি করতে হয় তা দেখায়।
var http = new XMLHttpRequest();
var url = 'get_data.php';
var params = 'orem=ipsum&name=binny';
http.open('POST', url, true);
//Send the proper header information along with the request
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
http.onreadystatechange = function() {//Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
http.send(params);Connectionএবং Content-Lengthশিরোনাম সেট করা যায় না। এটি বলবে "অনিরাপদ শিরোনাম" সামগ্রী-দৈর্ঘ্য "সেট করতে অস্বীকৃত। দেখুন stackoverflow.com/a/2624167/632951
var xhr = new XMLHttpRequest();
xhr.open('POST', 'somewhere', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onload = function () {
// do something to response
console.log(this.responseText);
};
xhr.send('user=person&pwd=password&organization=place&requiredkey=key');অথবা আপনি যদি ব্রাউজারের সমর্থন বিবেচনা করতে পারেন তবে আপনি ফর্মডেটা ব্যবহার করতে পারেন :
var data = new FormData();
data.append('user', 'person');
data.append('pwd', 'password');
data.append('organization', 'place');
data.append('requiredkey', 'key');
var xhr = new XMLHttpRequest();
xhr.open('POST', 'somewhere', true);
xhr.onload = function () {
// do something to response
console.log(this.responseText);
};
xhr.send(data);http.setRequestHeader("Content-length", params.length);এবং http.setRequestHeader("Connection", "close");। তাদের কি দরকার? এগুলি সম্ভবত নির্দিষ্ট ব্রাউজারগুলিতে কেবল প্রয়োজন? (অন্যান্য পৃষ্ঠায় একটি মন্তব্য রয়েছে যে কন্টেন্ট-দৈর্ঘ্যের শিরোনামটি "সঠিকভাবে যা প্রয়োজন ছিল" সেট করা ছিল)
Content-Typeস্বয়ংক্রিয়ভাবে পরিবর্তিত হয় তার চেয়ে উত্তরে এটি লক্ষ্য করা উচিত multipart/form-data। এটির সার্ভার সাইডে এবং সেখানে কীভাবে তথ্য অ্যাক্সেস করা হয় তাতে গুরুতর জালিয়াতি রয়েছে।
আমি সন্ধানের পরামর্শ দিই fetch। এটি ES5 সমতুল্য এবং প্রতিশ্রুতি ব্যবহার করে। এটি অনেক বেশি পাঠযোগ্য এবং সহজেই স্বনির্ধারিত।
const url = "http://example.com";
fetch(url, {
method : "POST",
body: new FormData(document.getElementById("inputform")),
// -- or --
// body : JSON.stringify({
// user : document.getElementById('user').value,
// ...
// })
}).then(
response => response.text() // .json(), etc.
// same as function(response) {return response.text();}
).then(
html => console.log(html)
);নোড.জেজে, আপনাকে fetchব্যবহার করে আমদানি করতে হবে :
const fetch = require("node-fetch");আপনি যদি এটি সুসংগতভাবে ব্যবহার করতে চান (শীর্ষ স্কোপে কাজ করে না):
const json = await fetch(url, optionalOptions)
.then(response => response.json()) // .text(), etc.
.catch((e) => {});অধিক তথ্য:
function()আপনার পছন্দ না হলে আমি উদাহরণগুলি যুক্ত করেছি =>। বিকাশকারীর অভিজ্ঞতা স্বাচ্ছন্দ্যের জন্য আপনার অবশ্যই আধুনিক জেএস ব্যবহার করা উচিত। আইআই-তে আটকে থাকা
thisকীওয়ার্ডের সাথেও কাজ করে না । আমি এটি উল্লেখ করতে চাই, তবে আমি thisফাংশন কারখানার পরিবর্তে গোপনে ব্যবহার করে এমন লোকগুলিকে ঘৃণা করি এবং উত্তরাধিকার আর্কিটেকচার। আমাকে ক্ষমা করুন, আমি নোড
thisপ্লেগের মতো এড়ানোও উচিত, এবং যে কেউ পড়া উচিত this।
this।
FormDataএকটি এজেএক্স অনুরোধ জমা দেওয়ার সর্বনিম্ন ব্যবহার<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"/>
<script>
"use strict";
function submitForm(oFormElement)
{
var xhr = new XMLHttpRequest();
xhr.onload = function(){ alert (xhr.responseText); } // success case
xhr.onerror = function(){ alert (xhr.responseText); } // failure case
xhr.open (oFormElement.method, oFormElement.action, true);
xhr.send (new FormData (oFormElement));
return false;
}
</script>
</head>
<body>
<form method="post" action="somewhere" onsubmit="return submitForm(this);">
<input type="hidden" value="person" name="user" />
<input type="hidden" value="password" name="pwd" />
<input type="hidden" value="place" name="organization" />
<input type="hidden" value="key" name="requiredkey" />
<input type="submit" value="post request"/>
</form>
</body>
</html>এটি ওপি প্রশ্নের পুরোপুরি উত্তর দেয় না কারণ অনুরোধটি জমা দেওয়ার জন্য ব্যবহারকারীকে ক্লিক করতে হবে। তবে এই ধরণের সরল সমাধান অনুসন্ধান করতে লোকের পক্ষে এটি কার্যকর হতে পারে।
এই উদাহরণটি খুব সাধারণ এবং GETপদ্ধতিটি সমর্থন করে না । আপনি যদি আরও পরিশীলিত উদাহরণগুলির দ্বারা আকর্ষণীয় হন তবে দয়া করে দুর্দান্ত MDN ডকুমেন্টেশনটি দেখুন । এক্সএমএলএইচটিটিপিআরএকটিএমএল পোস্ট করার জন্য অনুরূপ উত্তরটি দেখুন ।
এই সমাধানের সীমাবদ্ধতা: জাস্টিন ব্লঙ্ক এবং টমাস মুঙ্ক দ্বারা চিহ্নিত হিসাবে (তাদের মন্তব্যগুলি দেখুন), FormDataআইই 9 এবং নিম্ন এবং অ্যান্ড্রয়েড ২.৩ এ ডিফল্ট ব্রাউজার দ্বারা সমর্থিত নয়।
FormDataআইই 9 এবং অ্যান্ড্রয়েড 2.3 (এবং অপেরামিনি তবে এটি সর্বশেষে ব্যবহৃত হয় না) বাদে অনেকগুলি ব্রাউজার দ্বারা সমর্থিত supported চিয়ার্স ;-)
onsubmit="return submitForm(this);"করা উচিত অন্যথায় অনুরোধে ব্যবহারকারী ইউআরএলে পুনঃনির্দেশিত হয়।
false। যদি trueফেরত দেওয়া হয় তবে আসল (অযাচিত) পোষ্ট অনুরোধ পাঠানো হবে! আপনার উত্তরটি সঠিক, বিভ্রান্তির জন্য দুঃখিত।
এখানে একটি সম্পূর্ণ সমাধান এখানে
application-json:
// Input values will be grabbed by ID
<input id="loginEmail" type="text" name="email" placeholder="Email">
<input id="loginPassword" type="password" name="password" placeholder="Password">
// return stops normal action and runs login()
<button onclick="return login()">Submit</button>
<script>
function login() {
// Form fields, see IDs above
const params = {
email: document.querySelector('#loginEmail').value,
password: document.querySelector('#loginPassword').value
}
const http = new XMLHttpRequest()
http.open('POST', '/login')
http.setRequestHeader('Content-type', 'application/json')
http.send(JSON.stringify(params)) // Make sure to stringify
http.onload = function() {
// Do whatever with response
alert(http.responseText)
}
}
</script>আপনার ব্যাকএন্ড এপিআই JSON পার্স করতে পারে তা নিশ্চিত করুন।
উদাহরণস্বরূপ, এক্সপ্রেস জেএসে:
import bodyParser from 'body-parser'
app.use(bodyParser.json())নীচের কোডটি নির্বাচন করুন এবং এটিকে বুকমার্ক বারে টেনে আনুন ( যদি আপনি এটি দেখতে না পান তবে ব্রাউজার সেটিংস থেকে সক্ষম করুন ), তারপরে সেই লিঙ্কটি সম্পাদনা করুন:
javascript:var my_params = prompt("Enter your parameters", "var1=aaaa&var2=bbbbb"); var Target_LINK = prompt("Enter destination", location.href); function post(path, params) { var xForm = document.createElement("form"); xForm.setAttribute("method", "post"); xForm.setAttribute("action", path); for (var key in params) { if (params.hasOwnProperty(key)) { var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", key); hiddenField.setAttribute("value", params[key]); xForm.appendChild(hiddenField); } } var xhr = new XMLHttpRequest(); xhr.onload = function () { alert(xhr.responseText); }; xhr.open(xForm.method, xForm.action, true); xhr.send(new FormData(xForm)); return false; } parsed_params = {}; my_params.split("&").forEach(function (item) { var s = item.split("="), k = s[0], v = s[1]; parsed_params[k] = v; }); post(Target_LINK, parsed_params); void(0);এখানেই শেষ! এখন আপনি যে কোনও ওয়েবসাইট পরিদর্শন করতে পারেন, এবং বুকমার্ক বারের সেই বোতামটি ক্লিক করতে পারেন !
উপরের পদ্ধতিটি পদ্ধতি ব্যবহার করে ডেটা প্রেরণ করে XMLHttpRequest, সুতরাং, স্ক্রিপ্টটি ট্রিগার করার সময় আপনাকে একই ডোমেনে থাকতে হবে। এ কারণেই আমি সিমুলেটেড ফরম সাবমিটিং সহ ডেটা প্রেরণ পছন্দ করি, যা কোনও ডোমেইনে কোডটি প্রেরণ করতে পারে - এর জন্য এখানে কোডটি রয়েছে:
javascript:var my_params=prompt("Enter your parameters","var1=aaaa&var2=bbbbb"); var Target_LINK=prompt("Enter destination", location.href); function post(path, params) { var xForm= document.createElement("form"); xForm.setAttribute("method", "post"); xForm.setAttribute("action", path); xForm.setAttribute("target", "_blank"); for(var key in params) { if(params.hasOwnProperty(key)) { var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", key); hiddenField.setAttribute("value", params[key]); xForm.appendChild(hiddenField); } } document.body.appendChild(xForm); xForm.submit(); } parsed_params={}; my_params.split("&").forEach(function(item) {var s = item.split("="), k=s[0], v=s[1]; parsed_params[k] = v;}); post(Target_LINK, parsed_params); void(0); XmlHttpRequestআপনার উত্তরের সাথে সম্পর্কিত কোন পয়েন্ট দেখতে পাচ্ছি না : |
আমি একই পোস্ট এবং এই লিঙ্কটি ব্যবহার করে আমার সমস্যাটি সমাধান করেছি , একই ধরণের সমস্যার মুখোমুখি হয়েছি।
var http = new XMLHttpRequest();
var url = "MY_URL.Com/login.aspx";
var params = 'eid=' +userEmailId+'&pwd='+userPwd
http.open("POST", url, true);
// Send the proper header information along with the request
//http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//http.setRequestHeader("Content-Length", params.length);// all browser wont support Refused to set unsafe header "Content-Length"
//http.setRequestHeader("Connection", "close");//Refused to set unsafe header "Connection"
// Call a function when the state
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
http.send(params);এই লিঙ্কটি তথ্য সম্পূর্ণ করেছে।
var util = {
getAttribute: function (dom, attr) {
if (dom.getAttribute !== undefined) {
return dom.getAttribute(attr);
} else if (dom[attr] !== undefined) {
return dom[attr];
} else {
return null;
}
},
addEvent: function (obj, evtName, func) {
//Primero revisar attributos si existe o no.
if (obj.addEventListener) {
obj.addEventListener(evtName, func, false);
} else if (obj.attachEvent) {
obj.attachEvent(evtName, func);
} else {
if (this.getAttribute("on" + evtName) !== undefined) {
obj["on" + evtName] = func;
} else {
obj[evtName] = func;
}
}
},
removeEvent: function (obj, evtName, func) {
if (obj.removeEventListener) {
obj.removeEventListener(evtName, func, false);
} else if (obj.detachEvent) {
obj.detachEvent(evtName, func);
} else {
if (this.getAttribute("on" + evtName) !== undefined) {
obj["on" + evtName] = null;
} else {
obj[evtName] = null;
}
}
},
getAjaxObject: function () {
var xhttp = null;
//XDomainRequest
if ("XMLHttpRequest" in window) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhttp;
}
};
//START CODE HERE.
var xhr = util.getAjaxObject();
var isUpload = (xhr && ('upload' in xhr) && ('onprogress' in xhr.upload));
if (isUpload) {
util.addEvent(xhr, "progress", xhrEvt.onProgress());
util.addEvent(xhr, "loadstart", xhrEvt.onLoadStart);
util.addEvent(xhr, "abort", xhrEvt.onAbort);
}
util.addEvent(xhr, "readystatechange", xhrEvt.ajaxOnReadyState);
var xhrEvt = {
onProgress: function (e) {
if (e.lengthComputable) {
//Loaded bytes.
var cLoaded = e.loaded;
}
},
onLoadStart: function () {
},
onAbort: function () {
},
onReadyState: function () {
var state = xhr.readyState;
var httpStatus = xhr.status;
if (state === 4 && httpStatus === 200) {
//Completed success.
var data = xhr.responseText;
}
}
};
//CONTINUE YOUR CODE HERE.
xhr.open('POST', 'mypage.php', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
if ('FormData' in window) {
var formData = new FormData();
formData.append("user", "aaaaa");
formData.append("pass", "bbbbb");
xhr.send(formData);
} else {
xhr.send("?user=aaaaa&pass=bbbbb");
}ফর্মডাটার পরিবর্তে জসন বস্তুটি ব্যবহার করার চেষ্টা করুন। নীচে আমার জন্য কাজ করছে কোড। ফর্মডাটা আমার পক্ষে কাজ করে না, তাই আমি এই সমাধানটি নিয়ে এসেছি।
var jdata = new Object();
jdata.level = levelVal; // level is key and levelVal is value
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "http://MyURL", true);
xhttp.setRequestHeader('Content-Type', 'application/json');
xhttp.send(JSON.stringify(jdata));
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
}
}এই প্রশ্নটি সন্ধান করার জন্য কেবল বৈশিষ্ট্য পাঠকদের জন্য। আমি খুঁজে পেয়েছি যে গৃহীত উত্তর যতক্ষণ আপনার প্রদত্ত পথ রয়েছে ঠিক ততক্ষণ ঠিক কাজ করে তবে আপনি যদি এটি ফাঁকা রেখে দেন তবে এটি আইইতে ব্যর্থ হবে। আমি এখানে যা এলাম:
function post(path, data, callback) {
"use strict";
var request = new XMLHttpRequest();
if (path === "") {
path = "/";
}
request.open('POST', path, true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.onload = function (d) {
callback(d.currentTarget.response);
};
request.send(serialize(data));
}আপনি কি এটি পছন্দ করতে পারেন:
post("", {orem: ipsum, name: binny}, function (response) {
console.log(respone);
})এটির জন্য এমন কিছু নকল রয়েছে যা এ সম্পর্কে স্পর্শ করে এবং এর সত্যিকার অর্থে কেউই ব্যাখ্যা করে না। চিত্রিত করার জন্য আমি গৃহীত উত্তর উদাহরণ ধার করব
http.open('POST', url, true);
http.send('lorem=ipsum&name=binny');http.onload(function() {})উদাহরণের স্বার্থে আমি এটির (আমি উত্তরটির পুরানো পদ্ধতির পরিবর্তে ব্যবহার করি ) বড় করে দেখলাম । আপনি যদি এটি যেমন ব্যবহার করেন তবে আপনি দেখতে পাবেন যে আপনার সার্ভারটি সম্ভবত পোস্ট পোস্টটি একটি স্ট্রিং হিসাবে ব্যাখ্যা করছে এবং প্রকৃত key=valueপ্যারামিটার নয় (অর্থাত্ পিএইচপি কোনও $_POSTভেরিয়েবল প্রদর্শন করবে না )। এটি পেতে আপনাকে অবশ্যই ফর্ম শিরোনামটি পাস করতে হবে এবং এটি আগে করা উচিতhttp.send()
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');আপনি যদি JSON ব্যবহার করছেন এবং URL- এনকোডড ডেটা নয়, application/jsonপরিবর্তে পাস করুন
এটি আমাকে সাহায্য করেছিল যেহেতু আমি কেবলমাত্র ব্যবহার করতে xmlHttpRequestএবং ফর্ম ডেটা হিসাবে কোনও বস্তু পোস্ট করতে চেয়েছিলাম :
function sendData(data) {
var XHR = new XMLHttpRequest();
var FD = new FormData();
// Push our data into our FormData object
for(name in data) {
FD.append(name, data[name]);
}
// Set up our request
XHR.open('POST', 'https://example.com/cors.php');
// Send our FormData object; HTTP headers are set automatically
XHR.send(FD);
}https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript
paramsJQuery এর মতো স্ট্রিংয়ের পরিবর্তে কোনও জিনিস পাঠানো কি সম্ভব ?