經過ajax前端後臺交互/登陸頁和註冊頁前端後臺交互詳解/前端後臺交互基礎應用/幾個後臺函數的基礎應用/php文件函數基礎應用/php字符傳函數基礎應用/php數組函數基礎應用

時間 2019-11-29

標籤經過 ajax 前端後臺交互登陸冊頁詳解基礎應用幾個函數 php 文件字符數組欄目 Ajax 简体版

原文原文鏈接

前言javascript

PHP
php

　 學習了很久的PHP，今天作一個能夠後臺交互的登陸頁和註冊頁，沒作什麼判斷，簡單的瞭解一下。css

具體的內容分析以下：html

① PHP中的數據傳輸-->>由註冊頁傳輸給註冊頁後臺-->>註冊頁後臺通過轉碼保存實例化的文件java

② 在登陸頁輸入帳戶密碼，點擊登陸時，得到觸發函數：得到由後臺傳輸過來的true或者false---轉換頁面或者彈出輸入錯誤。jquery

　登陸頁後臺獲取保存帳戶密碼的實例化文件，經過轉碼，if判斷以後傳輸給前臺登陸頁TURE或者FALSE。ajax

總共總共8個文件：bootstrap

　　其中07_file與libs同一級別代碼植入請看具體內容。數組

代碼註釋裏面有很詳細的解析，若有須要請仔細閱讀。（但願能夠幫助到你）ide

一、效果圖

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>用戶登陸</title>
 6         <link rel="stylesheet" type="text/css" href="../../libs/bootstrap.css"/>
 7         <style type="text/css">
 8             body{
 9                 margin: 0px;
10                 padding: 0px;
11                 background-color: #CCCCCC;
12             }
13             .panel{
14                 width: 380px;
15                 height: 280px;
16                 position: absolute;
17                 left: 50%;
18                 margin-left: -190px;
19                 top: 50%;
20                 margin-top: -140px;
21             }
22             .form-horizontal{
23                 padding: 10px 20px;
24             }
25             .btns{
26                 display: flex;
27                 justify-content: center;
28             }
29         </style>
30     </head>
31     
32     <!--簡單的樣式表-->
33     <body>
34         <div class="panel panel-primary">
35             <div class="panel-heading">
36                 <div class="panel-title">用戶登陸</div>
37             </div>
38             <div class="panel-body">
39                 <form class="form-horizontal">
40                     <div class="form-group">
41                         <label>用戶名</label>
42                         <input type="text" class="form-control" name="userName"/>
43                     </div>
44                     <div class="form-group">
45                         <label>密碼</label>
46                         <input type="password" class="form-control" name="pwd"/>
47                     </div>
48                     
49                     <div class="form-group btns">
50                         <input type="button" class="btn btn-primary" value="登陸系統" id="submit"/>
51                         &nbsp;&nbsp;&nbsp;&nbsp;
52                         <a type="button" class="btn btn-success" href="reg.php"/>註冊帳號</a>
53                     </div>
54                     
55                 </form>
56             </div>
57         </div>
58     </body>
59     
60     <script src="../../libs/jquery-3.1.1.js"></script>
61     <script type="text/javascript">
62         $(function(){
63             //↓定位id：submit事件綁定，click點擊時候觸犯function函數
64             $("#submit").on("click",function(){
65                 //↓建立一個變量str =  選取form表單，經過serialize()建立以標準 URL 編碼表示的文本字符串 
66                 var str = $("form").serialize();
67                 //↓打印出來看看是什麼個樣子的，傳輸給後臺纔好操做。
68                   console.log(str); //具體樣子：userName=value&pwd=value
69                   /*經過ajax中的post方法，給後臺doLogin.php傳輸數據，給變量str(url文件類型)添加名字「formData」，
70                    * 函數function是接受後臺返回的默認值也就是echo輸出的值*/
71                 $.post("doLogin.php",{"formData":str},function(data){
72                     //↓打印後臺echo輸出的值，查看類型
73                     //↑console.log(data);
74                     
75                     //↓判斷函數若是返回的是true，則經過location打開新的頁面，同是在頁面後面加?name+你輸入的用戶名，用來給主頁傳值（主頁得到用戶名）
76                     if(data=="true"){
77                         location = "index.php?name="+$("input[name='userName']").val();
78                     //↓傳回其餘輸出則彈出"用戶名或密碼錯誤！！！"窗口
79                     }else{
80                         alert("用戶名或密碼錯誤！！！");
81                     }
82                 });
83             });
84         });
85     </script>
86 </html>

iogin.php行內代碼--登陸頁面

 1 <?php
 2 
 3     header("Content-Type:text/html;charset=utf-8");
 4     
 5     //↓定義str一個變量，經過post方法得到前臺傳輸過來的數據。$_POST["fieldname"]
 6     $str = $_POST["formData"];
 7     
 8     //↓打印從前臺收到的數據，經過打印傳輸會前臺，具體內容經過形參data表示
 9     //echo $str;
10     //↑打印$str時↓（下方）必須所有註釋，輸出的具體樣子：userName=value&pwd=value
11     
12 /*    php中的數組，先經過數組explode方法-把數據內容經過$分爲數組，
13     ↓再定義第一個數組內容（用戶名的value）爲$userName。["userName=value"，"pwd=value"]*/
14     list($userName) = explode("&", $str);
15     
16 /*    php中的數組，先經過數組explode方法-把數據內容經過$分爲數組，
17     ↓再定義二個數組內容（用戶名的value）爲$userName。["userName=value"，"pwd=value"]*/    
18     list(,$pwd) = explode("&", $str);
19     
20     //定義一個變量users,經過php中的文件函數file_get_contents，讀取01_lx文件下的user.txt文件內容中的字符串。
21     $users = file_get_contents("user.txt");//這一步就是從文件中讀取帳號，密碼。
22     //↑具體的文件內容大概：userName=111&pwd=111&rePwd=111[;]userName=222&pwd=222&rePwd=222[;]
23     //↑經過上面的文件內容能夠知道每一個帳號密碼後面都有一個[;]
24     
25     //↓定義一個變量userArr，經過explode函數把用變量users內容用[;]分爲數組 ["userName=value"，"pwd=value"]
26     $userArr = explode("[;]", $users);
27     
28     //經過foreach遍歷整個$userArr數組
29     foreach ($userArr as $user) {
30             
31         //每一組$user分別爲userName=value(111)&pwd=value(111)&rePwd=value(111)
32         //↓每一組都分別再經過explode函數分爲數組，定義變量$realName爲第一個數組名。
33         list($realName) = explode("&", $user);//具體內容爲$realName=userName=value(111)
34         //↓每一組都分別再經過explode函數分爲數組，定義變量$realPwd爲第二個數組名。
35         list(,$realPwd) = explode("&", $user);//具體內容爲$realPwd=pwd=value(111)
36         //↓每一組都分別判斷一次，當變量$userName==變量$realName同時知足變量$pwd==變量$realPwd
37         if($userName==$realName&&$pwd==$realPwd){
38         //php中的輸出echo 內容爲true    
39             echo "true";
40             die();
41         }
42     }
43     //↓若是帳戶或密碼沒有輸入則，返回false
44     echo "false";

doLogin行內代碼--登陸頁面後臺

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>用戶註冊</title>
 6         <link rel="stylesheet" type="text/css" href="../../libs/bootstrap.css"/>
 7         <style type="text/css">
 8             body{
 9                 margin: 0px;
10                 padding: 0px;
11                 background-color: #CCCCCC;
12             }
13             .panel{
14                 width: 380px;
15                 height: 350px;
16                 position: absolute;
17                 left: 50%;
18                 margin-left: -190px;
19                 top: 50%;
20                 margin-top: -175px;
21             }
22             .form-horizontal{
23                 padding: 10px 20px;
24             }
25             .btns{
26                 display: flex;
27                 justify-content: center;
28             }
29         </style>
30     </head>
31     
32     
33     <body>
34         <div class="panel panel-primary">
35             <div class="panel-heading">
36                 <div class="panel-title">用戶註冊</div>
37             </div>
38             <div class="panel-body">
39                 <form class="form-horizontal">
40                     <div class="form-group">
41                         <label>用戶名</label>
42                         <input type="text" class="form-control" name="userName"/>
43                     </div>
44                     <div class="form-group">
45                         <label>密碼</label>
46                         <input type="password" class="form-control" name="pwd" />
47                     </div>
48                     <div class="form-group">
49                         <label>確認密碼</label>
50                         <input type="password" class="form-control" name="rePwd" />
51                     </div>
52                     
53                     <div class="form-group btns">
54                         <input type="button" class="btn btn-primary" value="肯定註冊" id="submit"/>
55                         &nbsp;&nbsp;&nbsp;&nbsp;
56                         <a type="button" class="btn btn-success" href="login.php"/>返回登陸</a>
57                     </div>
58                     
59                 </form>
60             </div>
61         </div>
62     </body>
63     
64     <script src="../../libs/jquery-3.1.1.js"></script>
65     //↑jquery插入代碼
66     <script type="text/javascript">
67         $(function(){
68             //↓捕捉idsubmit綁定click事件，function爲發生事件時的函數。
69             $("#submit").on("click",function(){
70                 //↓建立一個變量str，選取form表單，經過serialize()建立以標準 URL 編碼表示的文本字符串 
71                 var str = $("form").serialize();
72                 //↓打印出來看看是什麼個樣子的，傳輸給後臺纔好操做。
73                 console.log(str);
74                 
75                 /*↓經過ajax中的post方法，給後臺doReg.php傳輸數據，給變量str(url文件類型)添加名字「formData」，
76                       函數function是接受後臺返回的默認值也就是echo輸出的值*/
77                 $.post("doReg.php",{"formData":str},function(data){
78                     //↓打印後臺echo輸出的值，查看類型
79                     //↑console.log(data);
80                     
81                     //↓判斷函數若是返回的是true，則彈窗提示建立成功，經過location跳轉到login.php(登陸頁面)。
82                     if(data=="true"){
83                         alert("註冊成功！即將跳轉登錄頁！");
84                         location = "login.php";
85                     //返回其餘值，則彈窗提示    "註冊失敗！由於啥我不知道！"
86                     }else{
87                         alert("註冊失敗！由於啥我不知道！");
88                     }
89                 });
90             });
91         });
92     </script>
93 </html>

reg行內代碼--註冊頁面

 1 <?php
 2 
 3     header("Content-Type:text/html;charset=utf-8");
 4     
 5     /*↓定義str一個變量，經過post方法得到前臺傳輸過來的數據，
 6             而且在每一個數據後方加入一個[;]——>用以分隔每一個新數據*/
 7     $str = $_POST["formData"]."[;]";
 8     
 9     //定義一個變量$num,經過php中的文件函數file_put_contents把每一個str數據追加到01_lx文件下面的"user.txt"文件中。
10     $num = file_put_contents("user.txt", $str,FILE_APPEND);//user.txt文件沒有的話會建立新的user.txt文件
11     //↑FILE_APPEND是追加到文件中，保證每一個數據都會追加到"user.txt"文件中。
12     
13     //↓簡單的判斷，不作過多的闡述。
14     if($num>0){
15         //輸出語句，內容爲後臺返回前臺$.post中的function的形參。
16         echo "true";
17     }else{
18         //輸出語句，內容爲後臺返回前臺$.post中的function的形參。
19         echo "false";
20     }

doReg--註冊頁面後臺

use.txt由文件doReg.php自動在文件夾01_lx中生成。

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8" />
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7     <title>Document</title>
 8 </head>
 9 <body>
10     歡迎您，<span style='color:red;'><?php echo $_GET["name"]; ?></span><br>
11     我是主頁！
12     
13 </body>
14 </html>