JSONPHP _
Un uso común de JSON es leer datos de un servidor web y mostrar los datos en una página web.
Este capítulo le enseñará cómo intercambiar datos JSON entre el cliente y un servidor PHP.
El archivo PHP
PHP tiene algunas funciones integradas para manejar JSON.
Los objetos en PHP se pueden convertir a JSON usando la función de PHP json_encode() :
archivo PHP
<?php
$myObj->name = "John";
$myObj->age = 30;
$myObj->city = "New
York";
$myJSON = json_encode($myObj);
echo $myJSON;
?>
El JavaScript del cliente
Aquí hay un JavaScript en el cliente, usando una llamada AJAX para solicitar el archivo PHP del ejemplo anterior:
Ejemplo
Use JSON.parse() para convertir el resultado en un 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();
Matriz de PHP
Las matrices en PHP también se convertirán en JSON cuando se use la función de PHP json_encode() :
archivo PHP
<?php
$myArr = array("John", "Mary", "Peter", "Sally");
$myJSON = json_encode($myArr);
echo $myJSON;
?>
El JavaScript del cliente
Aquí hay un JavaScript en el cliente, usando una llamada AJAX para solicitar el archivo PHP del ejemplo de matriz anterior:
Ejemplo
Use JSON.parse() para convertir el resultado en una matriz de 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();
Base de datos PHP
PHP es un lenguaje de programación del lado del servidor y se puede utilizar para acceder a una base de datos.
Imagine que tiene una base de datos en su servidor y desea enviarle una solicitud desde el cliente donde solicita las 10 primeras filas en una tabla llamada "clientes".
En el cliente, cree un objeto JSON que describa la cantidad de filas que desea devolver.
Antes de enviar la solicitud al servidor, convierta el objeto JSON en una cadena y envíelo como parámetro a la url de la página PHP:
Ejemplo
Use JSON.stringify() para convertir el objeto JavaScript en 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();
Ejemplo explicado:
- Defina un objeto que contenga una propiedad y un valor de "límite".
- Convierta el objeto en una cadena JSON.
- Envía una solicitud al archivo PHP, con la cadena JSON como parámetro.
- Espere hasta que la solicitud regrese con el resultado (como JSON)
- Muestra el resultado recibido del archivo PHP.
Echa un vistazo al archivo PHP:
archivo 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);
?>
Archivo PHP explicado:
- Convierta la solicitud en un objeto, usando la función de PHP json_decode() .
- Acceda a la base de datos y complete una matriz con los datos solicitados.
- Agregue la matriz a un objeto y devuelva el objeto como JSON mediante la función json_encode() .
Usa los datos
Ejemplo
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;
}
Método PHP = POST
Al enviar datos al servidor, a menudo es mejor usar el POSTmétodo HTTP.
Para enviar solicitudes AJAX utilizando el POSTmétodo, especifique el método y el encabezado correcto.
Los datos enviados al servidor ahora deben ser un argumento para el send()método:
Ejemplo
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);
La única diferencia en el archivo PHP es el método para obtener los datos transferidos.
archivo PHP
Use $_POST en lugar 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);
?>