编程语言
首页 > 编程语言> > ajax加php实现动态加载数据(前后端不分离)

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(){

            getList();

        },5000)

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

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

            });
        }

 

标签:function,stripslashes,rs,代码,getList,ajax,php,加载
来源: https://www.cnblogs.com/yite/p/11440061.html