JSON PHP

Indholdsfortegnelse

En almindelig brug af JSON er at læse data fra en webserver, og vise dataene på en webside.

Dette kapitel vil lære dig, hvordan du udveksler JSON-data mellem klienten og en PHP-server.

PHP-filen

PHP har nogle indbyggede funktioner til at håndtere JSON.

Objekter i PHP kan konverteres til JSON ved at bruge PHP-funktionen json_encode():

PHP fil

 <?php
$myObj->name = "John";
$myObj->age = 30;
$myObj->city = "New 
  York";
$myJSON = json_encode($myObj);
echo $myJSON;
?>

Klientens JavaScript

Her er et JavaScript på klienten, der bruger et AJAX-kald til at anmode om PHP fil fra eksemplet ovenfor:

Eksempel

Brug JSON.parse() til at konvertere resultatet til et JavaScript-objekt:

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

Prøv det selv →

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

PHP Array

Arrays i PHP vil også blive konverteret til JSON, når du bruger PHP-funktionen json_encode():

PHP fil

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

Klientens JavaScript

Her er et JavaScript på klienten, der bruger et AJAX-kald til at anmode om PHP fil fra array-eksemplet ovenfor:

Eksempel

Brug JSON.parse() til at konvertere resultatet til et 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();

Prøv det selv →

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

PHP er et programmeringssprog på serversiden og kan bruges til at få adgang til en database.

Forestil dig, at du har en database på din server, og du vil sende en anmodning til det fra klienten, hvor du beder om de 10 første rækker i en tabel kaldet "kunder".

På klienten skal du lave et JSON-objekt, der beskriver antallet af rækker, du vil returnere.

Inden du sender anmodningen til serveren, skal du konvertere JSON-objektet til en streng og send den som en parameter til url'en på PHP-siden:

Eksempel

Brug JSON.stringify() til at konvertere JavaScript-objektet til 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();

Prøv det selv →

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

Eksempel forklaret:

Definer et objekt, der indeholder en "grænse" egenskab og værdi.
Konverter objektet til en JSON-streng.
Send en anmodning til PHP-filen med JSON-strengen som parameter.
Vent, indtil anmodningen vender tilbage med resultatet (som JSON)
Vis resultatet modtaget fra PHP-filen.

Tag et kig på PHP-filen:

PHP fil

 <?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-fil forklaret:

Konverter anmodningen til et objekt ved hjælp af PHP-funktionen json_decode().
Få adgang til databasen, og fyld et array med de ønskede data.
Tilføj arrayet til et objekt, og returner objektet som JSON vha funktionen json_encode().

Brug dataene

Eksempel

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

Prøv det selv →

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

PHP-metode=POST

Når du sender data til serveren, er det ofte bedst at bruge HTTP POST metoden.

For at sende AJAX-anmodninger ved hjælp af POST-metoden skal du angive metoden og den korrekte overskrift.

Dataene sendt til serveren skal nu være et argument til send() metoden:

Eksempel

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

Prøv det selv →

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

Den eneste forskel i PHP-filen er metoden til at få de overførte data.

PHP fil

Brug $_POST i stedet for $_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);
?>