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);

            });
        }