简单的交互的例子

首先是一个ajax请求的例子

<ul id="listul"></ul>

<script type="text/javascript">
        ajax({
            type:'GET',
            url:'data.php',//数据地址
            data:'',
            success:function(res){
                var result=JSON.parse(res);
                        show(result);
                                    }
                                }); 
function show(result){
    var str="";
        for(var i=0;i<result.length;i++){
        for(var j=0;j<result[i].length;j++){
        str+='<li class="sy-news-border"><a href='+result[i][j].url1+'>'+result[i][j].dec+'</a><span>'+result[i][j].time+'</span></li>';
                                    document.getElementById("listul").innerHTML=str;
                                }
                                    }
                                        }
    </script>

ajax.js是我自己封装的一个插件

function ajax(myjson){
            var xmlhttp;
                if(window.XMLHttpRequest) {
                    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                    xmlhttp = new XMLHttpRequest();
                } else {
                    // IE6, IE5 浏览器执行代码
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                };

            var type=myjson.myjson;
            var url=myjson.url;
            var data=myjson.data;
            var success=myjson.success;
            xmlhttp.open(type,url,true);
            xmlhttp.send();
            xmlhttp.onreadystatechange=function(){
                if(xmlhttp.status==200&&xmlhttp.readyState==4){
                    success(xmlhttp.responseText);
                }
        }
}

php数据

<?php
    header('content-type:text/html;charset="utf-8"');
    $news=array(
    array(
            array( 'time'=>'[2014-07-04]','url1'=>'http://finance.qq.com/money/cbt/index.html', 'dec'=>'2017年春拍Top10：那些价值过亿的拍品','url2'=>'http://finance.qq.com/money/cbt/index.html' ),
            array( 'time'=>'[2014-07-04]', 'url1'=>'http://finance.qq.com/money/cbt/index.html', 'dec'=>'用篮球说话 男篮那些不该发生的闹剧','url2'=>'http://sports.qq.com/a/20170811/003424.htm#p=1' ),
            array( 'time'=>'[2014-07-04]', 'url1'=>'http://finance.qq.com/money/cbt/index.html','dec'=>'章子怡拍大片只有一个背景 演绎东方美人', 'url2'=>'http://fashion.qq.com/a/20170811/020952.htm' ),
            array( 'time'=>'[2014-07-04]', 'url1'=>'http://finance.qq.com/money/cbt/index.html','dec'=>'杨幂陈乔恩教你大胸妹子如何秒杀平胸妹', 'url2'=>'http://fashion.qq.com/a/20170811/021179.htm' ),
    ),
    array(
            array( 'time'=>'[2014-07-04]','url1'=>'http://finance.qq.com/money/cbt/index.html', 'dec'=>'2017年春拍Top10：那些价值过亿的拍品','url2'=>'http://finance.qq.com/money/cbt/index.html' ),
            array( 'time'=>'[2014-07-04]', 'url1'=>'http://finance.qq.com/money/cbt/index.html', 'dec'=>'用篮球说话 男篮那些不该发生的闹剧','url2'=>'http://sports.qq.com/a/20170811/003424.htm#p=1' ),
            array( 'time'=>'[2014-07-04]', 'url1'=>'http://finance.qq.com/money/cbt/index.html','dec'=>'章子怡拍大片只有一个背景 演绎东方美人', 'url2'=>'http://fashion.qq.com/a/20170811/020952.htm' ),
            array( 'time'=>'[2014-07-04]', 'url1'=>'http://finance.qq.com/money/cbt/index.html','dec'=>'杨幂陈乔恩教你大胸妹子如何秒杀平胸妹', 'url2'=>'http://fashion.qq.com/a/20170811/021179.htm' ),
                )   
    );

    echo json_encode($news);
?>

好了这就是ajax交互。就是通过ajax方法将数据写进前端的页面里面

接下来说说数据库的数据获取。怎样写到前端页面里面

<?php
                                            $link=mysqli_connect("localhost","root","root");
                                            if(!$link){
                                                exit("数据库链接失败");
                                            }
                                            mysqli_set_charset($link,"utf8");
                                            mysqli_select_db($link,"news");
                                            $sql="select * from data where id<=8";
                                            $res=mysqli_query($link,$sql);
                                            echo "<ul>";
                                            while($rows=mysqli_fetch_assoc($res)){
                                                echo "<li class='sy-news-border'>";
                                                echo "<a href='sfgk-detail.html' class='dynamic-news'>";
                                                echo $rows["title"];
                                                echo "</a>";
                                                echo "<span>".$rows["time"]."</span>";
                                                echo "</li>";
                                            }
                                            echo "</ul>";
                                            echo "</tbody></table>";
                                            mysqli_close($link);
                                    ?>

将上面的代码写进你要在页面中布局的地方，当然关于样式的问题，自己去定义。在这里不多述。

这里只是用的mysqli的方法访问数据库，数据库还有其他的方法访问。