Jquery+Ajax+php學習筆記

昨天研究ajax，想作個登陸框，無重新整理就把使用者名密碼送出給背景php程式，驗證後發回。

幾經琢磨 總算出來前台代碼：

<script src="./javascript/jquery-latest.pack.js" type="text/javascript"></script> //導入jQuery架構檔案 要用jQuery必須做此步

<script type="text/javascript">

$(document).ready(function(){//這個就是jQueryready ，它就像C語言的main 所有操作包含在它裡面

     $("#button_login").mousedown(function(){ 

    login(); //點選ID為"button_login"的按鈕後觸發函數 login();

     });

});

function login(){ //函數 login();

var username = $("#username").val();//取框中的使用者名

var password = $("#password1").val();//取框中的密碼

$.ajax({ //一個Ajax過程 

    type: "post",  //以post方式與背景溝通

    url : "./php_ajax/login.php", //與此php頁面溝通

    dataType:'json',//從php傳回的值以 JSON方式 解釋

    data: 'username='+username+'&password='+password, //發給php的資料有兩項，分别是上面傳來的u和p   

    success: function(json){//如果調用php成功

                        alert(json.username+'\n'+json.password); //把php中的傳回值（json.username）給 alert出來

                          }   

           });

}

</script>

具體的php 我隻是把代碼原封傳回，以後該改成到資料庫檢查。

<?php

echo json_encode(array ('username'=>$_REQUEST['username'],'password'=>$_REQUEST['password']));

?>

json_encode的功能是 把php中的變量組成數組 再封裝成Json格式 再echo出來傳回給調用它的jquery.ajax()

總的來說 過程是：

使用者填完使用者名密碼 單擊按鈕“登陸”

jQuery 取得使用者名 密碼

jQuery把兩個變量以post方式發送給login.php

login.php 把變量進行處理 然後把傳回封裝成Json

把Json抛給 前台頁面

前台解釋得到的Json資料 并進行下一步處理。

關于Json 就是一種資料封裝，類似于XML 但更适合輕量級應用。

如何聯系我：【萬裡虎】www.bravetiger.cn

【QQ】3396726884 （咨詢問題100元起，幫助解決問題500元起）

【部落格】http://www.cnblogs.com/kenshinobiy/