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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript-为什么ajax只显示最后一个数据，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2825字，纯文字阅读大概需要5分钟。

内容图文

我试图通过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>

内容总结

以上是互联网集市为您收集整理的javascript-为什么ajax只显示最后一个数据全部内容，希望文章能够帮你解决javascript-为什么ajax只显示最后一个数据所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端