AJAX調用介面實現靜態頁面局部動態化的簡單例子

來源:互聯網
上載者:User
檔案一:前端模板檔案news.html。

用於嵌套php語句載入資料庫內容後生產news.htmls靜態檔案。

<html><head><title>文章首頁</title><!-- 引入query --><script src="/public/js/jquery.js"></script></head><body><div><p>使用ajax請求的資料</p><ul><!-- 此處使用jq載入動態資料 --></ul></div><!-- 引入使用jquery編寫的ajax指令碼 --><script src="/public/js/articleList.js"></script></body></html>

檔案二:articleList.js檔案。

$.ajax({//介面地址url:'http://static.com/api/hot.php',//請求方式type:'get',//返回資料類型dataType:'json',//請求失敗時處理方式error:function(){},//請求成功時處理方式success:function(result){if(result.code == 1){//將從介面返回的資料拼裝html語句html = '';$.each(result.data,function(key,value){html +='<li><a href="##">+value.title+</li>';});//即使請求了產生的靜態news.htmls檔案,靜態new.htmls檔案jq也會動態將資料到靜態news.htmls靜態檔案中$("#hot_html").html(html);}else{//todo}},});

檔案三:介面檔案-news.php。

<?php /***************此處***************//*從資料庫查詢的結果並組裝成了一個數組$arrRes*//*******************************/    //調用show方法封裝並返回介面資料    return show(1,'',$arrRes);    function show($code,$message,$data){    $resule=array(    'code' => $code,    'message' => $message,    'data' => $data,    );    //將資料轉換成json資料並輸出使ajax接收    echo json_encode($result);    }?>


相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.