Zi 字媒體

在網頁上常常會看到，點擊某些東西之後就會即時的顯示一些資料 例如旅行社網頁，選擇價錢可以即時出現該價位的飯店 其實是透過AJAX(Asynchronous JavaScript and XML)處理的 jQuery Ajax HTML： jQuery： function fetch_data(n){ $.ajax({ type : "GET", url : "fetch_data.php?act="+n, data : "", success : function($msg){ $('#con').html($msg); } }); //注意！因為ajax是同步的，因此當執行ajax後，瀏覽器會馬上接著執行接下來的程式碼 console.log(123); } fetch_data： echo $_GET['act']; jQuery會將fetch_data echo出來的東西全部塞到#con這個區塊內，不過#con裡原先若有其他內容將會被覆蓋過去 且原先就寫在網頁中的javascript判斷不到利用AJAX顯示出來的DOM元件 若要使用則需將javascript放在fetch_data一同輸出。 sync ajax $.ajax({ type : "GET", url : "fetch_data.php?act="+n, //加入async參數 async : false, data : "", success : function($msg){ $('#con').html($msg); } }); jQuery在AJAX部份也越來越多新用法，比如說： //以AJAX post為例(執行後test.php就會抓的到$_POST['name']的資料囉) $.post("test.php", { "name": "姓名", "bir": "19891028" }, function(data) { alert(data); }); AJAX觸發事件流程 ajaxStart > ajaxSend > ajaxSuccess 或 ajaxError > ajaxComplete > ajaxStop 所以可以針對以上觸發事件做一些loading的特效 $(document).ajaxStart(function(){ alert("運行中"); }); $(document).ajaxComplete(function(){ alert("結束"); }); AJAX因為安全性問題所以無法跨網域抓資料，如果有需求的需要再另外處理 Categories: jQuery 分類 Android AngularJS API Blueprint Chrome Database MySQL DataStructure Docker Editor Vim Firefox Git GitLab Google API Hadoop Language Go Java JavaScript jQuery jQueryChart Node.js Vue PHP Laravel ZendFramework Python Mac Network Cisco DLink Juniper Oauth Server Apache Share Unix FreeBSD Linux WebDesign Bootstrap CSS HTML Wordpress Search 搜尋關鍵字: