If I use a simple post xhr request its working to send post parameters:

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

But If I use promise with parameters (data) then I get undefined index php error, with promise I cant send parameters? or I miss something...

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

and I make the request

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

If I use a simple post xhr request its working to send post parameters:

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

But If I use promise with parameters (data) then I get undefined index php error, with promise I cant send parameters? or I miss something...

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

and I make the request

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

• javascript
• php
• promise
• es6-promise

Share Improve this question Follow edited Jan 24, 2018 at 14:11 samuel silva 43233 silver badges88 bronze badges asked Jan 24, 2018 at 14:09 user348246user348246 38011 gold badge44 silver badges1616 bronze badges 9

• var url = "example url"; Is that really in your code or did you change it for posting it here? – flx Commented Jan 24, 2018 at 14:10
• I changed it, removed the sensitive data... – user348246 Commented Jan 24, 2018 at 14:12
• Can you post the exact PHP-Error – flx Commented Jan 24, 2018 at 14:14
• Inspect actual request in browser dev tools network and see what is actually sent and how it differs from alternate approach. Some basic debugging is needed – charlietfl Commented Jan 24, 2018 at 14:16
• Notice: Undefined index: limit in /var/www ... on line ... echo ($_POST['limit']); - that is in php, as I said the first code is working ok – user348246 Commented Jan 24, 2018 at 14:25

 |  Show 4 more ments

1 Answer 1

Sorted by: Reset to default 3

If you check your request header at your server side, you will see that your request was sent as text/plain. To make PHP see the request as a $_POST you will need to set the request header to 'application/x-www-form-urlencoded', which should e after xhr.open() and before xhr.onload. https://developer.mozilla/en-US/docs/Web/Guide/AJAX/Getting_Started shows a basic Ajax usage.

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