PHP ReactJS/Axios Ajax POST to codeigniter problem

On the codeigniter side the post data isn't being received.  PHP is however receiving it.

Here is the ajax call
   
    var postData = {
        'partNumber' : '45367'
    }
axios.post('http://localhost/stuff/index.php/admin/reactTestaroo', postData)
        .then(response => renderTheTestData(response.data))

Open in new window


Here is what is in my PHP/CI controller:
    function reactTestaroo(){
        $entityBody = file_get_contents('php://input'); // just as a test I used this and it returns "{'partNumber':'45367'}" which seems to indicate it's being passed fine
        $pastNumber = $this->input->post('partNumber'); // returns NULL, this is the problem.. it should show the part number value.  
    }

Open in new window


I can use jQuery ajax all day long and it works fine like this:
    $.ajax({
        url: 'http://localhost/stuff/index.php/admin/reactTestaroo',
        data: postData,
        type: 'POST',
        success: function(response) {
        var parsedJSON = $.parseJSON(response);
        renderTheTestData(parsedJSON.part_name)
        },
        error: function(response){
            alert('nope');
        }
    });

Open in new window

With jQuery it works every time but I want to ditch jQuery and use react and a ajax plugin like axios but clearly I'm having an issue with it.  Can someone help me get the ajax via axios working?
LVL 1
tf2012Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
I don't understand this part
On the codeigniter side the post data isn't being received.  PHP is however receiving it.
What is the difference between CI and PHP?
0
tf2012Author Commented:
Using $entityBody = file_get_contents('php://input');  I can see that the values are being passed to PHP, however using $this->input->post I get null.  When I use jQuery, the value shows up in $this->input->post just fine.  I hope that helps
0
Julian HansenCommented:
file_get_contents('php://input') gets the raw post data - which is not always accessible through POST

For instance if the data posted to the service is JSON it won't be accessible by post - you have to use file_get_contents('php://input'); and then decode the JSON

$raw = file_get_contents('php://input');
$data = json_decode($raw);

Open in new window

0
Introduction to Web Design

Develop a strong foundation and understanding of web design by learning HTML, CSS, and additional tools to help you develop your own website.

tf2012Author Commented:
ok thanks, any idea how to force it to use post?  I don't necessarily need to submit it as JSON it could be a form submission format.. I'll play with that idea and maybe you have some thoughts about that.  Otherwise I'll have to use your suggestion of parsing it out of php://input
0
Julian HansenCommented:
If you have a look at the axios source it is intelligent enough to determine what type of data you are trying to send.

If you send postData as an Object it will post it as JSON
If you send it as a urlString (like the one that jQuery.serialize() will create from your form variables) then it posts it.

This sample script demonstrates the concept
HTML
	<h2>Results sending object</h2>
	<pre id="result"></pre>
	
	<h2>Results sending url string</h2>
	<pre id="result2"></pre>

Open in new window

Axios Code
<script>
var postData = {
  name: 'Bruce Wayne',
  symbol: 'Bat',
  car: 'Awesome'
}
axios.post('reflect.php',postData).then(function(resp) {
	document.getElementById('result').innerHTML = resp.data;
});
var urlData = "name=Clarke Kent&symbol=S&car=Doesn't Kneed One";
axios.post('reflect.php',urlData).then(function(resp) {
	document.getElementById('result2').innerHTML = resp.data;
});

</script>

Open in new window

Working sample here
Note that on the sample page the second Result pane shows the variables as POST variables.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
tf2012Author Commented:
thank you!
0
Julian HansenCommented:
You are welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
React

From novice to tech pro — start learning today.