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:
但是最好是直接下載到自己的工程中來使用，不然有時會存在網路問題而無法提供支援。
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
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而已，但是這是處理資料庫的趨勢。學學吧！
對了一直沒上自己介面的圖片，這次補上。
登陸介面：
賬戶密碼為空白 alert提醒：
賬戶密碼與資料庫非同步匹配無誤：
賬戶密碼與資料庫匹配有誤：
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
