最近在做 Login 和 Register 的東西，因為需要用到 session 來存儲用戶的 id 和 用戶名，所以需要調用 php 中的 session。由於不會 Ajax， 所以不得不用一些笨辦法。通過在網上查，發現可以進行一下操作來在 html 中調用 PHP 的東西。
前提：session 中有兩個變量，一個 username， 一個 userid，此處用不到 userid
首先來看 login 部分的 html 代碼：
login.html （前面比較長可以不看，都是CSS樣式）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Login</title> 6 <link href="css/login-css.css" type="text/css" rel="stylesheet"/> 7 <link rel="stylesheet" href="style.css"> 8 <link rel="stylesheet" href="css/style.css"> 9 <style> 10 11 .login{ 12 border-style:solid; 13 border-width:medium; 14 height:30%; 15 width:20%; 16 margin-left:40%; 17 } 18 .container { 19 padding-left:25%; 20 padding-right:25%; 21 padding-top:10%; 22 } 23 h1 { 24 text-align:center; 25 } 26 .btn_log { 27 margin-left:25%; 28 margin-bottom:10%; 29 float:left; 30 } 31 #btn_register { 32 margin-left:15%; 33 padding-bottom:10%; 34 } 35 /* 這個部分是在按鍵的下方又增加了一個div塊，因為用了浮動以后margin-bottom就無效了，所以加了一個div的塊來增加空白位置 */ 36 #add_blank { 37 padding-bottom:15%; 38 } 39 40 </style> 41 </head> 42 43 <body> 44 <div class="logo"> 45 <img src="images/logo-new.png"> 46 </div> 47 <div class="con"> 48 49 <div id="navcontainer"> 50 <ul id="navlist" style="list-style: none;"> 51 <li style="float:left;margin-left:29px;" id="active"><a href="PetC.html" id="current">HOME</a></li> 52 <li style="float:left;margin-left:29px;" onmouseover="ShowSub(this)" onmouseout="HideSub(this)" > 53 <a href="products.html" >Product</a> 54 <ul style="position:absolute; display:none;" > 55 <li style="color:black; background-color:#4d4d4d;display:block;"><a href="service.html" style="z-index:9;">service</a></li> 56 <li style="color:black; background-color:#4d4d4d;display:block;"><a href="daycare.html" style="z-index:9;">Daycare</a></li> 57 </ul> 58 </li> 59 <li style="float:left;margin-left:29px;"><a href="login.html">Login</a></li> 60 <li style="float:left;margin-left:29px;"><a href="Register.html">Register</a></li> 61 <li style="float:left;margin-left:29px;"><a href="my.html">My Order</a></li> 62 <li style="float:left;margin-left:29px;"><a href="#">Contact</a></li> 63 </ul> 64 65 </div> 66 </div> 67 <div class="login"> 68 <form id="login_form" action="login.php" method="post"> 69 <div class="container"> 70 <h1>Login</h1> 71 <label><b>Username</b></label><br/> 72 <input type="text" name="username" required> 73 <br/><br/> 74 <label><b>Password</b></label><br/> 75 <input type="password" name="password" required> 76 </div> 77 <br/> 78 <div class="btn_log"> 79 <input type="submit" name="submit" value="Login"> 80 </div> 81 </form> 82 <a id="btn_register" href="Register.html"><button>Register</button></a> 83 <div id="add_blank"></div> 84 </div> 85 </body> 86 87 </html>
其次來看 login 的 php 代碼：
login.php
1 <?php 2 3 //************添加內容*************** 4 session_start(); 5 //************添加內容*************** 6 7 if(!isset($_POST['submit'])){ 8 exit('Invalid Visit!'); 9 } 10 11 12 // Create connection 13 $conn = mysqli_connect("localhost","root","","PetDB"); 14 15 // Check connection 16 if (!$conn) { 17 die("Connection failed: " . mysqli_connect_error()); 18 } 19 20 //session_start(); 21 22 $username = htmlspecialchars($_POST['username']); 23 $password = MD5($_POST['password']); 24 25 //檢測用戶名及密碼是否正確 26 $check_query = mysqli_query($conn,"SELECT id FROM user WHERE userName='$username' and passWd='$password' limit 1"); 27 if($result = mysqli_fetch_array($check_query)){ 28 //登錄成功 29 30 //************添加內容*************** 31 //將登陸用戶的用戶名及數據庫id存在session中 32 $_SESSION['username'] = $username; 33 $_SESSION['userid'] = $result['id']; 34 //************添加內容*************** 35 36 // echo "<script language=\"JavaScript\">alert('$username,welcome');</script>"; 37 // echo "<script language=javascript>alert($username,'Welcome<br/>');</script>"; 38 // echo $username,' Welcome<br/>'; 39 // echo 'Click here to <a href="login.html?action=logout">Logout</a><br />'; 40 header("Location: PetC"); 41 exit; 42 } else { 43 exit('Failed to login！Click here to <a href="javascript:history.back(-1);">Return</a>'); 44 } 45 46 ?>
在 login.php 中可以看到啟用了 session，並有 username 和 userid 兩個變量。並有一些數據庫的使用。
****************************************************************重點來了*************************************************
再其次看主頁的部分，因為主頁（PetC.html）比較長所以就主要放核心部分的代碼。
首先來看 logout.php 的代碼，因為比較簡單。
logout.php
1 <?php 2 session_start(); 3 session_unset(); 4 session_destroy(); 5 6 header("location:home.html"); 7 exit(); 8 ?>
這個沒什么解釋的，就是銷毀一下session。
接下來看一下 index.php
home.php
1 <?php 2 session_start(); 3 //獲取session中保存的username 4 if (isset($_SESSION['username'])) { 5 $logprint = $_SESSION['username']; 6 } 7 //將獲取值以JS的結構傳回 8 echo "var log="."'$logprint';"; 9 ?>
這個里面比較重點的部分是php 部分需要將變量以 JS 的語言形式回傳，這樣在html 中才可以利用 JS 來調用php 中的變量。其中 echo "var log="."'$logprint';"; 中的 . 是用來連接兩部分的。需要注意引號的分割。並不是將 . 括了起來。
最后就是 PetC.html 的部分
home.html （為了完整性copy了下來，主要是對第11和第15行的操作）
1 <div id="navcontainer" style="text-align:center;"> 2 <ul id="navlist" style="list-style: none;"> 3 <li style="float:left;margin-left:29px;" id="active"><a href="#" id="current">HOME</a></li> 4 <li style="float:left;margin-left:29px;" onmouseover="ShowSub(this)" onmouseout="HideSub(this)" > 5 <a href="products.html" >Product</a> 6 <ul style="position:absolute; display:none;" > 7 <li style="color:black; background-color:#4d4d4d;display:block;"><a href="service.html" style="z-index:9;">service</a></li> 8 <li style="color:black; background-color:#4d4d4d;display:block;"><a href="daycare.html" style="z-index:9;">Daycare</a></li> 9 </ul> 10 </li> 11 <li id="loginout" style="float:left;margin-left:29px;"></li> 12 <li style="float:left;margin-left:29px;"><a href="Register.html">Register</a></li> 13 <li style="float:left;margin-left:29px;"><a href="login.html">Log In</a></li> 14 <li style="float:left;margin-left:29px;"><a href="daycare.html">My Order</a></li> 15 <li id="logname" style="float:left;margin-left:29px;"></li> 16 </ul> 17 </div> 18 19 <!--用JS將php內的數據調過來顯示，一定放在修改過的“li”的標簽后面--> 20 <script type="text/javascript" src="PetC.php"> 21 </script> 22 <script type="text/javascript" > 23 if(!log) { 24 document.getElementById("logname").innerHTML = '<a href="login">Login</a>'; 25 }else { 26 document.getElementById("loginout").innerHTML = '<a href="logout.php">'+"Logout"+'</a>'; 27 document.getElementById("logname").innerHTML = '<a href="#">'+log+'</a>'; 28 } 29 </script> 30 <!--****************添加內容****************************-->
可以看到，html 中利用 JS 將 php 中的值取了過來，並對相應的列表進行了注入。 其中需要注意的是，當注入的時候有標簽和變量同時存在的時候，需要用 "+" 來進行連接，即最后一個注入的形式。
第一次接觸 php，算是做一個小的經驗總結吧。其實好像全部頁面用 php 寫會更方便一些。