HTML中利用JS調用PHP (以登陸爲例)

時間 2019-11-10

標籤 html 利用調用 php 登陸爲例欄目 HTML 简体版

原文原文鏈接

最近在作 Login 和 Register 的東西，由於須要用到 session 來存儲用戶的 id 和用戶名，因此須要調用 php 中的 session。因爲不會 Ajax，因此不得不用一些笨辦法。經過在網上查，發現能夠進行一下操做來在 html 中調用 PHP 的東西。javascript

前提：session 中有兩個變量，一個 username，一個 userid，此處用不到 useridphp

首先來看 login 部分的 html 代碼：css

login.html （前面比較長能夠不看，都是CSS樣式）html

 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 代碼：java

login.phpmysql

 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 兩個變量。並有一些數據庫的使用。sql

****************************************************************重點來了*************************************************數據庫

再其次看主頁的部分，由於主頁（PetC.html）比較長因此就主要放核心部分的代碼。session

首先來看 logout.php 的代碼，由於比較簡單。ide

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 <!--****************添加內容****************************-->