JSON PHP


Innehållsförteckning

    Visa innehållsförteckning


En vanlig användning av JSON är att läsa data från en webbserver, och visa data på en webbsida.

Det här kapitlet kommer att lära dig hur du utbyter JSON-data mellan klienten och en PHP-server.


PHP-filen

PHP har några inbyggda funktioner för att hantera JSON.

Objekt i PHP kan konverteras till JSON genom att använda 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

Här är ett JavaScript på klienten som använder ett AJAX-anrop för att begära PHP fil från exemplet ovan:

Exempel

Använd JSON.parse() för att konvertera resultatet till ett 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();

Prova själv →

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

Arrayer i PHP kommer också att konverteras till JSON när du använder PHP-funktionen json_encode():

PHP-fil

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

Klientens JavaScript

Här är ett JavaScript på klienten som använder ett AJAX-anrop för att begära PHP fil från arrayexemplet ovan:

Exempel

Använd JSON.parse() för att konvertera resultatet till en 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();

Prova själv →

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

PHP är ett programmeringsspråk på serversidan och kan användas för att komma åt en databas.

Föreställ dig att du har en databas på din server och du vill skicka en förfrågan till det från klienten där du frågar efter de 10 första raderna i en tabell som heter "kunder".

På klienten gör du ett JSON-objekt som beskriver antalet rader du vill returnera.

Innan du skickar begäran till servern, konvertera JSON-objektet till ett sträng och skicka den som en parameter till webbadressen till PHP-sidan:

Exempel

Använd JSON.stringify() för att konvertera JavaScript-objektet till 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();

Prova själv →

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

Exempel förklarat:

  • Definiera ett objekt som innehåller en "limit"-egenskap och ett värde.

  • Konvertera objektet till en JSON-sträng.

  • Skicka en begäran till PHP-filen, med JSON-strängen som parameter.

  • Vänta tills begäran kommer tillbaka med resultatet (som JSON)

  • Visa resultatet från PHP-filen.

Ta en titt 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 förklaras:

  • Konvertera begäran till ett objekt med PHP-funktionen json_decode().

  • Gå till databasen och fyll en array med de begärda uppgifterna.

  • Lägg till arrayen till ett objekt och returnera objektet som JSON med hjälp av funktionen json_encode().


Använd data

Exempel

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

Prova själv →

<!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-metod=POST

När du skickar data till servern är det ofta bäst att använda HTTP-metoden POST.

För att skicka AJAX-förfrågningar med POST-metoden, ange metoden och rätt rubrik.

Data som skickas till servern måste nu vara ett argument för metoden send():

Exempel

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

Prova själv →

<!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 enda skillnaden i PHP-filen är metoden för att hämta de överförda data.

PHP-fil

Använd $_POST istället för $_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);
?>