使用XMLHttpRequest发送POST数据

GO2020-03-12

我想使用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编写等效项？

Stafan小小2020/03/12 17:23:23

最少使用`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上的默认浏览器均不支持该解决方案。

宝儿猴子2020/03/12 17:23:23

无需插件！

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

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

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer

使用XMLHttpRequest发送POST数据

最少使用FormData提交AJAX请求

备注

无需插件！

注意：

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