JS-Tutorial

JS-HAUS JS-Einführung JS Wohin JS-Ausgabe JS-Anweisungen JS-Syntax JS-Kommentare JS-Variablen JS Let JS Konst JS-Operatoren JS-Arithmetik JS-Aufgabe JS-Datentypen JS-Funktionen JS-Objekte JS-Ereignisse JS-Strings JS-String-Methoden Suche nach JS-Strings JS-String-Vorlagen JS-Nummern JS-Zahlenmethoden JS-Arrays JS-Array-Methoden JS-Array-Sortierung JS-Array-Iteration JS-Array-Konstante JS-Daten JS-Datumsformate JS Date Get-Methoden JS-Datumssatzmethoden JS Math JS Zufällig JS Boolesche Werte JS-Vergleiche JS-Bedingungen JS-Schalter JS-Schleife für JS-Schleife für In JS-Schleife für Of JS-Schleife While JS Pause JS-Iterables JS-Sets JS-Karten JS Typeof JS-Typkonvertierung JS Bitweise JS RegExp JS-Fehler JS-Bereich JS Heben Strenger JS-Modus JS dieses Schlüsselwort JS-Pfeilfunktion JS-Klassen JS JSON JS-Debugging JS-Styleguide JS Best Practices JS-Fehler JS-Leistung JS Reservierte Wörter

JS-Versionen

JS-Versionen JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge JS-Geschichte

JS-Objekte

Objektdefinitionen Objekteigenschaften Objektmethoden Objektanzeige Objektzugriffsmethoden Objektkonstruktoren Objekt-Prototypen Objekt-Iterables Objektsätze Objektkarten Objektreferenz

JS-Funktionen

Funktionsdefinitionen Funktionsparameter Funktionsaufruf Funktionsaufruf Funktion anwenden Funktionsschließungen

JS-Klassen

Klasse Einführung Klassenvererbung Klasse statisch

JS asynchron

JS-Rückrufe JS asynchron JS verspricht JS Async/Warten

JS-HTML-DOM

DOM-Einführung DOM-Methoden DOM-Dokument DOM-Elemente DOM-HTML DOM-Formulare DOM-CSS DOM-Animationen DOM-Ereignisse DOM-Ereignis-Listener DOM-Navigation DOM-Knoten DOM-Sammlungen DOM-Knotenlisten

Stückliste des JS-Browsers

JS-Fenster JS-Bildschirm JS-Standort JS-Geschichte JS-Navigator JS-Popup-Warnung JS-Timing JS-Cookies

JS-Web-APIs

Web-API-Einführung Web Forms-API Webprotokoll-API Webspeicher-API Web Worker-API Web-Fetch-API Web-Geolocation-API

JS AJAX

AJAX-Einführung AJAX-XMLHttp AJAX-Anfrage AJAX-Antwort AJAX-XML-Datei AJAX-PHP AJAX ASP AJAX-Datenbank AJAX-Anwendungen AJAX-Beispiele

JS JSON

JSON-Einführung JSON-Syntax JSON vs. XML JSON-Datentypen JSON-Parsing JSON-Stringify JSON-Objekte JSON-Arrays JSON-Server JSON-PHP JSON-HTML JSON JSONP

JS vs. jQuery

jQuery-Selektoren jQuery-HTML jQuery-CSS jQuery-DOM

JS-Grafik

JS-Grafik JS-Leinwand JS Plotly JS Chart.js JS Google-Diagramm JS D3.js

JS-Beispiele

JS-Beispiele JS-HTML-DOM JS-HTML-Eingabe JS-HTML-Objekte JS-HTML-Ereignisse JS-Browser JS-Editor JS-Übungen JS-Quiz JS-Zertifikat

JS-Referenzen

JavaScript-Objekte HTML-DOM-Objekte


JSON- PHP


Eine häufige Verwendung von JSON besteht darin, Daten von einem Webserver zu lesen und die Daten auf einer Webseite anzuzeigen.

In diesem Kapitel erfahren Sie, wie Sie JSON-Daten zwischen dem Client und einem PHP-Server austauschen.


Die PHP-Datei

PHP hat einige eingebaute Funktionen, um mit JSON umzugehen.

Objekte in PHP können mit der PHP-Funktion json_encode() in JSON konvertiert werden :

PHP-Datei

<?php
$myObj->name = "John";
$myObj->age = 30;
$myObj->city = "New York";

$myJSON = json_encode($myObj);

echo $myJSON;
?>

Das Client-JavaScript

Hier ist ein JavaScript auf dem Client, das einen AJAX-Aufruf verwendet, um die PHP-Datei aus dem obigen Beispiel anzufordern:

Beispiel

Verwenden Sie JSON.parse(), um das Ergebnis in ein JavaScript-Objekt umzuwandeln:

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


PHP-Array

Arrays in PHP werden auch in JSON konvertiert, wenn die PHP-Funktion json_encode() verwendet wird :

PHP-Datei

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

$myJSON = json_encode($myArr);

echo $myJSON;
?>

Das Client-JavaScript

Hier ist ein JavaScript auf dem Client, das einen AJAX-Aufruf verwendet, um die PHP-Datei aus dem obigen Array-Beispiel anzufordern:

Beispiel

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

PHP-Datenbank

PHP ist eine serverseitige Programmiersprache und kann verwendet werden, um auf eine Datenbank zuzugreifen.

Stellen Sie sich vor, Sie haben eine Datenbank auf Ihrem Server und möchten vom Client eine Anfrage an sie senden, in der Sie nach den 10 ersten Zeilen in einer Tabelle mit dem Namen "Kunden" fragen.

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, wandeln Sie das JSON-Objekt in einen String um und senden es als Parameter an die URL der PHP-Seite:

Beispiel

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

Beispiel erklärt:

  • 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 dem JSON-String als Parameter.
  • Warten Sie, bis die Anfrage mit dem Ergebnis (als JSON) zurückkehrt
  • Zeigt das von der PHP-Datei erhaltene Ergebnis an.

Schauen Sie sich die PHP-Datei an:

PHP-Datei

<?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-Datei erklärt:

  • Wandeln Sie die Anfrage mithilfe der PHP-Funktion json_decode() in ein Objekt um .
  • 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 mithilfe der Funktion json_encode() als JSON zurück .

Verwenden Sie die Daten

Beispiel

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

PHP-Methode = POST

Beim Senden von Daten an den Server ist es oft am besten, die HTTP- POSTMethode zu verwenden.

Um AJAX-Anforderungen mit der POSTMethode 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 send()Methode sein:

Beispiel

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

Der einzige Unterschied in der PHP-Datei ist die Methode zum Abrufen der übertragenen Daten.

PHP-Datei

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