HTML中利用JS调用PHP (以登录为例)

2021-10-30 12:04:23

232

最近在做 Login 和 Register 的东西，因为需要用到 session 来存储用户的 id 和用户名，所以需要调用 php 中的 session。由于不会 Ajax，所以不得不用一些笨办法。通过在网上查，发现可以进行一下操作来在 html 中调用 PHP 的东西。

前提：session 中有两个变量，一个 username，一个 userid，此处用不到 userid

首先来看 login 部分的 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 代码：

 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 写会更方便一些。

上一篇：php引入html文件（或php文件下一篇：用JS和HTML写自己的文本编辑器

网站建设

Html

HTML中利用JS调用PHP (以登录为例)