jQuery-Ajax請求Json資料並載入在前端頁面-js教程-PHP中文網

建立demo.json文件，用來做資料來源：

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

首頁

web前端

js教程

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

不言

Jul 09, 2018 am 10:51 AM

ajax html javascript jquery json

這篇文章主要介紹了關於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中文網！