मैं जावास्क्रिप्ट में XMLHttpRequest का उपयोग करके कुछ डेटा भेजना चाहूंगा।
कहो कि मेरे पास HTML में निम्नलिखित रूप हैं:
<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>
मैं जावास्क्रिप्ट में XMLHttpRequest का उपयोग करके समकक्ष कैसे लिख सकता हूं?
जवाबों:
नीचे दिया गया कोड यह दर्शाता है कि यह कैसे करना है।
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)
);Node.js में, आपको fetchउपयोग करके आयात करना होगा:
const fetch = require("node-fetch");यदि आप इसे सिंक्रोनाइज़ करना चाहते हैं (टॉप स्कोप में काम नहीं करता है):
const json = await fetch(url, optionalOptions)
.then(response => response.json()) // .text(), etc.
.catch((e) => {});और जानकारी:
thisकीवर्ड के साथ काम नहीं करता है । मैं इसका उल्लेख करना पसंद करता हूं, लेकिन मैं thisफ़ंक्शन कारखानों के बजाय गुप्त रूप से उपयोग करने वाले लोगों , और विरासत वास्तुकला से नफरत करता हूं। मुझे माफ कर दो, मैं नोड हूँ।
thisप्लेग की तरह से बचता हूं , और इसलिए किसी को भी पढ़ना चाहिए this।
this।
FormDataAJAX अनुरोध सबमिट करने के लिए न्यूनतम उपयोग<!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 प्रलेखन पर एक नज़र डालें । XMLHttpRequest के बारे में इसी तरह का उत्तर HTML फॉर्म पोस्ट करने के लिए भी देखें ।
इस समाधान की सीमा: जैसा कि जस्टिन ब्लैंक और थॉमस मंक (उनकी टिप्पणी देखें) द्वारा इंगित किया गया है , FormDataIE9 और Android 2.3 पर डिफ़ॉल्ट ब्राउज़र द्वारा समर्थित नहीं है।
FormDataIE9 और Android 2.3 (और OperaMini को छोड़कर कई ब्राउज़रों द्वारा समर्थित है लेकिन यह अंतिम व्यापक रूप से उपयोग नहीं किया गया है)। चीयर्स ;-)
onsubmit="return submitForm(this);"अन्यथा उपयोगकर्ता अनुरोध में URL पर पुनर्निर्देशित हो जाता है।
false। यदि trueलौटाया जाता है, तो मूल (अवांछित) POST अनुरोध भेजा जाएगा! आपका उत्तर सही है, भ्रम के लिए खेद है।
यहाँ एक पूर्ण समाधान के साथ है
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 को पार्स कर सकता है।
उदाहरण के लिए, एक्सप्रेस JS में:
import bodyParser from 'body-parser'
app.use(bodyParser.json())नीचे दिए गए कोड का चयन करें और उसे BOOKMARK BAR में खींचें ( यदि आप इसे नहीं देखते हैं, ब्राउज़र सेटिंग्स से सक्षम करें ), तो EDL लिंक को लिंक करें:
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);बस इतना ही! अब आप किसी भी वेबसाइट पर जा सकते हैं, और BOOKMARK BAR में उस बटन पर क्लिक करें !
उपरोक्त विधि विधि का उपयोग करके डेटा भेजता है XMLHttpRequest, इसलिए, आपको स्क्रिप्ट को ट्रिगर करते समय एक ही डोमेन पर होना चाहिए। इसलिए मैं एक सिम्युलेटेड FORM SUBMITTING के साथ डेटा भेजना पसंद करता हूं, जो किसी भी डोमेन को कोड भेज सकता है - यहां उसके लिए कोड है:
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");
}फॉर्मडेटा के बजाय जोंस ऑब्जेक्ट का उपयोग करने का प्रयास करें। नीचे मेरे लिए कोड काम कर रहा है। formdata मेरे लिए भी काम नहीं करता है, इसलिए मैं इस समाधान के साथ आया था।
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);
}
}सिर्फ फीचर पाठकों के लिए यह सवाल है। मैंने पाया कि स्वीकृत उत्तर तब तक ठीक काम करता है जब तक आपके पास एक दिया हुआ मार्ग है, लेकिन यदि आप इसे खाली छोड़ देते हैं तो यह IE में विफल हो जाएगा। यहां वह है जो मैंने जुटाया:
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() {})दृष्टांत के लिए इसे (मैं उस उत्तर की पुरानी पद्धति के बजाय उपयोग करता हूं ) की देखरेख की। यदि आप इस का उपयोग करते हैं, तो आप पाएंगे कि आपका सर्वर संभवतः POST निकाय को एक स्ट्रिंग के रूप में व्याख्या कर रहा है और वास्तविक key=valueपैरामीटर नहीं है (अर्थात PHP कोई $_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 की तरह स्ट्रिंग के बजाय ऑब्जेक्ट भेजना संभव है ?