Výukový program JS

JS HOME Úvod do JS JS Kam vést Výstup JS JS prohlášení Syntaxe JS Komentáře JS JS proměnné JS Let JS Const Operátoři JS JS aritmetika Zadání JS JS datové typy Funkce JS JS objekty Události JS JS struny JS String Methods JS String Search Šablony řetězců JS JS čísla Metody čísel JS JS Arrays Metody JS Array JS Array Sort Iterace pole JS JS Array Const JS Termíny Formáty data JS JS metody získávání data JS metody nastavení data JS Math JS Náhodný JS Booleans JS Srovnání Podmínky JS Přepínač JS JS Loop For JS Loop For In JS Loop For Of Zatímco JS Loop JS Break JS Iterables Sady JS Mapy JS Typ JS Konverze typu JS JS Bitwise JS RegExp Chyby JS Rozsah JS JS Zvedací zařízení Přísný režim JS JS toto klíčové slovo Funkce šipky JS JS třídy JS JSON Ladění JS Průvodce stylem JS JS Best Practices Chyby JS Výkon JS JS Reserved Words

Verze JS

Verze JS JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge Historie JS

JS objekty

Definice objektů Vlastnosti objektu Objektové metody Zobrazení objektu Objektové přístupové objekty Konstruktory objektů Prototypy objektů Iterovatelné objekty Sady objektů Mapy objektů Reference objektu

Funkce JS

Definice funkcí Funkční parametry Vyvolání funkce Volání funkce Funkce Použít Funkční uzávěry

JS třídy

Úvod do třídy Třídní dědičnost Třída Statická

JS Async

JS zpětná volání JS asynchronní JS Sliby JS Async/Await

JS HTML DOM

Úvod do DOM Metody DOM Dokument DOM Prvky DOM DOM HTML Formuláře DOM DOM CSS DOM animace Události DOM DOM Event Listener Navigace DOM DOM uzly Kolekce DOM Seznamy uzlů DOM

Kusovník prohlížeče JS

Okno JS Obrazovka JS Umístění JS Historie JS JS Navigator Popup Alert JS Časování JS Soubory cookie JS

Webová rozhraní API JS

Úvod do webového rozhraní API Web Forms API Webová historie API Web Storage API Web Worker API Web Fetch API Web Geolocation API

JS AJAX

Úvod do AJAXu AJAX XMLHttp Požadavek AJAX Odpověď AJAX Soubor XML AJAX AJAX PHP AJAX ASP Databáze AJAX Aplikace AJAX Příklady AJAX

JS JSON

Úvod do JSON Syntaxe JSON JSON vs XML Datové typy JSON Analýza JSON JSON Stringify Objekty JSON Pole JSON Server JSON JSON PHP JSON HTML JSON JSONP

JS vs jQuery

Selektory jQuery HTML jQuery jQuery CSS jQuery DOM

Grafika JS

Grafika JS JS Canvas JS Plotly JS Chart.js JS Google Chart JS D3.js

Příklady JS

Příklady JS JS HTML DOM Vstup HTML JS JS HTML objekty JS HTML události Prohlížeč JS Editor JS Cvičení JS JS kvíz Certifikát JS

JS Reference

Objekty JavaScriptu HTML DOM objekty


JSON PHP


Běžným použitím JSON je čtení dat z webového serveru a zobrazení dat na webové stránce.

Tato kapitola vás naučí, jak vyměňovat data JSON mezi klientem a serverem PHP.


Soubor PHP

PHP má některé vestavěné funkce pro zpracování JSON.

Objekty v PHP lze převést na JSON pomocí funkce PHP json_encode() :

soubor PHP

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

$myJSON = json_encode($myObj);

echo $myJSON;
?>

JavaScript klienta

Zde je JavaScript na klientovi pomocí volání AJAX k vyžádání souboru PHP z výše uvedeného příkladu:

Příklad

Pomocí JSON.parse() převeďte výsledek na objekt JavaScript:

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


Pole PHP

Pole v PHP budou také převedeny na JSON při použití funkce PHP json_encode() :

soubor PHP

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

$myJSON = json_encode($myArr);

echo $myJSON;
?>

JavaScript klienta

Zde je JavaScript na klientovi pomocí volání AJAX k vyžádání souboru PHP z výše uvedeného příkladu pole:

Příklad

Pomocí JSON.parse() převeďte výsledek do pole JavaScript:

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

Databáze PHP

PHP je programovací jazyk na straně serveru a lze jej použít pro přístup k databázi.

Představte si, že máte na serveru databázi a chcete do ní odeslat požadavek od klienta, kde požadujete prvních 10 řádků v tabulce s názvem „zákazníci“.

Na klientovi vytvořte objekt JSON, který popisuje počty řádků, které chcete vrátit.

Před odesláním požadavku na server převeďte objekt JSON na řetězec a odešlete jej jako parametr na adresu URL stránky PHP:

Příklad

Pomocí JSON.stringify() převeďte objekt JavaScriptu na 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();

Vysvětlený příklad:

  • Definujte objekt obsahující vlastnost a hodnotu "limit".
  • Převeďte objekt na řetězec JSON.
  • Odešlete požadavek do souboru PHP s řetězcem JSON jako parametrem.
  • Počkejte, až se požadavek vrátí s výsledkem (jako JSON)
  • Zobrazte výsledek přijatý ze souboru PHP.

Podívejte se na soubor PHP:

soubor PHP

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

Vysvětlení souboru PHP:

  • Převeďte požadavek na objekt pomocí funkce PHP json_decode() .
  • Vstupte do databáze a vyplňte pole požadovanými údaji.
  • Přidejte pole do objektu a vraťte objekt jako JSON pomocí funkce json_encode() .

Použijte Data

Příklad

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

Metoda PHP = POST

Při odesílání dat na server je často nejlepší použít POSTmetodu HTTP.

Chcete-li odesílat požadavky AJAX pomocí POSTmetody, zadejte metodu a správné záhlaví.

Data odeslaná na server musí být nyní argumentem send()metody:

Příklad

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

Jediný rozdíl v souboru PHP je způsob získávání přenesených dat.

soubor PHP

Použijte $_POST místo $_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);
?>