|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
介紹兩種方法JS讀取 .JSON 文件【實例演示/源碼下載】
作者:admin 時間:2022-3-24 21:54:59 瀏覽:.JSON文件的數(shù)據(jù)結構，是一個字典類型dict，不同于csv文件，csv文件，無論你寫入的是什么類型的數(shù)據(jù)結構，讀出的始終都是一串串字符。.JSON文件本質存儲的也是字符串，與csv文件不同的是，.JSON讀出后是一個dict字典類型。因此使用JavaScript打開.JSON文件后，要使用解析程序讀取文件內容。本文將介紹JS讀取 .JSON 文件的兩種方法。
假設我們的JSON文件為data.json，其內容是：
[
{"name": "Jhon", "age":"25" },
{"name": "Simon", "age":"23" },
{"name": "Jack", "age":"26" }
]
下面要使用JavaScript讀取data.json的內容，我們有兩種方法可以做到這一點。
方法1：使用$.ajax()方法
完整代碼是：
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ajax讀取json文件</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="div1"></div>
<script>
$(function () {
$.ajax({
type: "GET",
dataType: "json",
url: "data.json",
success: function (result) {
var str = "";
$.each(result,function(index,obj){
str += "姓名：" + obj["name"] + " 年齡：" + obj["age"] + "<br>";
});
$("#div1").append(str);
}
});
});
</script>
</body>
</html>
執(zhí)行結果
代碼解釋
1、因為用的是jQuery編程，所以要先引用jQuery庫文件。
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
2、type的值是“GET”，不能用POST，用POST會報錯：405 Method Not Allowed。
3、dataType的值是“json”；url的值即是json文件地址：data.json。
方法2：使用$.getJSON()方法
完整代碼
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ajax讀取json文件</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="div1"></div>
<script>
$(function(){
$.getJSON("data.json",function(data){
var $result = $("#div1");
var str = "";
$result.empty();
$.each(data,function(index,info){
str += "姓名：" + info["name"] + " 年齡：" + info["age"] + "</br>";
})
$result.html(str);
})
})
</script>
</body>
</html>
執(zhí)行結果
代碼解釋
1、$.getJSON()方法使用 AJAX 的 HTTP GET 請求獲取 JSON 數(shù)據(jù)。
2、$.getJSON()用的是jQuery編程，所以需要先引用jQuery庫文件。
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
3、語法：$.getJSON(url,function(data){})，url可以是網(wǎng)絡地址，也可以是本地文件，本示例url的值是本地文件：data.json。
總結
本文介紹了兩種方法JS讀取 .JSON 文件，兩種方法代碼都不多，理解和使用起來也不復雜。
您可能對以下文章也感興趣
標簽: JSON
x
- 站長推薦
