如何使用 GET 方法通过 XMLHttpRequest 传递 FormData

Question

senderform 的 Method 为 POST 时，一切正常。但是，一旦我将方法更改为 GET，我就不会在服务器上收到任何内容。

function ajaxSubmit(destinationElement, senderform) {

    var xmlreq = new XMLHttpRequest();
    var params = new FormData(senderform);
    xmlreq.open(senderform.method, senderform.action, true);

    if (/\/content\.php$/.test(senderform.action))
        xmlreq.onreadystatechange = receiveTable;
    else xmlreq.onreadystatechange = receiveText;

    xmlreq.send(params);
}

我知道我可以在 Action 地址末尾 manually append key-value pairs，但问题是我不知道哪个表单将通过哪些字段传递。

如果可能的话，我更喜欢原生 JavaScript。

如何使用 XMLHttpRequest 发送一个 GET 请求，该请求带有来自 senderform 的键值对，它指向表单元素（与它已经用于 POST 请求的方式相同）？

Answer 1

最后我提出了这个解决方案，它从senderform 表单引用中加载所有键值对。

function ajaxSubmit(destinationElement, senderform) {
var xmlreq = new XMLHttpRequest();
var params = new FormData(senderform);

if (senderform.method == 'get')
{
    var firstRun = true;
    for (var key of params.keys())
    {
        if (firstRun)
        {
            senderform.action += '?';
            firstRun = false;
        }
        else senderform.action += '&';
      senderform.action += key + "=" + params.get(key);
    }
}
xmlreq.open(senderform.method, senderform.action, true);
if (senderform.action.indexOf('content.php')!==-1)
    xmlreq.onreadystatechange = receiveTable;
else xmlreq.onreadystatechange = receiveText;
xmlreq.send(params);
}

结合@tanc 的回答和this article 我能够解决我的问题。

Answer 2

您确定问题不是 PHP 脚本吗？我没有看到 https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#send() with FormData 需要 POST 才能工作，但如果 PHP 脚本从 $POST 或其他东西（我的 PHP 生锈）中获取信息，行为会有所不同。

Answer 3

由于您无法在 GET 请求中创建可用的正文（见下文），因此另一种选择是在 url 中使用参数。

function buildGetUrlParams(baseUrl, paramsObj) {
  var builtUrl = baseUrl + "?";
  Object.keys(paramsObj).forEach(function(key) {
    builtUrl += key + "=" + paramsObj[key] + "&";
  });
  return builtUrl.substr(0, builtUrl.length - 1);
}

document.getElementById('finalUrl').innerText = buildGetUrlParams('http://test.url.com', { name:'James', occupation:'web design' });

<div id="finalUrl"></div>

HTTP GET 请求可以包含正文，但该正文没有语义。这意味着，简单来说，服务器没有任何理由，也不知道如何处理 GET 请求的主体。如果可以编写可以执行此操作的服务器，那么根据HTTP/1.1 规范，这将是不好的做法：

如果请求方法不包括为实体主体定义的语义，则在处理请求时应该忽略消息主体。

这基本上就是它不起作用的原因。如果您想发送服务器能够响应的任何类型的数据，那么您需要使用不同的 HTTP 方法。

This answer 也解释了这个问题。