JavaScript >> Javascript 文檔 >  >> Tags >> PHP

JSON 教程:使用 JavaScript 或 PHP 請求 API 數據

JSON 用於在服務器和瀏覽器之間傳輸數據。這是 .json 中可能包含的內容的基本示例 字符串。

{
  "name": "Tania",
  "title": "Web Developer",
  "website": ""
}

如您所見,它是一種人類可讀的數據格式,傳統上可能存儲在表格中。一些公司可能有公開的 .json 位於您可以訪問和提取數據的文件(您可以連接到的 API)。你也可以保存一個 .json 項目中您要從中提取數據的某個位置的文件。

目標

JSON 數據可以通過多種編程語言訪問和使用。在本教程中,我們將學習如何使用 PHP 和 JavaScript 訪問 JSON。

先決條件

  • 您必須有一個本地服務器設置,或者一個運行 PHP 的主機和一些基本的 PHP 知識。
  • 編程概念(數組和變量)和使用 JavaScript 的基本知識。

什麼是 JSON?

JSON代表J avaS 腳本 O 對象 N 旋轉。它是保存在 .json 中的數據 文件,由一系列鍵/值對組成 .

{ "key": "value" }

價值 任何 JSON 鍵的值都可以是字符串、布爾值、數字、空值、數組或對象。 JSON 中不允許有註釋。

雖然 JSON 類似於對像或數組,但 JSON 是字符串 .一個序列化的字符串,這意味著它可以在以後被解析和解碼成數據類型。

在 PHP 中使用來自 JSON 的數據

首先,要深入了解 JSON 只是一個字符串,我們將把 JSON 寫入 PHP 字符串並將其應用於名為 $data 的變量 .

$data = '{
	"name": "Aragorn",
	"race": "Human"
}';

然後我們將使用 json_decode() 將 JSON 字符串轉換為 PHP 對象的函數。

$character = json_decode($data);

現在我們可以將它作為 PHP 對象來訪問了。

echo $character->name;

這是整個文件。

<?php

$data = '{
	"name": "Aragorn",
	"race": "Human"
}';

$character = json_decode($data);
echo $character->name;

這是輸出。

Aragorn

從 URL 訪問 JSON 提要

從這裡開始,我們將把所有 JSON 數據放到它自己的 .json 中 文件。這樣,我們可以檢索文件的內容,而不是將其保存為 PHP 字符串。

這是 data.json 會看起來像。

;[
  {
    name: 'Aragorn',
    race: 'Human',
  },
  {
    name: 'Legolas',
    race: 'Elf',
  },
  {
    name: 'Gimli',
    race: 'Dwarf',
  },
]

下面是我們將如何在 PHP 中提取這些數據。

$url = 'data.json'; // path to your JSON file
$data = file_get_contents($url); // put the contents of the file into a variable
$characters = json_decode($data); // decode the JSON feed

為了獲得一個條目,我們必須訪問適當的數組編號。請記住,在編程中計數從 0 開始。

echo $characters[0]->name;
Aragorn

我可以使用 foreach 訪問數組中的所有數據 循環。

foreach ($characters as $character) {
	echo $character->name . '<br>';
}
Aragorn
Legolas
Gimli

這是完整的 PHP 文件。

<?php

$url = 'data.json'; // path to your JSON file
$data = file_get_contents($url); // put the contents of the file into a variable
$characters = json_decode($data); // decode the JSON feed

echo $characters[0]->name;

foreach ($characters as $character) {
	echo $character->name . '<br>';
}

例如,我們可以將數據顯示在表格中。

<table>
	<tbody>
		<tr>
			<th>Name</th>
			<th>Race</th>
		</tr>
		<?php foreach ($characters as $character) : ?>
        <tr>
            <td> <?php echo $character->name; ?> </td>
            <td> <?php echo $character->race; ?> </td>
        </tr>
		<?php endforeach; ?>
	</tbody>
</table>
名稱 種族
阿拉貢 人類
吉姆利 矮人
萊戈拉斯 精靈

使用關聯數組

還有另一種方法可以訪問 PHP 中的數據。如果你通過 true 作為 json_decode() 中的參數 ,數據變為關聯數組而不是對象。這意味著我們將使用方括號表示法[] 而不是細箭頭-> .

$characters = json_decode($data, true); // decode the JSON feed and make an associative array

而不是 ->race ,我們將使用 ['race'] 訪問該值 .

echo $characters[0]['race'];
Human

以下是訪問循環的方法。

foreach ($characters as $character) {
	echo $character['race'] . "\n";
}
Human
Elf
Dwarf

從嵌套數組中獲取數據

到目前為止,我們只使用了帶有鍵/值對的 JSON 提要,但經常會遇到嵌套。這是另一個書呆子示例,我們可以將其保存在一個名為 wizards.json 的新文件中 .

[
	{
		"name": "Harry Potter",
		"wand": [
			{
"core": "phoenix feather",
"length": "11 inches",
"wood": "holly"
			}
		]
	},
	{
		"name": "Hermione Granger",
		"wand": [
			{
"core": "dragon heartstring",
"length": "10 and 3/4 inches",
"wood": "vine"
			}
		]
	}
]

解碼提要。

$url = 'wizards.json';
$data = file_get_contents($url);
$wizards = json_decode($data, true);

我們將能夠使用 $wizard['key'][0]['key'] 訪問嵌套數組 在一個循環中,或者如果您只想打印一個正確對應的任何數字。

foreach ($wizards as $wizard) {
	echo $wizard['name'] . '\'s wand is ' .
	$wizard['wand'][0]['wood'] . ', ' .
	$wizard['wand'][0]['length'] . ', with a ' .
	$wizard['wand'][0]['core'] . ' core. <br>' ;
}
Harry Potter's wand is holly, 11 inches, with a phoenix feather core.
    Hermione Granger's wand is vine, 10 and 3/4 inches, with a dragon heartstring core.

將 PHP 對像或數組轉換為 JSON

就像你使用 json_decode() 要將 JSON 轉換為 PHP,您可以使用 json_encode() 將 PHP 轉換為 JSON .

$data = [
	'name' => 'Aragorn',
	'race' => 'Human'
];

echo json_encode($data);

我們製作了一個 PHP 數組並對其進行了編碼。這是輸出:

{"name":"Aragorn","race":"Human"}

通過 JavaScript 使用來自 JSON 的數據

我們將創建一個名為 data 的 JavaScript 變量 並應用 JSON 字符串。

var data = '[ { "name": "Aragorn", "race": "Human" }, { "name": "Gimli", "race": "Dwarf" } ]'

現在我們將使用 JSON.parse() 中內置的 JavaScript 函數來解碼字符串。

data = JSON.parse(data);

從這裡我們可以像訪問常規 JavaScript 對像一樣訪問數據。

console.log(data[1].name)
Gimli

我們可以使用 for 循環遍歷每個迭代 循環。

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

那很簡單!現在,我們可能需要從 URL 訪問 JSON。涉及一個額外的步驟,我們必須向文件發出請求。讓我們把上面的 JSON 字符串放到 data.json .

;[
  {
    name: 'Aragorn',
    race: 'Human',
  },
  {
    name: 'Gimli',
    race: 'Dwarf',
  },
]

現在我們將製作一個 XMLHttpRequest() .

var request = new XMLHttpRequest()

我們將打開文件 (data.json ) 通過 GET (URL) 請求。

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

從這裡開始,我們將解析和處理 onload 中的所有 JSON 數據 功能。

request.onload = function () {
  // begin accessing JSON data here
}

最後,提交請求。

request.send()

這是最終的代碼。

var request = new XMLHttpRequest()

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

request.onload = function () {
  // begin accessing JSON data here
  var data = JSON.parse(this.response)

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

request.send()

還有輸出。

Aragorn is a Human.
Gimli is a Dwarf.

使用 Fetch

現在您也可以使用 Fetch API 來做同樣的事情。閱讀如何使用 JavaScript Fetch API 獲取 JSON 數據以獲得更簡單的方法來獲取這些數據。

// Replace ./data.json with your JSON feed
fetch('./data.json')
  .then((response) => {
    return response.json()
  })
  .then((data) => {
    // Work with JSON data here
    console.log(data)
  })
  .catch((err) => {
    // Do something for an error here
  })

使用 jQuery

如您所見,使用純 JavaScript 檢索 JSON 提要並不難。然而,使用 jQuery 更容易,使用 getJSON() 功能。如果您不知道 jQuery 是如何工作的,則需要在任何此自定義代碼之前加載 jQuery JavaScript 庫。

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

您可能還會看到 jQuery 通過 AJAX 請求訪問 JSON,這有點冗長。

$(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)
    },
  })
})

兩者將具有相同的輸出。

Aragorn

結論

希望這篇文章能夠讓您了解 JSON 是什麼和做什麼,以及如何使用 PHP、JavaScript 或 jQuery 訪問 JSON 數據。


Tutorial JavaScript 教程
  1. React + TypeScript - 超級英雄/惡棍網站

  2. 一個 jQuery Pub Sub 實現

  3. 惡意腳本剖析:網站如何接管您的瀏覽器

  4. 像我一樣向我解釋餅乾 9

  5. 使用 Azure 靜態 Web 應用程序自動部署靜態項目!

  6. 何時使用 Context API 與 Redux

  7. 在 React useEffect 中進行 API 調用

  1. 2019 年學習 React:什麼是 React?

  2. 會話重放如何工作第 4 部分:沙盒

  3. 開發者網絡工具:簡短的 IRL 版

  4. 多個瓷磚問題谷歌地圖 API v3 JS

  5. 使用 React 和 GraphQL 創建 Reddit 克隆 - 01

  6. 高級 TypeScript 練習 - 問題 2

  7. 使用 <details> HTML 標籤作為導航

  1. 使用 React 和 CSS 構建一個簡單的響應式菜單

  2. Web 應用程序中的連接類型

  3. 🎄 CodeCasts 編碼來臨:第七天 🎄

  4. 我的第一個 NPM 包:rollup-plugin-hotreload.js