首頁 > web前端 > js教程 > jQuery-Ajax請求Json資料並載入在前端頁面

jQuery-Ajax請求Json資料並載入在前端頁面

不言
發布: 2018-07-09 10:51:07
原創
2547 人瀏覽過

這篇文章主要介紹了關於jQuery-Ajax請求Json資料並載入在前端頁面,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下

Ajax技術應用廣泛,這種非同步載入技術,無需刷新網頁即可更新網站內容,全局或局部均可,所以大家應該學會這種技巧,把技術用上來。

建立demo.json文件,用來做資料來源:

{
    "title":"Segmentfault",
    "url":"https://segmentfault.com"
}
登入後複製

建立index.html文件,前端頁面並載入資料

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery - Ajax - Json</title>
    <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
            $("button").click(function(){
                $.ajax({
                    type:"GET",
                    url:"demo.json",
                    dataType:"json",
                    success:function(data){
                        $("#title").text(data.title);
                        $("#url").text(data.url);
                    }
                })
            })
        })
    </script>
</head>
<body>
    <button name="button" type="button">加载数据</button>
    <h2>title:<span id="title"></span></h2>
    <h2>url:<span id="url"></span></h2>
</body>
</html>
登入後複製

頁面中需要引入jQuery函式庫

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

用Node寫RESTful API介面

以上是jQuery-Ajax請求Json資料並載入在前端頁面的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板