JSON PHP

Índice

Um uso comum do JSON é ler dados de um servidor web, e exibir os dados em uma página da web.

Este capítulo ensinará como trocar dados JSON entre o cliente e um servidor PHP.

O arquivo PHP

PHP possui algumas funções integradas para lidar com JSON.

Objetos em PHP podem ser convertidos em JSON usando a função PHP json_encode():

arquivo PHP

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

O JavaScript do cliente

Aqui está um JavaScript no cliente, usando uma chamada AJAX para solicitar o PHP arquivo do exemplo acima:

Exemplo

Use JSON.parse() para converter o resultado em um objeto 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();

Experimente você mesmo →

<!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>

Matriz PHP

Arrays em PHP também serão convertidos em JSON ao usar a função PHP json_encode():

arquivo PHP

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

O JavaScript do cliente

Aqui está um JavaScript no cliente, usando uma chamada AJAX para solicitar o PHP arquivo do exemplo de array acima:

Exemplo

Use JSON.parse() para converter o resultado em um array 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();

Experimente você mesmo →

<!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>

Banco de dados PHP

PHP é uma linguagem de programação do lado do servidor e pode ser usada para acessar um banco de dados.

Imagine que você tem um banco de dados em seu servidor e deseja enviar uma solicitação para do cliente onde você solicita as 10 primeiras linhas de uma tabela chamada "clientes".

No cliente, crie um objeto JSON que descreva o número de linhas que você deseja retornar.

Antes de enviar a solicitação ao servidor, converta o objeto JSON em um string e envie-a como parâmetro para a url da página PHP:

Exemplo

Use JSON.stringify() para converter o objeto JavaScript em 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();

Experimente você mesmo →

<!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>

Exemplo explicado:

Defina um objeto contendo uma propriedade e um valor "limite".
Converta o objeto em uma string JSON.
Envie uma solicitação para o arquivo PHP, com a string JSON como parâmetro.
Aguarde até que a solicitação retorne com o resultado (como JSON)
Exiba o resultado recebido do arquivo PHP.

Dê uma olhada no arquivo PHP:

arquivo 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);
?>

Arquivo PHP explicado:

Converta a solicitação em um objeto, usando a função PHP json_decode().
Acesse o banco de dados e preencha um array com os dados solicitados.
Adicione a matriz a um objeto e retorne o objeto como JSON usando a função json_encode().

Use os dados

Exemplo

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;
}

Experimente você mesmo →

<!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>

Método PHP=POST

Ao enviar dados para o servidor, geralmente é melhor usar o método HTTP POST.

Para enviar solicitações AJAX usando o método POST, especifique o método e o cabeçalho correto.

Os dados enviados ao servidor agora devem ser um argumento para o método send():

Exemplo

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);

Experimente você mesmo →

<!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>

A única diferença no arquivo PHP é o método de obtenção dos dados transferidos.

arquivo PHP

Use $_POST em vez de $_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);
?>