快捷導(dǎo)航

jQuery+Pdo編寫login登陸界面

更新時間：2016年08月01日 11:31:26 作者：aozeahj

這篇文章主要為大家詳細(xì)介紹了jQuery結(jié)合Pdo編寫login登陸界面，具有一定的參考價值，感興趣的小伙伴們可以參考一下

Jquery是繼prototype之后又一個優(yōu)秀的Javascript庫。而且它是輕量級的js庫。共有兩個版本的 jQuery 可供下載：一份是精簡過的，另一份是未壓縮的（供調(diào)試或閱讀）。這兩個版本都可從 jQuery.com 下載。所以開發(fā)學(xué)習(xí)建議使用壓縮的。

當(dāng)然啦，除了直接下載jquery.js文件外，還可以在html頭中插入Google或者Microsoft的CDN來在網(wǎng)頁加載時直接從網(wǎng)上獲取庫文件支持。

使用 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:

復(fù)制代碼代碼如下:

<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>

但是最好是直接下載到自己的工程中來使用，不然有時會存在網(wǎng)絡(luò)問題而無法提供支持。

Pdo是用來代替Mysql或者mysql等來處理數(shù)據(jù)庫的。

只要在php.ini文件中去掉;extension=php_pdo......等被注釋掉的有關(guān)pdo的.dll文件。同時從php5開始，php默認(rèn)打開pdo驅(qū)動，所以你可能在php.ini文件中看不到php_pdo.dll（這是個人的理解或者說是猜測，網(wǎng)上教程說一定需要著個文件，但是我只是把其他與pdo相關(guān)的所有去注釋掉了而已，最后也能運行。）

去掉注釋后保存后就可以運行phpinfo來進行測試了之中可以看到有關(guān)pdo的相關(guān)信息。表示配置成功。

在上一篇文章中已經(jīng)用ajax技術(shù)編寫了一個login登陸界面，其實不用這么麻煩，可以試試用Jquery和PDO寫寫，感受感受。于是就粗略的學(xué)習(xí)了一下Jquery，這才發(fā)現(xiàn)只要一個$POST()函數(shù)就可以完成我之前所編寫的兩頁的代碼（當(dāng)然啦！人家的是已經(jīng)封裝做好的，只需直接調(diào)用就行了），但是我依然很高興直接寫了ajax，這使我對異步認(rèn)識的更加深刻。

好了直接上代碼。

首先是登陸界面的代碼（與之前的沒多大的區(qū)別，有一些小小改動，但是細(xì)節(jié)出魔鬼，可以認(rèn)真到什么程度，我就盡力吧！）

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的代碼量可以看到，在這只是調(diào)用了一個   //$.post()函數(shù)
 $.post(
 "/login_Jquery/php/check.php",
 $("#myform").serialize(),
 function(msg){ $("#serverResponse").html(msg);}
 );
  
 
 }
 });
});

url是請求頁面的地址，data是用傳送的數(shù)據(jù)，callback是響應(yīng)函數(shù)，type是返回內(nèi)容的格式如text/xml等。就本代碼來說，url為"/login_Jquery/php/check.php" data:$("#myform").serialize()，其中serialize()函數(shù)是將要傳送的數(shù)據(jù)序列化便于傳送數(shù)據(jù)。

callback：function(msg){$("#serverResponse").html(msg); } msg表示服務(wù)器回傳的數(shù)據(jù)，然后在函數(shù)中對其進行處理，將其使用html()來內(nèi)置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='數(shù)據(jù)庫密碼';
 try
 {
  $pdo = new PDO($dsn, $root, $mysql_pwd);
 }
 catch(PDOException $e)
 {
  echo "數(shù)據(jù)庫連接失敗";
 }
 $row_column= $pdo->query("select * from user where name='$user' and password='$pwd' ");
 
 //$row_column是從數(shù)據(jù)庫傳回的list（rows），不能做布爾型的判斷。
 //但是我們可以通過list中的object元素的個數(shù)來做布爾判斷其中fetchColumn()函數(shù)用于獲取row的個數(shù)
 
 if($row_column->fetchColumn() >0 )
 { echo "匹配成功！";
 return;
 } 
 else
 {
 echo "用戶".$user."不存在"; 
 return;
 }
 
 
 ?></span>

就check.php文件而言，就是使用了PDO代替了Mysqli而已，但是這是處理數(shù)據(jù)庫的趨勢。學(xué)學(xué)吧！

對了一直沒上自己界面的圖片，這次補上。

登陸界面：