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 相关文章推荐
一个javascript参数的小问题
Mar 02 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
Sep 08 Javascript
jquery中动态效果小结
Dec 16 Javascript
超炫的jquery仿flash导航栏特效
Nov 11 Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 Javascript
JavaScript实现对下拉列表值进行排序的方法
Jul 15 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
实例详解ECMAScript5中新增的Array方法
Apr 05 Javascript
Java  Spring 事务回滚详解
Oct 17 Javascript
一个简易时钟效果js实现代码
Mar 25 Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
Apr 22 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
PHP4 与 MySQL 交互使用
2006/10/09 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
自己开发Dojo的建议框架
2008/09/24 Javascript
JavaScript中的property和attribute介绍
2011/12/26 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
Javascript call和apply区别及使用方法
2013/11/14 Javascript
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
JS截取url中问号后面参数的值信息
2014/04/29 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
2015/01/28 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
js实现继承的方法及优缺点总结
2019/05/08 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
TensorFlow实现模型评估
2018/09/07 Python
Python闭包装饰器使用方法汇总
2020/06/29 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
canvas需要在标签里直接定义宽高
2014/12/17 HTML / CSS
高中生学习生活的自我评价
2013/10/09 职场文书
销售工作岗位职责
2013/12/24 职场文书
高中生评语大全
2014/04/25 职场文书
事业单位考核材料
2014/05/21 职场文书
优秀学生干部先进事迹材料
2014/05/26 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
六一领导慰问欢迎词
2015/01/26 职场文书
2015年小学生自我评价范文
2015/03/03 职场文书
2015年社区宣传工作总结
2015/05/20 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python
go goroutine 怎样进行错误处理
2021/07/16 Golang