php+jquery+ajax實現用戶名驗證

這是我今天無意間看到的一些東西，第一次接觸jquery，當作我的一個意外收獲寫出來，只是初學者的了解。。。

從認識jquery開始寫這個驗證。。。

大多數情況下，jquery代碼的編寫，都要求我們將jquery的代碼放在以下三種中任一個function里。

有三種寫法，同樣效果，有點像Window.onload，但也有不同，就是window.onload是頁面加載完后才會執行，而$(document).ready()方法只是等所有標簽加載完后，就進行操作，還有$(document).ready()可以多次調用，而window.onload不可以，會被后一個調用所覆蓋。。。

第一種：$(document).ready(function(){.....});

第二種：$().ready(function(){......});

第三種：$(function(){......});

注：通過jQuery中的$(document).ready()方法注冊的事件處理程序，只要在DOM完全就緒時，就可以調用了，比如一張圖片只要<img>標簽完成，不用等這個圖片加載完成，就可以設置圖片的寬高的屬性或樣式等。

再看ajax在jquery中如何操作？

ajax通過兩種方式傳值：get/post

【get方式】

var changeUrl = "CheckUser.php?uName="+name; //跳轉到判斷頁面

  $.get(changeUrl,function(result){ //運行ajax,進入url頁面，返回result

    //通過result返回值，輸出描述信息

}

【post方式】

 var username  = $(this).val();

var changeUrl = "CheckUser.php";

$.post(changeUrl,{name:username},function(result){ ...}

跳轉到CheckUser.php頁面后通過get/post接收并從數據庫中判斷是否存在，然后返回一個值即可。。。

html代碼：用戶名：<input type="text"  id="userName"/> <span id="Info"></span>

jquery代碼：$("#userName").blur(function(){ 

  var username  = $(this).val();
  var changeUrl = "CheckUser.php"; //跳轉到判斷頁面

//下面是運行ajax,進入changeUrl頁面，傳入name，返回result

 $.post(changeUrl ,{name:username},function(result){

   if(result == '1'){
    $("#Info").html("<font color=\"red\">用戶名存在！</font>");
   }else{
    $("#Info").html("<font color=\"green\">可以注冊！</font>");

} }  })

CheckUser.php

<?php
if($_POST['name']){//接收post傳過來的值

 $username = trim($_POST['name']);

//進行判斷，本來是要從數據庫中取的，我偷懶了一下，只是測試。。。

 if($username == "admin"){
 echo '1';
 }else{
 echo '0';
 }}
?>

通常會看很多，可就是不怎么會寫出來，可能因為這次是個意外，所以就不假思索的寫啦，害怕意外會消失。。呵呵。。。