ajax加php实现动态加载数据（前后端不分离）

 

公司一个已经维护了很久的管理系统近期要加功能，客户要求在中控台显示滚动字幕，但由于系统之前是用 <meta http-equiv="refresh" content="5"> 每隔5秒刷新一次页面来刷新数据的，所以滚动条刚走一会儿就会停止并从头再来。怎么样才能在数据刷新的时候不影响滚动条的正常工作呢？ajax出现在了我的脑海里，但对于ajax，本小白基本停留在只闻其高大上，不知其所以然的地步，于是上网找了一下教程，自己试着敲了一段代码，看着有模有样的代码，嘴角勾起一个放肆的弧度，心中暗喜‘我也是可以的嘛，哈哈’，接着放上线，看到控制台一片鲜艳的红色，嘴角弧度凝固，转头便是可怜巴巴地望着隔壁桌的大神。大神只望了我的代码一眼便指出了我的错误；“小同志，这个系统的前后端是不分离的，你这段ajax代码是前后端分离的，当然不能正常使用啦，来，看哥给你露两手”。接着便是一顿操作猛如虎，看得我那真的是无（昏）比（昏）佩（欲）服（睡），最后上线测试，一切ok。后来研究了一下，发现ajax还真的不难，模仿大神的思路将其他几个模块的数据都换成了ajax，这代码，越敲越上瘾啊，哈哈！接下来把涉及ajax的代码奉上供大家学习，如有错误，欢迎大家批评指正。

 

 

php（必须放在先于页面的位置，不然会整个页面无限刷新）

<?php


$ProType = empty($_GET["ProType"]) ? '' : $_GET["ProType"];


if ($ProType=='getList') {


    ?>


<?php

$sql_r = "select dd.*,member.name as bm from dd left join member on member.id=dd.js where dd.status=1 order by dd.jj desc,dd.id asc";
foreach ($dbh->query($sql_r) as $key=> $rs_r) {

    $id = $rs_r["id"];
    $name = stripslashes($rs_r["name"]);
    $cx = stripslashes($rs_r["cx"]);
    $qh = stripslashes($rs_r["qh"]);
    $sl = stripslashes($rs_r["sl"]);
    $stime = stripslashes($rs_r["stime"]);
    $jj = stripslashes($rs_r["jj"]);
    $bm = stripslashes($rs_r["bm"]);
    ?>
    <tr class="cen" <? if($jj==1){echo "style=background:#ff0000;!important;color:#ffffff";}?>>
        <td style="font-size:30px;!important"><?php echo $name;?></td>
        <td style="font-size:30px;!important"><?php echo $cx; ?></td>
        <td style="font-size:30px;!important"><?php echo $qh; ?></td>
        <td style="font-size:30px;!important"><?php echo $sl; ?></td>
        <td style="font-size:30px;!important"><?php echo $stime; ?></td>
        <td style="font-size:30px;!important"><?php echo $bm; ?></td>
    </tr>
<?php }
    exit();
}


?>

 

 

html

<main class="main-cont content mCustomScrollbar" style="padding:0">
        
        <!--开始::结束-->
                     <marquee>我是滚动字幕</marquee>

                            <div class="panel-bd" style="padding:20px">
                                
                        <table class="table table-bordered table-striped table-hover">
                            <thead>
                            <tr>
                                <th style="font-weight:bold;font-size:30px;!important">客户名称</th>
                                <th style="font-weight:bold;font-size:30px;!important">车型</th>
                                <th style="font-weight:bold;font-size:30px;!important">颜色</th>
                                <th style="font-weight:bold;font-size:30px;!important">数量（L）</th>
                                <th style="font-weight:bold;font-size:30px;!important">预计交板时间</th>
                                <th style="font-weight:bold;font-size:30px;!important">工作代号</th>
                            </tr>
                            </thead>
                            <tbody id="aaa">

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

</main>

 

 

js（使用jQuery框架）

        console.log($('#aaa'));

        getList();

        setInterval(function(){ //每隔5秒刷新一次数据

            getList();

        },5000)

        //获取订单列表
        function getList(){
            $.get('?ProType=getList','',function(data){

                $('#aaa').html(data);

            });
        }