jQuery+Pdo编写login登陆界面


Posted in Javascript onAugust 01, 2016

Jquery是继prototype之后又一个优秀的Javascript库。而且它是轻量级的js库。共有两个版本的 jQuery 可供下载:一份是精简过的,另一份是未压缩的(供调试或阅读)。这两个版本都可从 jQuery.com 下载。所以开发学习建议使用压缩的。

当然啦,除了直接下载jquery.js文件外,还可以在html头中插入Google或者Microsoft的CDN来在网页加载时直接从网上获取库文件支持。

使用 Google 的 CDN:

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>

使用 Microsoft 的 CDN:

<strong style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 18px;"></strong>

<p style="margin-top: 12px; margin-bottom: 0px; color: rgb(51, 51, 51); line-height: 18px; font-family: Verdana, Arial, Helvetica, sans-serif; display: inline !important; background-color: rgb(249, 249, 249);"></p><pre name="code" class="html" style="color: rgb(51, 51, 51); font-weight: bold; line-height: 24px; display: inline !important;"><head> 

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery /jquery-1.4.min.js"></script> 

</head>

但是最好是直接下载到自己的工程中来使用,不然有时会存在网络问题而无法提供支持。

Pdo是用来代替Mysql或者mysql等来处理数据库的。

只要在php.ini文件中去掉;extension=php_pdo......等被注释掉的有关pdo的.dll文件。同时从php5开始,php默认打开pdo驱动,所以你可能在php.ini文件中看不到php_pdo.dll(这是个人的理解或者说是猜测,网上教程说一定需要着个文件,但是我只是把其他与pdo相关的所有去注释掉了而已,最后也能运行。)

jQuery+Pdo编写login登陆界面

去掉注释后保存后就可以运行phpinfo来进行测试了之中可以看到有关pdo的相关信息。表示配置成功。

在上一篇文章中已经用ajax技术编写了一个login登陆界面,其实不用这么麻烦,可以试试用Jquery和PDO写写,感受感受。于是就粗略的学习了一下Jquery,这才发现只要一个$POST()函数就可以完成我之前所编写的两页的代码(当然啦!人家的是已经封装做好的,只需直接调用就行了),但是我依然很高兴直接写了ajax,这使我对异步认识的更加深刻。

好了直接上代码。

首先是登陆界面的代码(与之前的没多大的区别,有一些小小改动,但是细节出魔鬼,可以认真到什么程度,我就尽力吧!)

div.css

div.login
{

border: 1px solid #a0b1c4 ;
height:429px;
width:300px;
position: absolute;
left:1200px;
top: 150px;
 
}

login.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8 " />

<script type="text/javascript" src="/login_Jquery/js/jquery-2.2.1.js"></script> //引用Jquery.js文件<script src="/login_Jquery/js/ClickME.js"></script> //引用自己编写的.js文件<link rel="stylesheet" href="/login_Jquery/css/div.css" type="text/css" />

<title>登陆界面</title>
</head>

<body style=" text-align:center">
 <h1>登陆界面</h1> 
 <div class="login" > 
 <form action="#" method="post" name="myform" id="myform">
 <p>
 用户名:<input type="text" name="user" id="user" maxlength="20" />
 </p>
 <p>
 密 码:<input type="password" name="pwd" id="pwd" maxlength="20" />
 </p> 
 <p>
 <div id="serverResponse"></div>
 
 </p>
 
  <img id="login" src="/loginProject/pictrue/login.png" /> 
 </form>
 </div> 
</body>
</html>
 

ClickME.js

$(document).ready(function(){
 $("#login").click(function(){
 var user= document.getElementById("user").value;
 var pwd= document.getElementById("pwd").value;
 if(user==""||pwd=="")
 {
 alert("用户名与密码不能为空!")
 
 }
 else
 { //重点在这,对比之前写的xmlHttpRequest的代码量可以看到,在这只是调用了一个   //$.post()函数
 $.post(
 "/login_Jquery/php/check.php",
 $("#myform").serialize(),
 function(msg){ $("#serverResponse").html(msg);}
 );
  
 
 }
 });
});

<span style="font-size:32px;">$.post()函数,参数格式是:</span> 

<span style="font-size:32px;">$.post(url,data,call ,type)</span>

url是请求页面的地址,data是用传送的数据,callback是响应函数,type是返回内容的格式如text/xml等。就本代码来说,url为"/login_Jquery/php/check.php" data:$("#myform").serialize(),其中serialize()函数是将要传送的数据序列化便于传送数据。

callback:function(msg){$("#serverResponse").html(msg); } msg表示服务器回传的数据,然后在函数中对其进行处理,将其使用html()来内置id为serverResponse的文本值。

check.php

<span style="font-size:24px;color:#330000;"><?php

 $mark=0;
 $user=$_REQUEST['user'];
 $pwd=$_REQUEST['pwd'];

 
 $host='localhost';
 $dbname='databaseweb';
 $dsn = "mysql:host=$host;dbname=$dbname";
 $root='root';
 $mysql_pwd='数据库密码';
 try
 {
  $pdo = new PDO($dsn, $root, $mysql_pwd);
 }
 catch(PDOException $e)
 {
  echo "数据库连接失败";
 }
 $row_column= $pdo->query("select * from user where name='$user' and password='$pwd' ");
 
 //$row_column是从数据库传回的list(rows),不能做布尔型的判断。
 //但是我们可以通过list中的object元素的个数来做布尔判断其中fetchColumn()函数用于获取row的个数
 
 if($row_column->fetchColumn() >0 )
 { echo "匹配成功!";
 return;
 } 
 else
 {
 echo "用户".$user."不存在"; 
 return;
 }
 
 
 ?></span>

就check.php文件而言,就是使用了PDO代替了Mysqli而已,但是这是处理数据库的趋势。学学吧!

对了一直没上自己界面的图片,这次补上。

登陆界面:

jQuery+Pdo编写login登陆界面

账户密码为空 alert提醒:

jQuery+Pdo编写login登陆界面

账户密码与数据库异步匹配无误:

jQuery+Pdo编写login登陆界面

账户密码与数据库匹配有误:

jQuery+Pdo编写login登陆界面

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js不是基础的基础
Dec 24 Javascript
用jscript启动sqlserver
Jun 21 Javascript
JQuery的一些小应用收集
Mar 27 Javascript
游览器中javascript的执行过程(图文)
May 20 Javascript
js报$ is not a function 的问题的解决方法
Jan 20 Javascript
基于JavaScript代码实现pc与手机之间的跳转
Dec 23 Javascript
详解Bootstrap按钮
Jan 04 Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 Javascript
Vue实现双向数据绑定
May 03 Javascript
基于bootstrap页面渲染的问题解决方法
Aug 09 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
AngularJS基础 ng-dblclick 指令用法
Aug 01 #Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 #Javascript
Three.js学习之几何形状
Aug 01 #Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
Aug 01 #Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
Aug 01 #Javascript
jQuery简单设置文本框回车事件的方法
Aug 01 #Javascript
AngularJS基础 ng-csp 指令详解
Aug 01 #Javascript
You might like
PHP 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
3款值得推荐的微信开发开源框架
2014/10/28 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
Knockoutjs的环境搭建教程
2012/11/26 Javascript
分享一则javascript 调试技巧
2015/01/02 Javascript
JavaScript函数作用域链分析
2015/02/13 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
canvas+gif.js打造自己的数字雨头像的示例代码
2017/10/26 Javascript
angularjs 缓存的使用详解
2018/03/19 Javascript
vue组件通信传值操作示例
2019/01/08 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
uni-app 自定义底部导航栏的实现
2020/12/11 Javascript
Python多线程编程(七):使用Condition实现复杂同步
2015/04/05 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
dataframe设置两个条件取值的实例
2018/04/12 Python
利用python对Excel中的特定数据提取并写入新表的方法
2018/06/14 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
python创建学生成绩管理系统
2019/11/22 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
python excel多行合并的方法
2020/12/09 Python
英国领先的办公用品供应商:Viking
2016/08/01 全球购物
LACOSTE波兰官网:Polo衫、服装和鞋类
2020/09/29 全球购物
护士的自我鉴定
2014/02/07 职场文书
年终总结会主持词
2014/03/25 职场文书
幼儿园大班毕业评语
2014/12/31 职场文书
2016领导干部廉洁自律心得体会
2016/01/13 职场文书
简历中的自我评价怎么写呢?
2019/04/30 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
聊聊mysql都有哪几种分区方式
2022/04/13 MySQL