實驗2014052801:動態網頁中的動態思想

時間 2020-09-10

標籤實驗動態網頁動態思想简体版

原文原文鏈接

目標:實現留言板功能javascript

工具:php

　　HTML+CSS:靜態網站css

　　JAVASCRIPT:前臺腳本html

　　PHP:後臺腳本java

　　MYSQL:數據儲存mysql

　　XAMPP:創建環境web

實驗1:網頁規劃sql

實驗2:靜態網頁數據庫

　　一、HTML：添加控件，細分層次瀏覽器

　　index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=gb2312" />
        <script  type="text/javascript" src="./js/lyb.js"></script>
        <link rel=stylesheet type=text/css href=./css/lyb.css>
    </head>
    <body>
        <div>
            <div><h1>留言板</h1></div>
            <div>
                <div>
                    <div>
                        <div>
                        </div>
                        <div>
                        </div>
                        <br><br>
                        <br>
                        <div>
                        </div>
                    </div>
                    <br>
                    <br>
                </div>
                <div>
                    <div><a href="http://localhost/lyb/index.php?page=1">首頁</a></div>
                </div>
            </div>
            <br>
            <div>
                <div>
                    <textarea cols=100% rows=4 id="content" value=""></textarea>
                </div>
                <div>
                    <div>
                        驗證碼：
                        <input type='text' value="" id='confirm'>
                    </div>
                    <div>
                        <img src="./src/img/0.jpg"  id='n1'>
                    </div>
                    <div class="img_confirm">
                        <img src="./src/img/1.jpg"  id='n2'>
                    </div>
                    <div class="img_confirm">
                        <img src="./src/img/2.jpg"  id='n3'>
                    </div>
                    <div class="img_confirm">
                        <img src="./src/img/3.jpg"  id='n4'>
                    </div>
                </div>
                <div>
                    <input type="submit" value="提交" >
                </div>
            </div>
        </div>
        
    </body>
    
</html>

　　二、CSS：層次格式設置

　　index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=gb2312" />
        <script  type="text/javascript" src="./js/lyb.js"></script>
        <link rel=stylesheet type=text/css href=./css/lyb.css>
    </head>
    <body>
        <div class=total>
            <div><h1>留言板</h1></div>
            <div class="d1">
                <div>
                    <div class="content">
                        <div class="floor">
                        </div>
                        <div class="time">
                        </div>
                        <br><br>
                        <br>
                        <div>
                        </div>
                    </div>
                    <br>
                    <br>
                </div>
                <div>
                    <div class=page2><a href="http://localhost/lyb/index.php?page=1">首頁</a></div>
                </div>
            </div>
            <br>
            <div class="d2">
                <div>
                    <textarea cols=100% rows=4 id="content" value=""></textarea>
                </div>
                <div>
                    <div class="text_confirm">
                        驗證碼：
                        <input type='text' value="" id='confirm'>
                    </div>
                    <div class="img_confirm">
                        <img src="./src/img/0.jpg" class="image" id='n1'>
                    </div>
                    <div class="img_confirm">
                        <img src="./src/img/1.jpg" class="image" id='n2'>
                    </div>
                    <div class="img_confirm">
                        <img src="./src/img/2.jpg" class="image" id='n3'>
                    </div>
                    <div class="img_confirm">
                        <img src="./src/img/3.jpg" class="image" id='n4'>
                    </div>
                </div>
                <div class="submit">
                    <input type="submit" value="提交" >
                </div>
            </div>
        </div>
        
    </body>
    
</html>

　　lyb.css

html
    {
        background: #f7f7f7 url('image/bg.jpg');
        height: 100%;
    }
.total{
    width:80%;
    margin-left: auto;
    margin-right: auto;
}
.para{
    border-style: solid; 
    border-width: 1px;
}
.d1{
    padding:2em;
    background-color:white;
    -moz-transition: background-color .25s ease-in-out;
    -webkit-transition: background-color .25s ease-in-out;
    -o-transition: background-color .25s ease-in-out;
    -ms-transition: background-color .25s ease-in-out;
    transition: background-color .25s ease-in-out;
    text-decoration: none;
    border-radius: 20px;
    outline: 0;
}

.content
    {
        width:98%;
        position: relative;
        display: inline-block;
        #background: #0090c5;
        #color: #fff;
        text-decoration: none;
        #border-radius: 20px;
        border-bottom:black 1px solid;
        font-weight: 800;
        outline: 0;
        -moz-transition: background-color .25s ease-in-out;
        -webkit-transition: background-color .25s ease-in-out;
        -o-transition: background-color .25s ease-in-out;
        -ms-transition: background-color .25s ease-in-out;
        transition: background-color .25s ease-in-out;
        padding:1%;
    }
.time{
    text-align:right;
    width:20%;
    float:right;
}
.floor{
    width:20%;
    float:left;
}
.page{
    #width:20px;
    #float:left;
    #border:black 1px solid;
    #text-align:center;
    #margin-right:5px;

    background: none repeat scroll 0px 0px rgb(255, 255, 255);
    border: 1px solid rgb(231, 236, 240);
    color: rgb(0, 0, 205);
    float: left;
    height: 22px;
    line-height: 22px;
    margin-right: 5px;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    width: auto;
    padding: 0px 8px;

}
.page1{
    #width:20px;
    #float:left;
    #border:black 1px solid;
    #text-align:center;
    #margin-right:5px;

    background: none repeat scroll 0px 0px rgb(255, 255, 255);
    border: 1px solid rgb(231, 236, 240);
    color: rgb(0, 0, 205);
    float: left;
    height: 22px;
    line-height: 22px;
    margin-right: 5px;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    width: auto;
    padding: 0px 8px;

}
.page2{
    #width:20px;
    #float:left;
    #border:black 1px solid;
    #text-align:center;
    #margin-right:5px;

    background: none repeat scroll 0px 0px rgb(255, 255, 255);
    border: 1px solid rgb(231, 236, 240);
    color: rgb(0, 0, 205);
    float: left;
    height: 22px;
    line-height: 22px;
    margin-right: 5px;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    width: auto;
    padding: 0px 8px;

}
.img_confirm{
    width:auto;
    height:auto;
    float:left;
}
.text_confirm{
    float:left;
}
.submit{
    width:100%;
    float:left;
}
.image{
    height:30px;
}

　　三、JS：設置驗證碼,提交留言內容

　　index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=gb2312" />
        <script  type="text/javascript" src="./js/lyb.js"></script>
        <link rel=stylesheet type=text/css href=./css/lyb.css>
    </head>
    <body onload='init()'>
        <div class=total>
            <div><h1>留言板</h1></div>
            <div class="d1">
                <div>
                    <div class="content">
                        <div class="floor">
                        </div>
                        <div class="time">
                        </div>
                        <br><br>
                        <br>
                        <div>
                        </div>
                    </div>
                    <br>
                    <br>
                </div>
                <div>
                    <div class=page2><a href="http://localhost/lyb/index.php?page=1">首頁</a></div>
                </div>
            </div>
            <br>
            <div class="d2">
                <div>
                    <textarea cols=100% rows=4 id="content" value=""></textarea>
                </div>
                <div>
                    <div class="text_confirm">
                        驗證碼：
                        <input type='text' value="" id='confirm'>
                    </div>
                    <div class="img_confirm">
                        <img src="./src/img/0.jpg" class="image" id='n1'>
                    </div>
                    <div class="img_confirm">
                        <img src="./src/img/1.jpg" class="image" id='n2'>
                    </div>
                    <div class="img_confirm">
                        <img src="./src/img/2.jpg" class="image" id='n3'>
                    </div>
                    <div class="img_confirm">
                        <img src="./src/img/3.jpg" class="image" id='n4'>
                    </div>
                </div>
                <div class="submit">
                    <input type="submit" value="提交" onclick="insert()">
                </div>
            </div>
        </div>
        
    </body>
    
</html>

　　lyb.js

var n1,n2,n3,n4,conf;
function init(){
    n1=Math.floor(Math.random()*(9+1));
    n2=Math.floor(Math.random()*(9+1));
    n3=Math.floor(Math.random()*(9+1));
    n4=Math.floor(Math.random()*(9+1));
    
    document.getElementById('n1').src='./src/img/'+n1+'.jpg';
    document.getElementById('n2').src='./src/img/'+n2+'.jpg';
    document.getElementById('n3').src='./src/img/'+n3+'.jpg';
    document.getElementById('n4').src='./src/img/'+n4+'.jpg';
    conf=n1.toString()+n2.toString()+n3.toString()+n4.toString();
    //console.log(conf);
}

function insert(){
    var content=document.getElementById("content").value;
    var nconf=document.getElementById("confirm").value;
    if(content==""){
        alert("留言內容不能爲空！");
        return;
        }
    if(nconf!=conf){
        alert("驗證碼錯誤！");
        return ;
    }
    //console.log(content);
    var date=new Date();
    var now=date.toLocaleTimeString();
    //console.log(now);
    document.getElementById("content").value="";
    var month=date.getMonth()+1;
    now=date.getFullYear()+'.'+month+'.'+date.getDate()+' '+now;
    request(now,content);
}

var xmlhttpreq=new XMLHttpRequest();

function request(now,content){
    xmlhttpreq=new XMLHttpRequest();

    xmlhttpreq.onreadystatechange=updatePage;
    
    //console.log(content);
    //console.log(now);
    
    xmlhttpreq.open("GET","http://localhost/lyb/process.php?time="+now+"&text="+content,true);

    xmlhttpreq.send(null);
}

function updatePage() {
  if (xmlhttpreq.readyState == 4) {
    if(xmlhttpreq.status!=200){
        alert("An error occurred:"+xmlhttpreq.statusText);
        return ;
    }
    console.log(xmlhttpreq.responseText);
    location.reload(true);
  }
  
}

實驗3：動態網頁

　　一、PHP：讀取留言內容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=gb2312" />
        <script  type="text/javascript" src="./js/lyb.js"></script>
        <link rel=stylesheet type=text/css href=./css/lyb.css>
    </head>
    <body onload='init()'>
        <div class=total>
            <div><h1>留言板</h1></div>
            <div class="d1">
                <div>
                    <?php
                        $rec=0;
                        $page=$_GET['page'];
                        mysql_connect("localhost","root");
                        mysql_select_db('lyb');
                        $str="SELECT * FROM message";
                        $result=mysql_query($str);
                        if($tnum=mysql_num_rows($result)){
                            while($row=mysql_fetch_array($result)){
                                $rec=$rec+1;
                                if($rec<=10*($page-1))continue;
                                if($rec>10*$page)continue;
                    ?>
                    <div class="content">
                        <div class="floor">
                            <?php
                                echo $rec;
                                echo '樓';
                            ?>
                        </div>
                        <div class="time">
                            <?php 
                                echo $row['time'];
                            ?>
                        </div>
                        <br><br>
                        <br>
                        <div>
                            <?php
                                echo $row['content'];
                            ?>
                        </div>
                    </div>
                    <br>
                    <br>
                    <?php
                            }
                        }
                    ?>
                </div>
                <div>
                    <div class=page2><a href="http://localhost/lyb/index.php?page=1">首頁</a></div>
                    <?php
                        echo sprintf('<div class=page1><a href="http://localhost/lyb/index.php?page=%d">前一頁</a></div>',$page>1?$page-1:$page);
                        $lim=$page-1+5;
                        for($i=$page-1-4;$i<$tnum/10&&$i<=$lim;$i++){
                            if($i<0){$lim++;continue;}
                            echo sprintf('<div class=page><a href="http://localhost/lyb/index.php?page=%d">%d</a></div>',($i+1),($i+1));
                        }
                        echo sprintf('<div class=page1><a href="http://localhost/lyb/index.php?page=%d">後一頁</a></div>',$page<$i?$page+1:$page);
                        echo sprintf('<div class=page2><a href="http://localhost/lyb/index.php?page=%d">尾頁</a></div>',$i);
                        mysql_close();
                    ?>
                </div>
            </div>
            <br>
            <div class="d2">
                <div>
                    <textarea cols=100% rows=4 id="content" value=""></textarea>
                </div>
                <div>
                    <div class="text_confirm">
                        驗證碼：
                        <input type='text' value="" id='confirm'>
                    </div>
                    <div class="img_confirm">
                        <img src="./src/img/0.jpg" class="image" id='n1'>
                    </div>
                    <div class="img_confirm">
                        <img src="./src/img/1.jpg" class="image" id='n2'>
                    </div>
                    <div class="img_confirm">
                        <img src="./src/img/2.jpg" class="image" id='n3'>
                    </div>
                    <div class="img_confirm">
                        <img src="./src/img/3.jpg" class="image" id='n4'>
                    </div>
                </div>
                <div class="submit">
                    <input type="submit" value="提交" onclick="insert()">
                </div>
            </div>
        </div>
        
    </body>
    
</html>

　　二、PHP：保存留言內容

<html>
    <head>
        <meta   http-equiv="content-type"   content="text/html;   charset=gb2312">
    </head>
    <body>
        <?php
            $text=$_GET['text'];
            $time=$_GET['time'];
            mysql_connect("localhost","root");
            mysql_select_db('lyb');
            $str=sprintf('INSERT INTO message VALUES(\'%s\',\'%s\')',$time,$text);
            $str = iconv("UTF-8", "GB2312", $str);
            echo $str;
            mysql_query($str);
            //$str="ALTER TABLE `message` ORDER BY `time` DESC";
            //mysql_query($str);
            mysql_close();
        ?>
    </body>
</html>

總結：

　　動態網頁中的動態，在於能夠根據數據庫中的數據改變網頁內容。當瀏覽器發送請求後，服務器運行後臺腳本代碼改變網頁代碼，並把改變後的代碼發送回瀏覽器。瀏覽器沒法看見後臺腳本。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。