使用jquery ajax和php多次下拉,为fetch_assoc()提供致命错误

I am following this tutorial - http://www.thesoftwareguy.in/multiple-dropdown-with-jquery-ajax-and-php/.. This code give a fatal error.. (Fatal error: Call to undefined method mysqli_stmt::fetch_assoc() in D:\xampp\htdocs\multiple_drop_down\index.php on line 47) PLease help me in this..

<?php
include('dbconfig.php');
?>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Multiple dropdown with jquery ajax and php">
    <meta name="keywords" content="Multiple dropdown with jquery ajax and php">
    <meta name="author" content="Shahrukh Khan">
    <title>Multiple dropdown with jquery ajax and php - thesoftwareguy</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <style>
        select {
            padding:3px;
            border-radius:5px;
            background: #f8f8f8;
            color:#000;
            border:1px solid #EB028F;
            outline:none;
            display: inline-block;
            width:250px;
            cursor:pointer;
            text-align:left;
            font:inherit;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="body">
            <div class="mainTitle" >Multiple dropdown with jquery ajax and php</div>
            <div class="height20"></div>
            <article>
                <table style="margin:0 auto;width:50%" >
                    <tr>
                        <td align="center" height="50">
                            <?php
                             $sql = "SELECT * FROM tbl_country ORDER BY country_name";
                            try {
                                $stmt = $conn->prepare($sql);
                                $stmt->execute();
                                $results = $stmt->fetchAll();
                            } catch (Exception $ex) {
                                echo($ex->getMessage());
                            }
                            ?>
                            <label>Country:
                                <select name="country" onChange="showState(this);">
                                    <option value="">Please Select</option>
                                    <?php foreach ($results as $rs) { ?>
                                        <option value="<?php echo $rs["id"]; ?>"><?php echo $rs["country_name"]; ?></option>
                                    <?php } ?>
                                </select>
                            </label>
                        </td>
                    </tr>
                    <tr>
                        <td align="center" height="50"><div id="output1"></div> </td>
                    </tr>
                    <tr>
                        <td align="center" height="50"><div id="output2"></div> </td>
                    </tr>
                </table> 
                <div class="height10"></div>
                <div style="margin:10px 0;width:100%;float: left;">
                    <div style="width:35%;float: left;margin:0 auto;text-align: center;">

                    </div>
                    <div style="width:35%;float: left;margin:0 auto;text-align: center;">
                        <!-- Place this tag where you want the widget to render. -->


                        <!-- Place this tag after the last widget tag. -->
                        <script type="text/javascript">
                            (function() {
                                var po = document.createElement('script');
                                po.type = 'text/javascript';
                                po.async = true;
                                po.src = 'https://apis.google.com/js/platform.js';
                                var s = document.getElementsByTagName('script')[0];
                                s.parentNode.insertBefore(po, s);
                            })();
                        </script>
                    </div>
                    <div style="width:30%;float: left;margin:0 auto;text-align: center;">

                        <script type="text/javascript">
                            window.twttr = (function(d, s, id) {
                                var t, js, fjs = d.getElementsByTagName(s)[0];
                                if (d.getElementById(id))
                                    return;
                                js = d.createElement(s);
                                js.id = id;
                                js.src = "https://platform.twitter.com/widgets.js";
                                fjs.parentNode.insertBefore(js, fjs);
                                return window.twttr || (t = {_e: [], ready: function(f) {
                                        t._e.push(f)
                                    }});
                            }(document, "script", "twitter-wjs"));
                        </script>
                    </div>
                </div>


            </article>
            <div class="height10"></div>

        </div>
    </div>
    <script src="jquery-1.9.0.min.js"></script>
    <script>
                function showState(sel) {
                    var country_id = sel.options[sel.selectedIndex].value;
                    $("#output1").html("");
                    $("#output2").html("");
                    if (country_id.length > 0) {

                        $.ajax({
                            type: "POST",
                            url: "fetch_state.php",
                            data: "country_id=" + country_id,
                            cache: false,
                            beforeSend: function() {
                                $('#output1').html('<img src="loader.gif" alt="" width="24" height="24">');
                            },
                            success: function(html) {
                                $("#output1").html(html);
                            }
                        });
                    }
                }

                function showCity(sel) {
                    var state_id = sel.options[sel.selectedIndex].value;
                    if (state_id.length > 0) {
                        $.ajax({
                            type: "POST",
                            url: "fetch_city.php",
                            data: "state_id=" + state_id,
                            cache: false,
                            beforeSend: function() {
                                $('#output2').html('<img src="loader.gif" alt="" width="24" height="24">');
                            },
                            success: function(html) {
                                $("#output2").html(html);
                            }
                        });
                    } else {
                        $("#output2").html("");
                    }
                }
    </script>
</body>

No need to use prepare statement without bind to parameter

$result = $conn->query($sql);
$data = $result->fetch_assoc();

or

     $stm= $conn->prepare($sql);
     $stm->execute();
   $data = $stm->fetch_assoc();