最近在做 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 写会更方便一些。
请发表评论