Ajax取PHP JSON数据并显示

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
        <title>Document</title>
    </head>

    <body style="padding-top: 30px;">
        <button id="btnJson">JSON</button>
        <table class="table"></table>
        <script type="text/javascript">
            $(function() {
                $("#btnJson").click(function() {
                    $.ajax({
                        type: "get",
                        url: "json.php",
                        dataType: "json",
                        async: true,
                        success: function(data) {
                            var item;
                            $.each(data, function(i, result) {
                                item = "<tr><td>" + result['city'] + "</td><td>" + result['phone'] + "</td></tr>";
                                $('.table').append(item);
                            });
                        }
                    });
                })
            })
        </script>
    </body>

</html>

JSON.PHP

<?php
    $host = '127.0.0.1';
    $user = 'root';
    $password = '';
    $database = 'yiibaidb';
    $conn = new mysqli($host, $user, $password, $database);
    if (!$conn) {
        die("数据库连接失败！" . $conn -> connect_error);
    }
    $sql = "SELECT * FROM `offices`";
    $result = $conn -> query($sql);
    $arr = array();
    if ($result -> num_rows > 0) {
        while ($rows = $result -> fetch_assoc()) {
            $arr[] = $rows;
        }
    }
    echo json_encode($arr);
    $conn -> close();
?>