使用XMLHttpRequest发送POST数据
本文翻译自：Send POST data using XMLHttpRequest
I'd like to send some data using an XMLHttpRequest in JavaScript. 我想使用JavaScript中的XMLHttpRequest发送一些数据。
Say I have the following form in HTML: 说我的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>
How can I write the equivalent using an XMLHttpRequest in JavaScript? 如何在JavaScript中使用XMLHttpRequest编写等效项？
#1楼
参考：https://stackoom.com/question/ekoE/使用XMLHttpRequest发送POST数据
#2楼
var xhr = new XMLHttpRequest();
xhr.open('POST', 'somewhere', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onload = function () {// do something to responseconsole.log(this.responseText);
};
xhr.send('user=person&pwd=password&organization=place&requiredkey=key');
Or if you can count on browser support you could use FormData : 或者，如果您可以依靠浏览器支持，则可以使用FormData ：
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 responseconsole.log(this.responseText);
};
xhr.send(data);
#3楼
Minimal use of FormData to submit an AJAX request 最少使用FormData提交AJAX请求
<!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 casexhr.onerror = function(){ alert (xhr.responseText); } // failure casexhr.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>
Remarks 备注
This does not fully answer the OP question because it requires the user to click in order to submit the request. 这不能完全回答OP问题，因为它要求用户单击才能提交请求。 But this may be useful to people searching for this kind of simple solution. 但这对于寻找这种简单解决方案的人们可能有用。
This example is very simple and does not support the
GETmethod. 此示例非常简单，不支持GET方法。 If you are interesting by more sophisticated examples, please have a look at the excellent MDN documentation . 如果您对更复杂的示例感兴趣，请查看出色的MDN文档 。 See also similar answer about XMLHttpRequest to Post HTML Form . 另请参见有关XMLHttpRequest到HTML表单的类似答案 。Limitation of this solution: As pointed out by Justin Blank and Thomas Munk (see their comments),
FormDatais not supported by IE9 and lower, and default browser on Android 2.3. 此解决方案的局限性：正如Justin Blank和Thomas Munk （请参阅他们的评论）所指出的那样，IE9及更低版本以及Android 2.3上的默认浏览器均不支持FormData。
#4楼
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;//XDomainRequestif ("XMLHttpRequest" in window) {xhttp = new XMLHttpRequest();} else {// code for IE6, IE5xhttp = 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");
}
#5楼
NO PLUGINS NEEDED! 无需插件！
Select the below code and drag that into in BOOKMARK BAR ( if you don't see it, enable from Browser Settings ), then EDIT that link : 选择以下代码并将其拖到“ 书签栏”中 （ 如果看不到，请从“浏览器设置”中启用 ），然后编辑该链接：
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);
That's all! 就这样！ Now you can visit any website, and click that button in BOOKMARK BAR ! 现在，您可以访问任何网站，然后在BOOKMARK BAR中单击该按钮！
NOTE: 注意：
The above method sends data using XMLHttpRequest method, so, you have to be on the same domain while triggering the script. 上面的方法使用XMLHttpRequest方法发送数据，因此，在触发脚本时，您必须位于同一域中。 That's why I prefer sending data with a simulated FORM SUBMITTING, which can send the code to any domain - here is code for that: 这就是为什么我更喜欢使用模拟的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);
#6楼
I have faced similar problem, using the same post and and this link I have resolved my issue. 我使用相同的帖子也遇到了类似的问题，并且此链接已经解决了我的问题。
var http = new XMLHttpRequest();var url = "MY_URL.Com/login.aspx";var params = 'eid=' +userEmailId+'&pwd='+userPwdhttp.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);
This link has completed information. 该链接具有完整的信息。
使用XMLHttpRequest发送POST数据相关推荐
- python post form data_python实现发送form-data数据的方法详解
本文实例讲述了python实现发送form-data数据的方法.分享给大家供大家参考,具体如下: 源代码 -----------------------------279361243530614 Co ...
- js异步请求php数据,原生JS发送异步数据请求实例详解
这篇文章主要为大家详细介绍了原生JS发送异步数据请求的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 在做项目的时候,有时候需要用到异步数据请求,但是如果这个时候没有框架的依赖,就需要用到 ...
- jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据，表单序列化（异步获取表单内容）
jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...
- php通过js发送请求数据,使用原生javascript发送ajax请求数据的步骤
注:请求地址是自己的项目地址,请自行更改.这只是一个简单的原生XMLHttpRequst的使用,之后会发如何封装原生ajax实现jequery的ajax 第一步:创建xhr对象.const xhr = ...
- JS原生：XMLHttpRequest发送GETPOST请求
目录 1.XMLHttpRequest (xhr) 2.使用xhr发起GET无参请求 3.使用xhr发起GET有参请求 4.使用xhr发起POST请求 学到了xhr发起GET和POST请求,在此记 ...
- Ajax学习（3）XMLHttpRequest的使用+数据交换格式（JSON）
XMLHttpRequest的使用 XMLHttpRequest(简称 xhr)是浏览器提供的 Javascript 对象,可以请求服务器上的数据资源.(jQuery 中的 Ajax 函数,就是基于 ...
- retrofit2 发送json数据_SQLmap JSON 格式的数据注入
现在越来越多的网站开始使用 RESTFUL 框架,数据传输使用 JSON,那么这种情况下我们如何使用 SQLmap 进行自动化注入呢? 能使用 * 指定注入点吗? 先说结论:对于 JSON 数据的 S ...
- 使用c#实现tcp的连接和发送接收数据
最近有个小项目,需要调用装置的录波数据,使用tcp模式,在这里整理了下如何使用c#实现tcp连接并实现发送接收数据,分享出来. 我这里使用的tcpclient ,终端是tcpserver模式. 首先自 ...
- 用c#实现通讯中自定义发送序列化数据，可一定程度上实现可编程发送的功能
C#实现串口发送序列化数据 如下图: 其中红色框内展现的为实现效果图,其中最前面的文本框是要发送的具体字节,可以手动修改,后面的按钮为单击可控制单次发送,同时双机要发送的文本框可修改按钮的标题,用于做 ...
最新文章
- 人眼是具有插帧能力的
- MongDB与Spring整合及操作
- WebStorm错误--无法显示文件夹目录
- mysql主从同步报错_mysql主从同步报错
- python在浏览器运行一片空白_Webdriver启动Firefox浏览器后，页面显示空白
- 中欧 PHP 开发者大会因多元化争议而取消
- Linux服务器中的wget、curl和scp
- java web 图表控件_2020 最新流行的Java Web报表工具比对
- CSS的一些基本样式的简单介绍
- 2017CCPC哈尔滨赛区总结
- java项目没有xml,利用eclipse新建的java web项目没有部署描述符web.xml文件怎么办？...
- 集成电路模拟版图入门-版图基础学习笔记（四）
- VS连接VSS代码管理器失败问题
- 一张图片即可入侵你的电脑
- java 打印对象大小_如何获取一个Java对象所占内存大小
- java实现阿里云接口发送短信验证码
- 加州理工学院计算机研究生申请条件,加州理工学院研究生申请条件
- 送给正在 奋斗和成长路上的女人们
- 山东科技大学第二届ACM校赛解题报告
- 2022 CSP 游记