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

Posted 2023-03-05

【中文标题】如何使用 GET 方法通过 XMLHttpRequest 传递 FormData

【英文标题】：How to pass FormData over XMLHttpRequest using GET method

【发布时间】：2016-06-24 11:31:48

【问题描述】：

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 请求的方式相同）？

【问题讨论】：

问题是什么？

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

获取！= 发布。它们是完全不同的机制。您不能像使用 POST 一样使用 GET。要使用 GET 代替 POST，您需要解析表单，收集名称：值对，将它们添加到查询字符串中 - 就像您提供的链接一样。

所以当它是 GET 时将参数附加到 URL

@whipdancer，我知道它们是不同的，我对在地址末尾附加键值对的一些自动方式感兴趣。但可能没有，所以我会尝试为此编写脚本，我只是不想编写可能已经存在的东西。

【参考方案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 我能够解决我的问题。

【参考方案2】：

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

【讨论】：

我建议你在浏览器调试模式下，在网络标签下，看看实际传输的是什么

【参考方案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 也解释了这个问题。

【讨论】：

感谢您的回答，它很好地解释了为什么我的解决方案不起作用。但是，它没有针对引用的表格进行调整。我已经发布了我已经找到的解决方案的答案。