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 相关文章推荐
SuperSlide2实现图片滚动特效
Jun 20 Javascript
浅谈javascript面向对象程序设计
Jan 21 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 Javascript
jQuery UI设置固定日期选择特效代码分享
Aug 27 Javascript
Javascript原型链的原理详解
Jan 05 Javascript
jQuery继承extend用法详解
Oct 10 Javascript
Ajax和Comet技术总结
Feb 19 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 Javascript
Vue表单验证插件的制作过程
Apr 01 Javascript
jQuery UI实现动画效果代码分享
Aug 19 jQuery
es6函数之严格模式用法实例分析
Mar 17 Javascript
浅谈js数组splice删除某个元素爬坑
Oct 14 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计划任务、定时执行任务的实现代码
2011/04/23 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
2016/09/23 PHP
PHP Web表单生成器案例分析
2020/06/02 PHP
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
在图片上显示左右箭头类似翻页的代码
2013/03/04 Javascript
JavaScript解析URL参数示例代码
2013/08/12 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
JS自调用匿名函数具体实现
2014/02/11 Javascript
AngularJS内置指令
2015/02/04 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
利用CSS3在Angular中实现动画
2016/01/15 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
javascript滚轮控制模拟滚动条
2016/10/19 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
vue实现登录拦截
2020/06/29 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
[01:04:22]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 IG vs EG
2018/04/01 DOTA
python中的lambda表达式用法详解
2016/06/22 Python
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
Python代码缩进和测试模块示例详解
2018/05/07 Python
PyCharm设置SSH远程调试的方法
2018/07/17 Python
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
python反转列表的三种方式解析
2019/11/08 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
详解CSS3阴影 box-shadow的使用和技巧总结
2016/12/03 HTML / CSS
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
英国川宁茶官方网站:Twinings茶
2019/05/21 全球购物
自我反省检讨书
2014/01/23 职场文书
学雷锋活动总结范文
2014/04/25 职场文书
篮球比赛策划方案
2014/06/05 职场文书
参加招聘会后的感想
2015/08/10 职场文书