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+`
`+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/