使用Promise纯JavaScript发送带参数（数据）的POST请求

Question

如果我使用简单的POST XHR请求，它可以发送POST参数：

var http = new XMLHttpRequest();
var url = "example url";
var params = "limit=2";
http.open("post", url);
http.onreadystatechange = function() {
    if(http.readyState == 4 && http.status == 200) {
       alert(http.responseText);
    }
}
http.send(params);

但是如果我使用带有参数（data）的 Promise，那么就会出现未定义的 PHP 索引错误，我无法通过 Promise 发送参数吗？还是我漏掉了什么……

  function postAjaxCall(url, data) {
  // return a new promise.
  return new Promise(function(resolve, reject) {
    // do the usual XHR stuff
    var req = new XMLHttpRequest();
    req.open('post', url);

    req.onload = function() {
      if (req.status == 200) {
      resolve(req.response);
      }
      else {
        reject(Error(req.statusText));
      }
    };

    // handle network errors
    req.onerror = function() {
      reject(Error("Network Error"));
    };

    // make the request
    req.send(data);
    //same thing if i hardcode like
    //req.send("limit=2");
  });
};

我发出请求

postAjaxCall('example url', "limit=2").then(
        function(response) {
          document.getElementById('example').innerHTML = response;
        },
        function(error) {
          console.error("Failed!", error);
        });

- user348246

---

var url = "示例 URL"; 这真的是你的代码吗，还是因为在此处发布而更改了它？ - flx

在浏览器开发工具网络中检查实际请求，查看实际发送的内容以及与其他方法的区别。需要进行一些基本的调试。 - charlietfl

注意：在/var/www ...的一行中未定义索引:限制 echo ($_POST['limit']); - 这是php中的代码，如我所说，第一个代码运行正常。 - user348246

我发现如果我使用Promise版本，参数不会被发送... - user348246

@ponury-kostek你是什么意思？我知道如果我不使用promise的post请求，那么就可以发送参数，且不会出现PHP错误。但如果我使用带有promise的post请求，则不会发送任何参数，这将导致PHP错误... - user348246

Answer 1

如果您在服务器端检查请求头，您会发现请求被发送为文本/纯文本格式。为了使PHP将请求视为“$_POST”请求，您需要将请求头设置为'application/x-www-form-urlencoded'，该设置应该在xhr.open()之后和xhr.onload之前进行设置。https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX/Getting_Started展示了一个基础的Ajax用法。

function postAjaxCall(url, data) { 
    // return a new promise. 
return new Promise(function(resolve, reject) { 
    // do the usual XHR stuff 
var req = new XMLHttpRequest();
req.open('post', url); 
//NOW WE TELL THE SERVER WHAT FORMAT OF POST REQUEST WE ARE MAKING 
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
req.onload = function() { 
    if (req.status == 200) { 
        resolve(req.response); 
    } else { 
        reject(Error(req.statusText)); 
        } 
    }; 
    // handle network errors 
req.onerror = function() { 
    reject(Error("Network Error")); 
}; // make the request 
req.send(data); 
    //same thing if i hardcode like //req.send("limit=2"); 
}); 
};

- Onyijne Samuel

---

是的，谢谢。我在此期间已经解决了问题，现在我正在使用fetch获取数据。 - user348246