使用XMLHttpRequest发送POST数据

最新推荐文章于 2024-09-22 11:12:36 发布

p15097962069

最新推荐文章于 2024-09-22 11:12:36 发布

阅读量1.2w

点赞数 1

文章标签： javascript ajax post xmlhttprequest

原文链接：https://oldbug.net/q/ekoE/Send-POST-data-using-XMLHttpRequest

版权

本文介绍了如何在JavaScript中使用XMLHttpRequest发送POST数据，包括使用FormData的方式，并提供了相关示例代码。同时，文章提到了这种方法在旧版浏览器中的局限性，以及一个无需插件的解决方案。

摘要由CSDN通过智能技术生成

本文翻译自：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 response
    console.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 response
    console.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 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>

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 GET method. 此示例非常简单，不支持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), FormData is 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;
        //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");
}

#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+'&amp;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);

This link has completed information. 该链接具有完整的信息。