JSON significa la notación de objetos de J ava Script . Se utiliza para intercambiar y almacenar los datos del servidor web. JSON usa la notación de objetos de JavaScript. Los objetos de JavaScript se pueden convertir a JSON y recibir texto en formato JSON en los objetos de JavaScript. La conversión del objeto JavaScript al formato JSON se realiza mediante la función dada:
JSON.stringify(object)
La conversión del formato JSON al objeto JavaScript se realiza mediante la función dada:
JSON.parse(string_format)
Intercambiando los datos del servidor, PHP como lenguaje de servidor utilizado. La función JSON.parse() se usa para obtener los datos de php o de cualquier otro servidor. Para recibir los datos del servidor, algunas declaraciones AJAX para verificar si el servidor está listo para responder los datos del servidor o no. Si se cumplen esas condiciones, se pueden recibir los datos del archivo php. Los protocolos utilizados para enviar y recibir los datos del servidor vienen dados por:
XMLHttpRequest()
Archivos PHP y su cliente JavaScript: Considere un archivo php en el que se proporciona el objeto de la persona con sus datos personales como nombre, sexo y edad. Los datos del objeto del php deben codificarse en formato JSON. El archivo dado es guardado por geeks.php
php
<?php $myObj = new stdClass(); $myObj->name = "Geeks"; $myObj->college="NIT"; $myObj->gender = "Male"; $myObj->age = 30; $myJSON = json_encode($myObj); echo $myJSON; ?>
Desde el archivo php, los datos se envían al JSON a través del «echo» y los datos se responderán en el JavaScript del cliente. En el archivo php, json_encode() se usa para convertir los objetos en el archivo php al formato json. Para acceder a los datos del archivo php a través del cliente JavaScript, use el siguiente script:
html
<!DOCTYPE html>
<html>
<body>
<h1 style = "color:#090; text-align:center;">GeeksforGeeks</h1>
<p style="font-size:25px">
JSON get data from a PHP file on the server.
</p>
<h4>Author Name:</h4>
<p id="name"></p>
<h4>College:</h4>
<p id="college"></p>
<h4>Gender:</h4>
<p id="gender"></p>
<h4>Age:</h4>
<p id="age"></p>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
document.getElementById("name").innerHTML = myObj.name;
document.getElementById("college").innerHTML = myObj.college;
document.getElementById("gender").innerHTML = myObj.gender;
document.getElementById("age").innerHTML = myObj.age;
}
};
xmlhttp.open("GET", "geeks.php", true);
xmlhttp.send();
</script>
</body>
</html>
Producción:
En el Script , la función JSON.parse(this.responseText) se usa para analizar los datos en variables para que pueda llamar a los valores de ese objeto. This.response se usa para tomar los datos del php que se está imprimiendo como una string. En el código dado, los datos del objeto php se extraen mediante el script de JSON. Mediante la función AJAX en la secuencia de comandos, se verifican los datos, si está respondiendo, no cuando ha respondido, los datos se enviarán e imprimirán en la página web. La función xmlhttp.open(“GET”, “geeks.php”, true) se utiliza para obtener el valor del archivo php geeks.php . La función xmlhttp.send() se usa para enviar los valores a XMLHttpRequest() .
PHP Array y su cliente JavaScript: considere un archivo php que consiste en una array del nombre. Los datos se codifican en JSON y se imprimirán utilizando el «eco».
php
<?php $arrDay = array( "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday" ); $arrJSON = json_encode($arrDay); echo $arrJSON; ?>
Accedamos a los datos de la array del archivo php usando JavaScript del cliente. Para hacerlo, consideremos el siguiente archivo HTML.
html
<!DOCTYPE html>
<html>
<body>
<h1 style = "color:#090; text-align:center;">GeeksforGeeks</h1>
<p style="font-size:25px">JSON get data from PHP file,
and converting into JavaScript array.</p>
<p style = "font-size:25px;">Second Date of week: </p>
<p id="day"></p>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
document.getElementById("day").innerHTML = myObj[2];
}
};
xmlhttp.open("GET", "daylist.php", true);
xmlhttp.send();
</script>
</body>
</html>
Producción:
En la array, se analiza la variable en JavaScript, ese valor está siendo llamado por la array de js que se inicializó en la línea anterior.
Base de datos PHP: recuperar los datos de la base de datos es similar a obtener los datos del archivo php normal. Pero las pocas consultas adicionales que se agregarán. En este proceso, primero los datos de la base de datos deben extraerse al archivo php y luego el JavaScript debe tomar esos datos para proyectarlos en el servidor del cliente. Primero crea la base de datos MySQL usando el php. El siguiente programa se usa para crear una tabla e insertar algunos datos en ella.
php
<?php
$conn = new mysqli("localhost", "root", "", "geeksforgeeks");
$createTable = "create table geeks(names varchar(255))";
$tableadd = $conn->query($createTable);
$conn->query("insert into geeks values('Geeks')");
$conn->query("insert into geeks values('gfg')");
$conn->query("insert into geeks values('g4g')");
$conn->close();
?>
Ahora, extrayendo los datos de otro script php.
php
<?php
$conn = new mysqli("localhost", "root", "", "geeksforgeeks");
$result = $conn->query("select names from geeks");
$output = array();
$output = $result->fetch_all(MYSQLI_ASSOC);
$sresult = json_encode($output);
echo $sresult;
$conn->close();
?>
Ahora recopilemos datos en el JavaScript del cliente e imprimamos el resultado.
html
<!DOCTYPE html>
<html>
<body>
<h1 style = "color:#090; text-align:center;">GeeksforGeeks</h1>
<p style="font-size:25px">
JSON received the data from the PHP file
</p>
<p id="arrayContent"></p>
<script>
var obj, xmlhttp;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("arrayContent").innerHTML =
this.responseText;
}
};
xmlhttp.open("GET", "data.php", true);
xmlhttp.send();
</script>
</body>
</html>
A continuación, se envía al cliente y se imprime el resultado en la estructura JSON, ya que no se filtran los valores en cada valor diferente.
producción:
PHP Loop: esta es la combinación de la array y los dos temas anteriores (PHP Array y su cliente JavaScript y PHP Database) con la integración de los bucles en ella. En este JavaScript analiza los valores en una variable, esos valores son llamados por arrays y después de imprimir cada myObj, sus valores se incrementarán al siguiente valor.
html
<!DOCTYPE html>
<html>
<body>
<h1 style = "color:#090; text-align:center;">GeeksforGeeks</h1>
<p style="font-size:25px">
JSON received the data from the PHP file
</p>
<p id="arrayContent"></p>
<script>
var obj, xmlhttp, myObj, x, txt = "";
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
for (x in myObj) {
txt += myObj[x].names + "<br>";
}
document.getElementById("arrayContent").innerHTML = txt;
}
};
xmlhttp.open("GET", "data.php", true);
xmlhttp.send();
</script>
</body>
</html>
Producción:
Método PHP = POST: Es bastante simple si los temas anteriores se hubieran entendido por completo. En la siguiente sintaxis se producirán cambios. En el método POST, los argumentos deben pasarse a través del método de envío, pero en el método GET, los argumentos pueden pasarse cuando se envía la solicitud del archivo php.
OBTENER método:
open("GET", file_name?x=argument, asyn, username, password)
Método POST:
open("POST", file_name, asyn, username, password)
Los argumentos son pasados por el método de envío (argumento) y envían una solicitud desde el php para acceder a los datos del servidor. Por lo tanto, use la función para obtener la solicitud que se detalla a continuación:
setRequestHeader("Content-type", "application/x-www-form-urlencoded")
En el archivo php se debe agregar un encabezado:
header("Content-Type: application/json; charset=UTF-8")
.
El archivo php que se muestra a continuación se puede guardar usando post.php
php
<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_POST["x"], false);
$conn = new mysqli("localhost", "root", "", "geeksforgeeks");
$result = $conn->query("select names from ".$obj->table);
$output = array();
$output = $result->fetch_all(MYSQLI_ASSOC);
$sresult = json_encode($output);
echo $sresult;
?>
Después de hacer todo esto en php y el archivo html, aparecerá de la siguiente manera:
html
<!DOCTYPE html>
<html>
<body>
<h1 style = "color:#090; text-align:center;">GeeksforGeeks</h1>
<p style="font-size:25px">geeks table values:</p>
<p id="arrayContent"></p>
<script>
var obj, xmlhttp, myObj, x, txt = "";
obj = JSON.stringify({"table":"geeks"});
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
for (x in myObj) {
txt += myObj[x].names + "<br>";
}
document.getElementById("arrayContent").innerHTML = txt;
}
};
xmlhttp.open("POST", "post.php", true);
xmlhttp.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
xmlhttp.send("x=" + obj );
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por KameshGullapalli y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA