jQuery-Ajax請求Json數據並加載在前端頁面,無刷新加載網頁顯示

$(function(){

$("button").click(function(){

$.ajax({

type:"GET",

url:"test.php",

dataType:"json",

success:function(data){

$("#date").text(data.date);

$("#time").text(data.time);

}

})

})

})

日期:

時間:

這個HTML頁,你可以命名為任意文件名,然後把你保存好的這個HTML文件放在你的WEB測試目錄,再到同級目錄建立一個PHP文件,合名為test.php 代碼如下:

$date=date('Y-m-d');

$time=date('H:i:s');

$str='{"date":"'.$date.'","time":"'.$time.'"}';

echo $str;

?>

當我們打開這個WEB頁面時,如下圖:

jQuery-Ajax請求Json數據並加載在前端頁面,無刷新加載網頁顯示

當我們點擊加載數據後,顯示如下圖:

jQuery-Ajax請求Json數據並加載在前端頁面,無刷新加載網頁顯示

jQuery-Ajax請求Json數據並加載在前端頁面,無刷新加載網頁顯示

每點擊一次,就會從PHP文件中動態取出時間,並且體會不到是在整個頁面刷新,而只需要刷新日期和時間這個位置,是不是很方便呢?


分享到:


相關文章: