JavaScript复习 js登录简单实现 dom操作练习
Posted 邹少聪
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript复习 js登录简单实现 dom操作练习相关的知识,希望对你有一定的参考价值。
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>
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 }
实现效果:
输入用户名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操作练习的主要内容,如果未能解决你的问题,请参考以下文章