Eine häufige Verwendung von JSON besteht darin, Daten von einem Webserver zu lesen. und die Daten auf einer Webseite anzeigen.
In diesem Kapitel erfahren Sie, wie Sie JSON-Daten zwischen ihnen austauschen dem Client und einem PHP-Server.
PHP verfügt über einige integrierte Funktionen zur Verarbeitung von JSON.
Objekte in PHP können mithilfe der PHP-Funktion in JSON konvertiert werden json_encode():
<?php
$myObj->name = "John";
$myObj->age = 30;
$myObj->city = "New
York";
$myJSON = json_encode($myObj);
echo $myJSON;
?>
Hier ist ein JavaScript auf dem Client, das einen AJAX-Aufruf verwendet, um PHP anzufordern Datei aus dem Beispiel oben:
Verwenden Sie JSON.parse(), um das Ergebnis in ein JavaScript-Objekt zu konvertieren:
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();
Probieren Sie es selbst aus →
<!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>
Arrays in PHP werden bei Verwendung der PHP-Funktion auch in JSON konvertiert json_encode():
<?php
$myArr = array("John", "Mary", "Peter", "Sally");
$myJSON = json_encode($myArr);
echo $myJSON;
?>
Hier ist ein JavaScript auf dem Client, das einen AJAX-Aufruf verwendet, um PHP anzufordern Datei aus dem Array-Beispiel oben:
Verwenden Sie JSON.parse(), um das Ergebnis in ein JavaScript-Array zu konvertieren:
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();
Probieren Sie es selbst aus →
<!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 ist eine serverseitige Programmiersprache und kann für den Zugriff auf eine Datenbank verwendet werden.
Stellen Sie sich vor, Sie haben eine Datenbank auf Ihrem Server und möchten eine Anfrage an diese senden es vom Client, wo Sie nach den 10 ersten Zeilen in einer Tabelle mit dem Namen fragen "Kunden".
Erstellen Sie auf dem Client ein JSON-Objekt, das die Anzahl der Zeilen beschreibt, die Sie zurückgeben möchten.
Bevor Sie die Anfrage an den Server senden, konvertieren Sie das JSON-Objekt in ein string und senden Sie ihn als Parameter an die URL der PHP-Seite:
Verwenden Sie JSON.stringify(), um das JavaScript-Objekt in JSON zu konvertieren:
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();
Probieren Sie es selbst aus →
<!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>
Definieren Sie ein Objekt, das eine „Limit“-Eigenschaft und einen Wert enthält.
Konvertieren Sie das Objekt in einen JSON-String.
Senden Sie eine Anfrage an die PHP-Datei mit der JSON-Zeichenfolge als Parameter.
Warten Sie, bis die Anfrage mit dem Ergebnis (als JSON) zurückkommt.
Zeigen Sie das von der PHP-Datei erhaltene Ergebnis an.
Schauen Sie sich die PHP-Datei an:
<?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);
?>
Konvertieren Sie die Anfrage mithilfe der PHP-Funktion in ein Objekt json_decode().
Greifen Sie auf die Datenbank zu und füllen Sie ein Array mit den angeforderten Daten.
Fügen Sie das Array einem Objekt hinzu und geben Sie das Objekt als JSON zurück die Funktion 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;
}
Probieren Sie es selbst aus →
<!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>
Beim Senden von Daten an den Server ist es oft am besten, die HTTP-Methode POST
zu verwenden.
Um AJAX-Anfragen mit der Methode POST
zu senden, geben Sie die Methode und den richtigen Header an.
Die an den Server gesendeten Daten müssen nun ein Argument für die Methode send()
sein:
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);
Probieren Sie es selbst aus →
<!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>
Der einzige Unterschied in der PHP-Datei besteht in der Methode zum Abrufen der übertragenen Daten.
Verwenden Sie $_POST anstelle von $_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);
?>