JSON PHP

Оглавление

    Показать оглавление

Обычно JSON используется для чтения данных с веб-сервера. и отобразить данные на веб-странице.

Эта глава научит вас, как обмениваться данными JSON между клиент и PHP-сервер.

PHP-файл

PHP имеет несколько встроенных функций для обработки JSON.

Объекты PHP можно преобразовать в JSON с помощью функции PHP. json_encode():

PHP-файл

 <?php
$myObj->name = "John";
$myObj->age = 30;
$myObj->city = "New 
  York";
$myJSON = json_encode($myObj);
echo $myJSON;
?>

Клиентский JavaScript

Вот JavaScript на клиенте, использующий вызов AJAX для запроса PHP. файл из примера выше:

Пример

Используйте JSON.parse() для преобразования результата в объект JavaScript:

const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  document.getElementById("demo").innerHTML = myObj.name;
}
xmlhttp.open("GET", "demo_file.php");
xmlhttp.send();

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>Get JSON Data from a PHP Server</h2>
<p id="demo"></p>

<script>
const xmlhttp = new XMLHttpRequest();

xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  document.getElementById("demo").innerHTML = myObj.name;
}
xmlhttp.open("GET", "demo_file.php");
xmlhttp.send();
</script>

</body>
</html>

PHP-массив

Массивы в PHP также будут преобразованы в JSON при использовании функции PHP. json_encode():

PHP-файл

 <?php
$myArr = array("John", "Mary", "Peter", "Sally");
$myJSON = json_encode($myArr);
echo $myJSON;
?>

Клиентский JavaScript

Вот JavaScript на клиенте, использующий вызов AJAX для запроса PHP. файл из примера массива выше:

Пример

Используйте JSON.parse() для преобразования результата в массив JavaScript:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  document.getElementById("demo").innerHTML = myObj[2];
}
xmlhttp.open("GET", "demo_file_array.php", true);
xmlhttp.send();

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>Get JSON Data from a PHP Server</h2>
<p>Convert the data into a JavaScript array:</p>
<p id="demo"></p>

<script>
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  document.getElementById("demo").innerHTML = myObj[2];
}
xmlhttp.open("GET", "demo_file_array.php");
xmlhttp.send();
</script>

</body>
</html>

База данных PHP

PHP — это серверный язык программирования, который можно использовать для доступа к базе данных.

Представьте, что у вас есть база данных на вашем сервере, и вы хотите отправить запрос это от клиента, где вы запрашиваете 10 первых строк в таблице под названием "клиенты".

На клиенте создайте объект JSON, описывающий количество строк, которые вы хотите вернуть.

Прежде чем отправить запрос на сервер, преобразуйте объект JSON в строку и отправьте ее в качестве параметра на URL-адрес PHP-страницы:

Пример

Используйте JSON.stringify() для преобразования объекта JavaScript в JSON:

const limit = {"limit":10};
const dbParam = JSON.stringify(limit);
xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  document.getElementById("demo").innerHTML = this.responseText;
}
xmlhttp.open("GET","json_demo_db.php?x=" + dbParam);
xmlhttp.send();

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>Get JSON Data from a PHP Server</h2>
<p>The JSON received from the PHP file:</p>

<p id="demo"></p>

<script>
const dbParam = JSON.stringify({"limit":10});

const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  document.getElementById("demo").innerHTML = this.responseText;
}
xmlhttp.open("GET", "json_demo_db.php?x=" + dbParam);
xmlhttp.send();
</script>

</body>
</html>

Пример объяснен:

  • Определите объект, содержащий свойство и значение «предела».

  • Преобразуйте объект в строку JSON.

  • Отправьте запрос к файлу PHP, указав в качестве параметра строку JSON.

  • Подождите, пока запрос не вернет результат (в формате JSON).

  • Отобразите результат, полученный из файла PHP.

Взгляните на файл PHP:

PHP-файл

 <?php
header("Content-Type: application/json; charset=UTF-8");
$obj = 
  json_decode($_GET["x"], false);
  
$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
  $stmt = $conn->prepare("SELECT name FROM customers LIMIT ?");
$stmt->bind_param("s", $obj->limit);
$stmt->execute();
$result = $stmt->get_result();
  $outp = $result->fetch_all(MYSQLI_ASSOC);
echo json_encode($outp);
?>

Объяснение PHP-файла:

  • Преобразуйте запрос в объект с помощью функции PHP. json_decode().

  • Получите доступ к базе данных и заполните массив запрошенными данными.

  • Добавьте массив к объекту и верните объект в формате JSON, используя функция json_encode().

Используйте данные

Пример

xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  let text = "";
  for (let x in myObj) {
    text += myObj[x].name + "<br>";
  }
 
  document.getElementById("demo").innerHTML = text;
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>Get JSON Data from a PHP Server</h2>
<p id="demo"></p>

<script>
const obj = { "limit":10 };
const dbParam = JSON.stringify(obj);
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  myObj = JSON.parse(this.responseText);
  let text = ""
  for (let x in myObj) {
    text += myObj[x].name + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
};
xmlhttp.open("GET", "json_demo_db.php?x=" + dbParam);
xmlhttp.send();
</script>

<p>Try changing the "limit" property from 10 to 5.</p>

</body>
</html>

Метод PHP=POST

При отправке данных на сервер часто лучше использовать метод HTTP POST.

Чтобы отправлять запросы AJAX с помощью метода POST, укажите метод и правильный заголовок.

Данные, отправляемые на сервер, теперь должны быть аргументом метода send():

Пример

const dbParam = JSON.stringify({"limit":10});
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  let text ="";
  for (let x in myObj) {
    text += myObj[x].name + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
}
xmlhttp.open("POST", "json_demo_db_post.php");

xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>Use HTTP POST to Get JSON Data from a PHP Server</h2>

<p id="demo"></p>

<script>
const dbParam = JSON.stringify({"limit":10});
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  myObj = JSON.parse(this.responseText);
  let text = "";
  for (let x in myObj) {
    text += myObj[x].name + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
}
xmlhttp.open("POST", "json_demo_db_post.php");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
</script>

<p>Try changing the "limit" property from 10 to 5.</p>

</body>
</html>

Единственная разница в файле PHP — это метод получения передаваемых данных.

PHP-файл

Используйте $_POST вместо $_GET:

 <?php
header("Content-Type: application/json; charset=UTF-8");
  $obj = 
  json_decode($_POST["x"], false);
  
  
$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
  $stmt = $conn->prepare("SELECT name FROM customers LIMIT ?");
$stmt->bind_param("s", 
  $obj->limit);
$stmt->execute();
$result = $stmt->get_result();
  $outp = $result->fetch_all(MYSQLI_ASSOC);
echo json_encode($outp);
?>