接json (即API)

Using data from JSON with JavaScript

https://www.taniarascia.com/how-to-use-json-data-with-php-or-javascript/


※with JavaScript
var request = new XMLHttpRequest();

request.open('GET', 'data.json', true);

request.onload = function () {
// begin accessing JSON data here
var data = JSON.parse(this.response); //這裡this.response是json

for (var i = 0; i < data.length; i++) {
console.log(data[i].name + ' is a ' + data[i].race + '.');
}
}

request.send();



※Using jQuery
$(document).ready(function () {
$.getJSON('data.json', function (data) {
// begin accessing JSON data here
console.log(data[0].name);
});
});


※via an AJAX request
$(document).ready(function () {
var data;
$.ajax({
dataType: "json",
url: 'data.json',
data: data,
success: function (data) {
// begin accessing JSON data here
console.log(data[0].name);
}
});
});


※php用json_encode回傳json陣列給ajax，當data只有一個陣列時，ajax再用data = JSON.parse(data);將字串轉乘object，之後選取其中的某個key時，可以用data.key取得。

※php用json_encode回傳json陣列給ajax，當data不只一個陣列時，用data[0].key取得第一個陣列的某key值。

如果要include php的話，幹嘛還要轉json，所以用到json就是有json檔案，php寫好要給前端的資料寫成json檔，前端再去解析json檔取得資料

https://jsnwork.kiiuo.com/archives/891/jquery-%E5%88%A9%E7%94%A8getjson%E6%88%96ajax%E7%9A%84%E6%96%B9%E6%B3%95%EF%BC%8C%E8%B7%A8%E7%B6%B2%E5%9F%9F%E5%8F%96%E5%BE%97php%E8%B3%87%E6%96%99%E7%9A%84%E5%AF%AB%E6%B3%95/