[PHP][AJAX]介紹

小黑
發佈於後端
閱讀時間約 3 分鐘

AJAX(Asynchronous JavaScript And XML)為JavaScript和XML的非同步技術,可以讓瀏覽器建立快速、更加和容易使用的操作介面。AJAX核心技術是非同步的HTTP請求(Asynchronous HTTP Requests),除了第一次載入網頁外,HTTP請求是在背景使用XMLHttpRequest物件送出,送出後不要等待回應,所以不會影響使用者的操作。

jQuery

jQuery可以幫助我們建立跨瀏覽器相容的AJAX應用程式。jQuery提供多種方法來提出XMLHttpRequest請求,不需要自行判斷瀏覽器來建立XMLHttpRequest。相關方法說明如下:

  • load():將伺服端的遠端文件用AJAX請求來載入。
  • getScript():用AJAX請求執行伺服端JavaScript檔案。
  • get():用HTTP GET方法送出AJAX請求和取得回應。
  • post():用HTTP POST方法送出AJAX請求和取得回應。
  • getJSON():用HTTP GET方法送出AJAX請求來取得伺服器的JSON資料。
  • ajax():用XMLHttpRequest送出AJAX請求。


ajax()方法

$.ajax({
type: 'GET',
url: 'getDateTime.php',
data: { name : nameVal,
type : typeVal },
success: function(data) {
// 處理回傳的資料
}
});


常用參數屬性:

  • type:HTTP請求方式是GET或POST。
  • url:目標網址。
  • data:要傳送的資料。
  • success:請求成功時,會執行此函數。
  • error:請求失敗時,會執行此函數。
  • complete:請求完成時,會執行此函數,也就是說不論成功或失敗都會執行。
  • beforeSend:送出請求前,會執行此函數。


getJSON()方法

$.getJSON('getTitleJSON.php', function(data){
//處理JSON資料});​

getJSON()第一個參數為網址,第二個參數為回調函數。


處理JSON資料

$("#result").empty();//清除HTML清單result
$.each(data, function (key, val) {//取出鍵和值
var str = '<li id="' + key + '">' +
val.Id + ':' + val.Title + '</li>';
$("#result").append(str);//新增資料
});




7會員
107內容數
嗨,我是一名程式設計師,會在這分享開發與學習紀錄。
留言0
查看全部
發表第一個留言支持創作者!
小黑與程式的邂逅 的其他內容
[PHP]檔案操作函數
閱讀時間約 2 分鐘
[PHP]檔案讀寫
閱讀時間約 5 分鐘
[PHP][Cookie]建立購物車
閱讀時間約 2 分鐘
[PHP]上傳檔案
閱讀時間約 1 分鐘
[PHP]留言功能
閱讀時間約 6 分鐘
[PHP][Laravel]建立專案
閱讀時間約 3 分鐘