How to get json from php file to javascript?

I have a PHP file that outputs JSON from the MySQL database, I wanted to get that JSON output into HTML file and display as a table. It works fine when I use the JSON output as it is, but I wanted to take that PHP file as a URL or as a file and get the result as a table in the HTML file.

please help.

<script>
    $(document).ready(function() {         
        //its works fine if a give the json output as it is.
        var data = getJSON('http://localhost:8081/mohamed%20ashif/fetch.php', data, function(jsonData) {

        });


        for (var i = 0; i < data.report.length; i++) {
            var tr = $('<tr/>');

            // Indexing into data.report for each td element
            $(tr).append("<td>" + data.report[i].id + "</td>");
            $(tr).append("<td>" + data.report[i].name + "</td>");
            $(tr).append("<td>" + data.report[i].user_id + "</td>");
            $(tr).append("<td>" + data.report[i].posts + "</td>");
            $('.table1').append(tr);
        }
    });
</script>

<div class="container">
    <div class="row">
        <div class="table-responsive">
            <table class="table1 table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>NAME</th>
                        <th>USER ID</th>
                        <th>POSTS</th>
                    </tr>
                </thead>

            </table>
        </div>
    </div>
</div>