[jQuery] AJAX 學習筆記 (一) 如何使用 JSON 驗證使用者表單

最近開始摸了 jQuery，因為自己本身也很想學習，這是目前當紅的技術，許多網站已經開始在使用 jQuery AJAX 了，包含各大入口網站：Pixnet 痞客幫，大家會發現學習 jQuery 好處很多，重點是她將 javascript 整合了，讓你方便使用來讓網站 web 2.0 我想現在很多網站都是朝這個方向去進行了，如果想知道什麼是 AJAX 可以上網查維基百科解釋，已目前來說，大家都使用javascript 客戶端來取得資料，然而 AJAX 可以從Server端取的資料 show 在使用者端給大家看，底下會大概講解以及實做一個驗證。

首先要 include jQuery 的檔案，這部份昨天看到

DK大神部落格：Google 的 jQuery 與 jQuery UI 裡面有提到 AJAX Libraries API Developer’s Guide，可以使用底下方法來 include 各種 Ajax Libraries:

google.load("jquery", "1.2.3");
google.load("jqueryui", "1.5.2");
google.load("prototype", "1.6");
google.load("scriptaculous", "1.8.1");
google.load("mootools", "1.11");
google.load("dojo", "1.1.1");

不過我自己是下載 jQuery 放在自己的伺服器來使用

#
# 可以下載 mini 版本，如果 load 不要這麼重的話
#

首先來使用最簡單的

jQuery AJAX 先建立一個 text 欄位：

checkRegAcc = function (){
    $.ajax({
      url: 'id_validate.php',
      type: 'GET',
      data: {
        user_name: $('#user_name').val()
      },
      error: function(xhr) {
        alert('Ajax request 發生錯誤');
      },
      success: function(response) {
          $('#msg_user_name').html(response);
          $('#msg_user_name').fadeIn();

      }
    });
  };

首先可以看到

$.ajax 這個就是在呼叫 jQuery ajax 物件，前面這個 $ 字號，那是 jQuery 的 alias，其實你也可以雪寫成 jQuery.ajax() 這是一樣的，然後可以看到 url type data 這三個參數，分別是你要傳到伺服器端的網址，以及你是要用 POST 或者是 GET 方式傳遞，data 是你要傳送的參數，這裡的例子 user_name: $(‘#user_name’).val()，傳送 $_GET[‘user_name’] 到 id_validate.php 然後它的 value 是 $(‘#user_name’).val()，這樣其實還蠻容易的，然後回傳值 call back 可能是 error 或者是 success 表示成功，如果失敗就是跳出視窗說明，成功的話，jQuery 回傳預設是 html 然後直接寫到 $(‘#msg_user_name’) 這個 span id 裡面，也可以回傳不同的data type，那就是要改 ajax 裡面的 datatype 下面會介紹回傳 datetyep: json 這樣就很簡單實做一個驗證了，多重驗證，可以在加寫，很容易吧使用 JSON 方式：

checkRegAcc = function (){
    alert($('#user_name').val());
    $.getJSON('id_validate.php?type=json&method=checkRegisterAccount', 
	    {user_name: $('#user_name').val()},
	    function(ret) {
	       $('#msg_user_name').html(ret);
	    });

  };
  $('#user_name').blur(checkRegAcc);

剛剛有說回傳的datatype可以有下面四種

“xml”: Returns a XML document that can be processed via jQuery. “html”: Returns HTML as plain text, included script tags are evaluated. “script”: Evaluates the response as Javascript and returns it as plain text. “json”: Evaluates the response as JSON and returns a Javascript Object 上面用到 getJSON 的方法，這是利用 datatype:json 的方式，利用這個方式，就可以不必依照回傳 error 或者是 success 的 call back 而可以自訂函式唷，當然在 id_validate.php 這個 php 裡面，回傳的部份可以利用 json_encode() 這個函式來達成，下面是實際 check user_name 是否存在的 php 程式

$type = ( isset($_POST['type']) ) ? $_POST['type'] : $_GET['type'];

$sql = "SELECT user_id, username, user_password, user_active, user_level, user_login_tries, user_last_login_try
	FROM " . USERS_TABLE . "
	WHERE username = '" . str_replace("\'", "''", $_GET['user_name']) . "'";   
if( !($result = $db->sql_query($sql)) )
{
	die("Could not query config information " . $sql);
}
if(!$db->sql_numrows($result))
{  
  $ret = " " . $_GET['user_name'] . " 此帳號可以使用";
}
else
{
  $ret = "此帳號已經有人使用";
}

echo ($type == 'json') ? json_encode($ret) : $ret;
?>

$(‘#user_name’).blur(checkRegAcc); 這一行的用意是在，原本 focus 在 user_name 這個 text 欄位，如果你按 TAB 之後就會去直行 checkRegAcc 這個 function，相當容易瞭解參考網站： PHP::JSON in PHP http://visualjquery.com/1.1.2.html jQuery 學習心得筆記 (4) – Ajax (上) jQuery 學習心得筆記 (5) – Ajax (下)

See also