jQuery+Pdo编写login登陆界面

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

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

使用 Google 的 CDN:

rush:xhtml;">

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

Pdo

是用来代替MysqL或者MysqL等来处理数据库的。

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

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

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

好了直接上代码

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

div.css

rush:css;"> div.login {

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

}

login.PHP

rush:PHP;">

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

登陆界面

<body style=" text-align:center">

登陆界面

ClickME.js

rush: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);}
);

}
});
});

函数,参数格式是:

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

rush: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;
}

?>

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

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

登陆界面:

账户密码为空 alert提醒:

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

相关文章

页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间 html: &lt;span id=&quot...
jQuery 添加水印 &lt;script src=&quot;../../../.....
中文:Sys.WebForms.PageRequestManagerParserErrorExceptio...
1. 用Response.Write方法 代码如下: Response.Write(&q...
Jquery实现按钮点击遮罩加载,处理完后恢复 思路: 1.点击按...