ajax - How to write values coming from form input to json using php

Question

Since I needed a server side language I used PHP. However I cannot write the data coming from the ajax using the JSON.stringify method.

$('#add-order').on('click',function(){

    //create an object for orders
    var order = {   

        name : $('#name').val(),
        drink : $('#drink').val()
    };

    $.ajax({
        url : 'add_order.php',
        type : 'POST',
        data : order,
        dataType : 'json',
        success : function(newOrder){
            console.log(newOrder.name);
            $('#orders').append('<li>' + newOrder.name + ' : ' + newOrder.drink + '</li>');
        },
        error: function(){
            console.log('error connecting');
        }
    });

});

Here's the index.php

<h4>Add a Coffee Order</h4>
<ul id="orders">

</ul>

<p><input type="text" id="name"></p>

<p><input type="text" id="drink"></p>

<button type="submit" id="add-order">Add</button>

add_order.php

   if (isset($_POST['submit'])) {
        $orders = $_POST['data'];
        $orderFile = fopen('api/orders.json', 'w');

       fwrite($orderFile, $orders);
       fclose($orderFile);
   }

When I hard coded any string to fwrite($orderFile, "my orders") it will write on the orders.json however when I used the $orders it's not working. Am i missing something here?

Answer 1

you're posting to api/orders.json which is incorrect, you should be posting to the file that processes the request, like index.php.
Passing an object as the data parameter does not convert it to json, you have to actually do it yourself. So if you want $_POST['data'] to hold the order data as json

$.ajax({
    url : 'index.php',
    type : 'POST',
    data : {data: JSON.strinify(order)},
    dataType : 'json',
    success : function(newOrder){
        console.log(newOrder.name);
        $('#orders').append('<li>' + newOrder.name + ' : ' + newOrder.drink + '</li>');
    },
    error: function(){
        console.log('error connecting');
    }
});