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

Question

当 senderform 的方法为 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地址末尾手动添加键值对，但问题是我不知道哪个表单将传递哪些字段。

如果可能的话，我更喜欢使用本地的JavaScript。

如何使用XMLHttpRequest发送GET请求，并从指向表单元素的senderform中获取键值对（与POST请求已经工作的方式相同）？

- Jakub M.

---

什么是问题？ - trenthaynes

如何使用XMLHttpRequest发送GET请求，其中包含来自指向表单元素的senderform的键值对（与POST请求已经工作的方式相同）？ - Jakub M.

GET != POST。它们是完全不同的机制。你不能像使用POST那样使用GET。如果要用GET代替POST，你需要解析表单，收集名称:值对，将它们添加到查询字符串中 - 就像你提供的链接一样。 - trenthaynes

当请求方法为 GET 时，将参数追加到 URL。 - epascarello

@whipdancer，我知道它们是不同的，我对一些自动在地址末尾添加键值对的方式很感兴趣。但可能并没有这样的方法，所以我将尝试编写脚本来实现，我只是不想编写已经存在的代码。 - Jakub M.

Answer 1

第一个参数是提交按钮或表单本身的引用。第二个参数是XMLHttpRequest的回调函数。

var ajaxSubmit = function(sender, callback) {
    var xmlreq = new XMLHttpRequest(), params;
    // look around for the sender form and key-value params
    if (sender.form !== undefined)
    {
        params = new FormData(sender.form);
        params.append(sender.name, sender.value);
        sender = sender.form;
    }
    else params = new FormData(sender);
    var actAddress = sender.action;

    // append the params to the address in action attribute
    if (sender.method == 'get')
    {
        var firstRun = true;
        for (var key of params.keys())
        {
            if (firstRun)
            {
                actAddress += '?';
                firstRun = false;
            }
            else actAddress += '&';
            actAddress += key + "=" + params.get(key);
        }
    }
    
    xmlreq.open(sender.method, actAddress, true);
    xmlreq.onreadystatechange = callback;
    if (sender.method == 'get')
        xmlreq.send();
    else xmlreq.send(params);
}

因此，您可以将其用作：

<form onsubmit="ajaxSubmit(this,callbackFx)" >
<!-- or -->
    <input onclick="ajaxSubmit(this,callbackFx)" type="submit" name="" value=""/>
</form>

- Jakub M.

Answer 2

你确定问题不是PHP脚本引起的吗？我没有看到参考文献表明https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#send()与FormData需要POST才能正常工作，但如果PHP脚本从$POST或其他地方获取信息（我的PHP已经生锈了），那么行为将会有所不同。

- Siderite Zackwehdex

---

我建议您在浏览器的调试模式下查看网络选项卡，了解实际传输的内容。 - Siderite Zackwehdex

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方法。

这个答案也解释了这个问题。

- devtanc

---

谢谢您的回答，它很好地解释了为什么我的解决方案不起作用。但是它没有针对所引用的表单进行调整。我已经发布了一个带有我得出的解决方案的答案。 - Jakub M.