ajax讀本地文件

本文轉載自查看原文 2020-12-04 10:08 443 ajax

前置條件：

1. 編輯器，我用的是HbuilderX，解壓即食，非常美味，點擊傳送門。

簡單的項目目錄：

a. test.html內容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="showData"></div>
        
        <script type="text/javascript">
            $(function() {
                $.ajax({
                    type: "get", //請求方式
                    url: "test.json", //文件地址
                    success: function(data) { //成功返回
                        var str = JSON.stringify(data);
                        $(".showData").text(str);　　//將數據寫在頁面，方便觀看（轉為了文本格式）
                        
                        console.log(data);　　//也可以在控制台看數據
                    },
                    error: function(e) { //失敗返回
                        console.log(e.statusText);
                    }
                });
            });
        </script>
    </body>
</html>

b. test.json

[
    {
        "name" : "aaa",
        "age" : "16"
    },
    {
        "name" : "bbb",
        "age" : "15"
    }
]

c. 文件准備就緒后，點擊執行即可【如若本地直接雙擊test.html文件，則會有跨域報錯。需要從編輯器（如：HbuilderX）打開。】

至此，ajax讀取本地數據成功。（后續將會探究如何將數據寫入本地文件，以及本地數據的增刪改查。）

【贈人以贊，手有余香！嘿嘿...】

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jQuery ajax讀取本地json文件 jQuery ajax讀取本地json文件 360chrome,google chrome瀏覽器使用jquery.ajax加載本地html文件 ajax和axios請求本地json數據對比 ajax上傳文件上傳文件ajax/axios ajax上傳圖片文件 js ajax上傳文件 ajax如何上傳文件（整理） ajax傳送文件