JSON PHP

Tartalomjegyzék

A JSON gyakori használata a webszerverről származó adatok beolvasása, és megjeleníti az adatokat egy weboldalon.

Ez a fejezet megtanítja, hogyan cserélhet JSON-adatokat között a kliens és egy PHP szerver.

A PHP fájl

A PHP rendelkezik néhány beépített funkcióval a JSON kezelésére.

A PHP-ben lévő objektumok a PHP függvény használatával konvertálhatók JSON-ba json_encode():

PHP fájl

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

Az ügyfél JavaScript

Itt van egy JavaScript az ügyfélen, amely AJAX hívást használ a PHP kérésére fájl a fenti példából:

Példa

A JSON.parse() segítségével konvertálja az eredményt JavaScript objektummá:

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óbálja ki Ön is →

<!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 tömb

A PHP-ben lévő tömbök szintén JSON-ba konvertálódnak a PHP függvény használatakor json_encode():

PHP fájl

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

Az ügyfél JavaScript

Itt van egy JavaScript az ügyfélen, amely AJAX hívást használ a PHP kérésére fájl a fenti tömbpéldából:

Példa

A JSON.parse() segítségével konvertálja az eredményt JavaScript tömbbé:

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óbálja ki Ön is →

<!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 adatbázis

A PHP egy szerveroldali programozási nyelv, és adatbázisokhoz való hozzáférésre használható.

Képzelje el, hogy van egy adatbázis a szerverén, és kérést szeretne küldeni a címre azt a klienstől, ahol a táblában az első 10 sort kéred "vevők".

Az ügyfélen hozzon létre egy JSON-objektumot, amely leírja a visszaadni kívánt sorok számát.

Mielőtt elküldi a kérést a kiszolgálónak, alakítsa át a JSON-objektumot a karakterláncot, és paraméterként küldje el a PHP oldal URL-jére:

Példa

A JSON.stringify() segítségével konvertálja a JavaScript objektumot JSON-ba:

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óbálja ki Ön is →

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

Példa magyarázata:

Határozzon meg egy "limit" tulajdonságot és értéket tartalmazó objektumot.
Alakítsa át az objektumot JSON-karakterláncsá.
Küldjön kérést a PHP-fájlba, paraméterként a JSON-karakterláncot megadva.
Várja meg, amíg a kérés az eredménnyel visszatér (JSON-ként)
Jelenítse meg a PHP fájlból kapott eredményt.

Vessen egy pillantást a PHP fájlra:

PHP fájl

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

A PHP fájl magyarázata:

Konvertálja a kérést objektummá a PHP függvény segítségével json_decode().
Lépjen be az adatbázisba, és töltsön ki egy tömböt a kért adatokkal.
Adja hozzá a tömböt egy objektumhoz, és adja vissza az objektumot JSON-ként a használatával a json_encode() függvényt.

Használja az Adatokat

Példa

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óbálja ki Ön is →

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

Amikor adatokat küld a szervernek, gyakran a legjobb a HTTP POST metódus használata.

Ha AJAX kéréseket szeretne küldeni a POST metódussal, adja meg a metódust és a megfelelő fejlécet.

A szervernek küldött adatoknak most a send() metódus argumentumának kell lenniük:

Példa

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óbálja ki Ön is →

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

Az egyetlen különbség a PHP fájlban az átvitt adatok lekérésének módja.

PHP fájl

$_POST használata a $_GET helyett:

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