$ .post不返回数据

Question

I'm very new at jquery and I think I don't fully understand what I'm doing yet.

I'm trying to retrieve data from my db without reloading my page by doing so:

$('.add-team-member').click(function(e) {
    e.preventDefault();
    $.post('?c=Data&action=getData&class=TeamMember', function(data) {
        console.log(data);
    })
    .fail(function() {
        console.log('fail');
    });
});

And here is my php file:

class DataController extends Controller{
    public static function getData()
    {
        //retrieve objects from my database and encode them as json string
        var_dump(json_encode($_GET['class']::findAll()));
        return json_encode($_GET['class']::findAll());
    }
}

The console.log(data) gives an empty string and fail function isn't called. I tested my php file separately and it works fine. Any advice for a humble beginner? Thank you!

EDIT: Seeing some of your comments made me think that $.post may not be the proper way to do it. What I'm trying to achieve is to retrieve data from my database without reloading the page. My aim is that clicking on my button would insert a dropdown list containing the names of the team members. And for that I need to get all the objects TeamMembers from my db. Is $.post a good way to achieve this goal?

EDIT 2: OK I got it! I didn't know I actually needed to echo my data to pass them to my JS file. I thought the return statement was doing the job. As I said, I'm quite new at this ^^ Thanks you "Don'tPanic" and "Taplar" for your help! You guys are awesome :-D

Answer 1

Doing what you want in a simpler way is:

First minimize your code as much as possible. This is done by the below logic.

//This is your HTML

//This is your form, if any.
<input id="value_01" type="text">
<input id="value_02" type="text">

//This is the link to call the JS function.
<a href="javascript:void(0);" class="add-team-member" id="add-team-member" onclick="addMember();">Add Member</a>

//This is the div to display the result. You can use your own.
<div id="fetched_result">

</div>

//This is your JS function to be called on click.
<script type="text/javascript">    
    function addMember() {
        //Fetch the values from your form, if any.
        var value_01 = $('#value_01').val();
        var value_02 = $('#value_02').val();

        $.ajax({
            type: "POST",
            url: "your-php-script.php", // Name of the php files
            data: {value_01 : value_01, value_02 : value_02},

            success: function(html)
            {   
                $("#fetched_result").html(html);
            }
        });
    }

Below is your PHP script.

<?php
    if ($_POST) {
        $value_01 = $_POST['value_01'];
        $value_02 = $_POST['value_02'];

        //Process your Posted values with PHP

        //You need to echo your output. This will be populated in your result div as is.
        $result = "<strong>" . $fetched_value;

        echo $result;
    }
?>

Hope this works.