javascript - 使用 promise 发送带有参数(数据)的 post 请求 - 纯 javascript

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

但是如果我使用带有参数(数据)的 promise 那么我会得到 undefined index 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);
        });

Answer 1

如果您在服务器端检查您的请求 header ，您将看到您的请求是以文本/纯文本格式发送的。要使 PHP 将请求视为 $_POST，您需要将请求 header 设置为“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"); 
}); 
};