使用XMLHttpRequest发送POST数据

我想使用JavaScript中的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>

如何在JavaScript中使用XMLHttpRequest编写等效项？

最少使用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>

备注

这并不能完全回答OP问题，因为它要求用户单击才能提交请求。但这对于寻找这种简单解决方案的人们可能有用。

本示例非常简单，不支持该GET方法。如果您对更复杂的示例感兴趣，请查看出色的MDN文档。另请参见有关XMLHttpRequest到HTML表单的类似答案。

此解决方案的局限性：正如Justin Blank和Thomas Munk（请参阅他们的评论）所指出的那样，FormDataIE9及更低版本以及Android 2.3上的默认浏览器均不支持该解决方案。

无需插件！

选择以下代码，并将其拖到“ 书签栏”中（如果看不到，请从“浏览器设置”中启用），然后编辑该链接：

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);

最少使用FormData提交AJAX请求

备注

无需插件！

注意：

最少使用`FormData`提交AJAX请求