javascript-为什么ajax只显示最后一个数据

我试图通过ajax从我的数据库中检索数据,console.log显示了我想要的所有结果,但是在我的html中,它仅显示一个结果,即最后一个数据.为什么是这样？有人可以帮帮我吗？

我是新手,很容易回答：)

我的代码如下；

的HTML

<div class="mI">            

        <section>
                <div class="pM" id="m1"></div>
            </form>
        </section>

        <aside class="mBI">
            <div class="mT">
                <p id="m2"></p>
            </div>

            <p id="mG"></p>
            <p style="margin-top:-8px" id="m3"></p>

        </aside>    
</div>

JAVASCRIPT

$(document).ready(function() {
    "use strict";
    function connect2mO() {
        $.ajax({
            url: "tes.PHP",
            type: "GET",
            //data:"",
            dataType: "json",
            //async:false,
            success: function(data) {
                $.each(data, function() {
                    var mP = this.p;
                    var mT = this.t;
                    var mG = this.g;

                    console.log(mP);
                    console.log(mT);
                    console.log(mG);


                    $('#m1').html('<img src="p/' + mP + '"/>');
                    $('#m2').html(mT);
                    $('#m3').html(mG);
                });
            },
            error: function connect2mO() {
                alert('error loading mO');
            }
        });
    }
    if (window.attachEvent) {
        window.attachEvent('onload', connect2mO);
    } else if (window.addEventListener) {
        window.addEventListener('load', connect2mO, false);
    } else {
        document.addEventListener('load', connect2mO, false);
    }
});

的PHP

<?PHP
        include ('session_start.PHP');        
        include ('db_connect_mO.PHP');

    $sql = MysqLi_query($con, "SELECT * FROM mo ORDER BY mRD");
    $row = MysqLi_fetch_array($sql);

        while ($row = MysqLi_fetch_assoc($sql)) 

        {           
            $test[]= array( 
                            'p'=> $row['mP'],
                            't'=> $row['mT'],
                            'g'=> $row['mG'],
                        );
        }

        header('Content-Type: application/json');
        echo json_encode ($test);

        //detailed error reporting
        if (!$sql) 
        {
            echo 'MysqL Error: ' . MysqLi_error($db);
        exit;

        }
?>

下面的代码将在PHP中输出什么,它是我使用ajax试图实现的结果.

<?PHP while ($row = MysqLi_fetch_assoc($sql)) { ?>

<div class="mI">            

        <section>
                <div class="pM"><img src="p/<?PHP echo $row["mP"];?>" alt=""/></div>
        </section>

        <aside class="mBI">
            <div class="mT">
                <p><?PHP echo $row["mT"];?></p>
            </div>

            <p id="mG"></p>
            <p style="margin-top:-8px"><?PHP echo $row["mG"];?></p>

        </aside>    
</div>

<?PHP } ?>

解决方法:

      var data = [{'p': 'p1', 't':'t1', 'g': 'g1'},{'p': 'p2', 't':'t2', 'g': 'g2'},{'p': 'p3', 't':'t3', 'g': 'g3'}];

          $.each(data, function() {

            $.each(this, function(key,value) {

              var display = '<div>'+ key +' = ' +value+ ' </div>';

              $('body').append(display);

            });

          });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

对于您的代码,您可以这样做

var data = [{'p': 'p1', 't':'t1', 'g': 'g1'},{'p': 'p2', 't':'t2', 'g': 'g2'},{'p': 'p3', 't':'t3', 'g': 'g3'}];

    $.each(data, function() {

    var html = '<hr>'+

    '<div class="mI">'+     

        '<section>'+
                '<div class="pM" >' + this.p + '</div>'+
            '</form>'+
        '</section>'+

        '<aside class="mBI">'+

            '<div class="mT">'+
                '<p>' + this.t + '</p>'+
            '</div>'+

            '<p></p>'+
            '<p style="margin-top:-8px" id="m3">' + this.g + '</p>'+

        '</aside>'+    
    '</div>';

    $('body').append(html);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>