在網頁上常常會看到,點擊某些東西之後就會即時的顯示一些資料

例如旅行社網頁,選擇價錢可以即時出現該價位的飯店

其實是透過AJAX(Asynchronous JavaScript and XML)處理的

jQuery Ajax
HTML:

1<div id="con">
2</div>

jQuery:

1function fetch_data(n){
2    $.ajax({
3        type : "GET",
4        url  : "fetch_data.php?act="+n,
5        data : "",
6        success : function($msg){
7            $('#con').html($msg);
8        }
9    });
10    //注意!因為ajax是同步的,因此當執行ajax後,瀏覽器會馬上接著執行接下來的程式碼
11    console.log(123);
12}

fetch_data:

1echo $_GET['act'];

jQuery會將fetch_data echo出來的東西全部塞到#con這個區塊內,不過#con裡原先若有其他內容將會被覆蓋過去
且原先就寫在網頁中的javascript判斷不到利用AJAX顯示出來的DOM元件
若要使用則需將javascript放在fetch_data一同輸出。


sync ajax

1$.ajax({
2    type : "GET",
3    url  : "fetch_data.php?act="+n,
4    //加入async參數
5    async : false,
6    data : "",
7    success : function($msg){
8        $('#con').html($msg);
9    }
10});

jQuery在AJAX部份也越來越多新用法,比如說:

1//以AJAX post為例(執行後test.php就會抓的到$_POST['name']的資料囉)
2$.post("test.php", { "name": "姓名", "bir": "19891028" },
3function(data) {
4    alert(data);
5});

AJAX觸發事件流程

1ajaxStart > ajaxSend > ajaxSuccess 或 ajaxError > ajaxComplete > ajaxStop

所以可以針對以上觸發事件做一些loading的特效

1$(document).ajaxStart(function(){
2    alert("運行中");
3});
4$(document).ajaxComplete(function(){
5    alert("結束");
6});

AJAX因為安全性問題所以無法跨網域抓資料,如果有需求的需要再另外處理

Categories: jQuery