JS-zelfstudie

JS HOME JS Introductie JS Waarheen? JS-uitgang JS-verklaringen JS-syntaxis JS-opmerkingen JS-variabelen JS Let JS Const JS-operators JS Rekenen JS-opdracht JS-gegevenstypen JS-functies JS-objecten JS-evenementen JS-snaren JS String-methoden JS String zoeken JS String-sjablonen JS-nummers JS-nummermethoden JS-arrays JS-array-methoden JS-array sorteren JS-array-iteratie JS Array Const JS-datums JS-datumnotaties JS Datum Ophaalmethoden Methoden voor het instellen van JS-datum JS Math JS Willekeurig JS Booleans JS-vergelijkingen JS-voorwaarden JS-schakelaar JS Loop For JS-lus voor binnen JS Loop For Of JS-lus terwijl JS Break JS-iteraties JS-sets JS-kaarten JS Typeof JS Type conversie JS Bitwise JS RegExp JS-fouten JS-bereik JS Hijsen JS strikte modus JS dit trefwoord JS-pijlfunctie JS-lessen JS JSON JS-foutopsporing JS-stijlgids JS-best practices JS-fouten JS-prestaties JS Gereserveerde Woorden

JS-versies

JS-versies JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge JS-geschiedenis

JS-objecten

Objectdefinities Objecteigenschappen Objectmethoden Objectweergave Objectaccessoires Objectconstructeurs Objectprototypes Object-Iterables Objectsets Objectkaarten Objectreferentie

JS-functies

Functiedefinities Functieparameters: Functie-aanroep Functie-oproep: Functie Toepassen Functie Sluitingen

JS-lessen

Klas Intro Klasse Overerving Klasse Statisch

JS Asynchrone

JS-callbacks JS asynchroon JS belooft JS Async/Wachten

JS HTML DOM

DOM Intro DOM-methoden DOM-document DOM-elementen DOM HTML DOM-formulieren DOM-CSS DOM-animaties DOM-evenementen DOM-gebeurtenisluisteraar DOM-navigatie DOM-knooppunten DOM-collecties DOM-knooppuntlijsten

JS-browserstuklijst

JS-venster JS-scherm JS-locatie JS-geschiedenis JS-navigator JS pop-upwaarschuwing JS-timing JS-koekjes

JS Web API's

Introductie web-API Web Forms API Webgeschiedenis-API Webopslag-API Web Worker-API Web Fetch-API Webgeolocatie-API

JS AJAX

Ajax-intro AJAX XMLHttp Ajax-verzoek Ajax-reactie AJAX XML-bestand AJAX PHP Ajax ASP AJAX-database AJAX-toepassingen Ajax-voorbeelden

JS JSON

JSON-intro JSON-syntaxis JSON versus XML JSON-gegevenstypen JSON ontleden JSON Stringify JSON-objecten JSON-arrays JSON-server JSON PHP JSON HTML JSON JSONP

JS versus jQuery

jQuery-kiezers jQuery HTML jQuery CSS jQuery DOM

JS-graphics

JS-graphics JS Canvas JS Plotly JS Chart.js JS Google-kaart JS D3.js

JS-voorbeelden

JS-voorbeelden JS HTML DOM JS HTML-invoer JS HTML-objecten JS HTML-evenementen JS-browser JS-editor JS-oefeningen JS-quiz JS-certificaat

JS-referenties

JavaScript-objecten HTML DOM-objecten


JSON PHP


Een veelgebruikt gebruik van JSON is om gegevens van een webserver te lezen en de gegevens op een webpagina weer te geven.

In dit hoofdstuk leert u hoe u JSON-gegevens uitwisselt tussen de client en een PHP-server.


Het PHP-bestand

PHP heeft enkele ingebouwde functies om JSON af te handelen.

Objecten in PHP kunnen worden geconverteerd naar JSON met behulp van de PHP-functie json_encode() :

PHP-bestand

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

$myJSON = json_encode($myObj);

echo $myJSON;
?>

JavaScript van de klant

Hier is een JavaScript op de client, die een AJAX-aanroep gebruikt om het PHP-bestand uit het bovenstaande voorbeeld op te vragen:

Voorbeeld

Gebruik JSON.parse() om het resultaat om te zetten in een JavaScript-object:

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 worden ook geconverteerd naar JSON bij gebruik van de PHP-functie json_encode() :

PHP-bestand

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

$myJSON = json_encode($myArr);

echo $myJSON;
?>

JavaScript van de klant

Hier is een JavaScript op de client, waarbij een AJAX-aanroep wordt gebruikt om het PHP-bestand uit het bovenstaande arrayvoorbeeld op te vragen:

Voorbeeld

Gebruik JSON.parse() om het resultaat om te zetten in een JavaScript-array:

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

PHP is een programmeertaal aan de serverzijde en kan worden gebruikt om toegang te krijgen tot een database.

Stel je voor dat je een database op je server hebt en je wilt er een verzoek naar sturen van de client waar je vraagt ​​om de 10 eerste rijen in een tabel met de naam "klanten".

Maak op de client een JSON-object dat het aantal rijen beschrijft dat u wilt retourneren.

Voordat u het verzoek naar de server verzendt, converteert u het JSON-object naar een string en stuurt u het als parameter naar de url van de PHP-pagina:

Voorbeeld

Gebruik JSON.stringify() om het JavaScript-object naar JSON te converteren:

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

Voorbeeld uitgelegd:

  • Definieer een object dat een "limit"-eigenschap en -waarde bevat.
  • Converteer het object naar een JSON-tekenreeks.
  • Stuur een aanvraag naar het PHP-bestand, met de JSON-tekenreeks als parameter.
  • Wacht tot het verzoek terugkeert met het resultaat (als JSON)
  • Geef het resultaat weer dat is ontvangen van het PHP-bestand.

Kijk eens naar het PHP-bestand:

PHP-bestand

<?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-bestand uitgelegd:

  • Converteer het verzoek naar een object met behulp van de PHP-functie json_decode() .
  • Open de database en vul een array met de gevraagde gegevens.
  • Voeg de array toe aan een object en retourneer het object als JSON met behulp van de functie json_encode() .

Gebruik de gegevens

Voorbeeld

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

Bij het verzenden van gegevens naar de server is het vaak het beste om de HTTP- POSTmethode te gebruiken.

Om AJAX-verzoeken te verzenden met behulp van de POSTmethode, geeft u de methode en de juiste koptekst op.

De gegevens die naar de server worden verzonden, moeten nu een argument zijn voor de send()methode:

Voorbeeld

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

Het enige verschil in het PHP-bestand is de methode om de overgedragen gegevens op te halen.

PHP-bestand

Gebruik $_POST in plaats van $_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);
?>