1. 程式人生 > >JavaScript復習 js登錄簡單實現 dom操作練習

JavaScript復習 js登錄簡單實現 dom操作練習

分享圖片 數據庫 head 登陸 字符串拼接 utf-8 amp 方式 bstr

js登錄簡單實現:

html源代碼:

技術分享圖片
 1 <!doctype html>
 2     <html>
 3         <head>
 4         <meta charset="utf-8">
 5         <title>無標題文檔</title>
 6         <script type="text/javascript" src="denglu.js/dengluyanzheng.js"></script>
 7         </head>
 8 
 9         <
body> 10 用戶名:<input id="p1" type="text"> 11 <br> 12 <br> 13 密碼:<input id="p2" type="password"> 14 <br> 15 <button id="an" onClick="adn()">登錄</button> 16 </
body> 17 18 19 </html>
HTML源代碼

js代碼:

技術分享圖片
 1 // JavaScript Document
 2 
 3 //window.onload = function (){
 4 //    
 5 //    
 6 //}
 7 ////用戶名,失去焦點時的方法
 8 //function ple1(){
 9 //    
10 //    var bt = "";
11 //    
12 //    bt =document.getElementById("an");
13 //    bt.addEventListener("click",adn);
14 //
} 15 function adn(){ 16 var p1 ="", 17 p2 =""; 18 p1 = document.getElementById("p1").value; 19 p2 = document.getElementById("p2").value; 20 if(p1 == "admin" && p2 == "admin"){ 21 alert("登陸成功"); 22 }else{ 23 alert("登陸失敗"); 24 } 25 }
JavaScript代碼

實現效果:

輸入用戶名admin 和密碼admin後,會提示 "登錄成功"

技術分享圖片

如果輸入的不正確或者輸入為空,就會提示 "登錄錯誤"

技術分享圖片

技術分享圖片

聯系數據庫、js、html做同樣效果:

技術分享圖片
  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>無標題文檔</title>
  6 </head>
  7 
  8 <body>
  9 <!--
 10     json {
 11     鍵 :[數組]
 12     }
 13 -->
 14         
 15 <!--
 16 <?php
 17             //獲取連接資源
 18             $db = new MySQLi("localhost","root","123","z_stu");
 19             //判斷是否連接成功
 20             !mysqli_connect_error() or die("連接失敗");
 21 
 22             //設置字符集
 23             $db->query("set names utf8");
 24 
 25             //寫SQL語句
 26             $sql = "select * from student";
 27 
 28             //執行sql語句得到結果集
 29             $result = $db->query($sql);
 30 
 31             //將結果集轉換為數組
 32             $attr = $result->fetch_all();
 33 
 34             var_dump($attr);
 35 ?>
 36 -->    
 37         
 38         <?php
 39             //獲取連接資源    
 40             $db = new mysqli("localhost","root","","z_text");
 41             //判斷是否連接成功
 42             !mysqli_connect_error() or die("連接失敗");
 43             //設置字符集
 44 //            $db->query("set names utf8");
 45             //寫SQL語句
 46             $sql = "select * from user";
 47             //執行sql語句得到結果集
 48             $result = $db->query($sql);
 49             //將結果集轉換為數組
 50             $attr = $result->fetch_all();
 51             //將數組轉換成字符串
 52 //            var_dump($attr);
 53             $str = "";
 54             //循環字符串
 55             foreach($attr as $key =>$val){
 56                 //循環裏面的內容
 57                 foreach($val as $k =>$v){
 58                     //字符串拼接起來
 59                     $str = $str.$v."-";
 60                     }
 61                     //返回到字符串,並且長度少1位 substr 返回的意思
 62                     $str = substr($str,0,strlen($str)-1);
 63                     //拼接字符串加符號"*"
 64                     $str = $str."*";
 65                 }
 66                 //再次返回字符串,長度減1位
 67                 $str = substr($str,0,strlen($str)-1);
 68                 var_dump($str);//輸出為:1111-1111*123-123*admin-admin
 69                 
 70                 //再將字符串從轉換成數組
 71                 $attr1 = explode("*",$str);
 72                 //重新定義一個數組
 73                 $newAttr = array();
 74                 //數組遍歷
 75                 foreach($attr1 as $k => $v){
 76                     //
 77                     $newAttr[] = explode("-",$v);
 78                 }
 79                 var_dump($newAttr);
 80                 
 81                 $phpPwd = "";
 82                 if($_POST){
 83                     //獲取表單傳的值
 84                     $user = $_POST["user"];
 85                     $pass = $_POST["pass"];
 86                     $flg = true;
 87                     foreach($arr as $k =>$v){
 88                         if($v[0] == $user && $v[1] == $pass){
 89                             echo "登錄成功";
 90                             $flg = false;
 91                             break;
 92                         }
 93                         
 94                     }
 95                     if($flg){
 96                             echo "登錄失敗";
 97                         }
 98                     //方法二
 99                     //從數據庫獲取用戶名
100                     $sql = "select password from user where name=‘$user‘ ";
101                     //結果集獲取
102                     $result = $db->query($sql);
103                     //獲取結果集第一行
104                     $attr1 = $result-> fetch_row();
105                     //輸出數組第一位
106                     var_dump($attr[0]);
107                     //定義全局變量等於這個值
108                     $phpPwd = $attr[0];//全局變量全都可以使用
109                     //判斷與數據庫中的值是否匹配相等  註意:$pass變量要一致!!!
110                     if($pass == $attr[0]){//$attr 代表數據庫中的第一個數組
111                         echo ‘<input type="hidden" id = "pwdval" value="1">‘;
112                     }else{
113                         echo ‘<input type="hidden" id = "pwdval" value="0">‘;
114                     }
115                 }
116                     
117     
118     ?>
119     
120     <form action="#" method="post">
121         賬號:<input type="text" name="user"><br>
122         密碼:<input type="text" name="pass"><br>
123         <input type="submit" value="提交">
124     </form>
125         <script>
126             var username = "",
127                 password = "";
128             window.onload = function(){
129                 username = document.getElementsByTagName(‘input‘)[0].value;
130                 password = document.getElementsByTagName(‘input‘)[0].value;
131             }
132     </script>
133         
134 </body>
135 </html>
所有代碼加註釋

Php使用mysqli_result類處理結果集有以下幾種方法:
fetch_all() 抓取所有的結果行並且以關聯數據,數值索引數組,或者兩者皆有的方式返回結果集。
fetch_array() 以一個關聯數組,數值索引數組,或者兩者皆有的方式抓取一行結果。
fetch_object() 以對象返回結果集的當前行。
fetch_row() 以枚舉數組方式返回一行結果
fetch_assoc() 以一個關聯數組方式抓取一行結果。
fetch_field_direct() 以對象返回結果集中單字段的元數據。
fetch_field() 以對象返回結果集中的列信息。
fetch_fields() 以對象數組返回代表結果集中的列信息。

登錄步驟
1、頁面有表單顯示:用戶、密碼、登錄按鈕
2、點擊登錄按鈕提交到本頁面、post方式提交
3、本頁面在php腳本中判斷 $_POST有沒有值
4、如果沒有值可能是第一次,也可能就是沒有值 不做任何操作
5、如果有值就查詢數據庫判斷用戶名密碼對不對


a、連接數據庫 設置字符集
$db = new MySQLi("localhost","root","123","z_test");
!mysqli_connect_error() or die("連接錯誤");
$db->query("set names utf8");
b、執行sql語句返回結果集
$sql = "select password from user where name = ‘$uid‘ ";
$result = $db->query($sql);
$attr = $result->fetch_row();
var_dump($attr[0]);
c、判斷密碼是否正確做出相應的操作
if($pwd == $attr[0]){
//echo "登錄成功";
echo ‘<input type="hidden" id="pwdVal" value="1">‘;
}else{
echo ‘<input type="hidden" id="pwdVal" value="0">‘;
}

JavaScript復習 js登錄簡單實現 dom操作練習