Samouczek JS

JS DOM Wprowadzenie do JS JS Dokąd Wyjście JS Oświadczenia JS Składnia JS Komentarze JS Zmienne JS JS Let JS Const Operatorzy JS Arytmetyka JS Zadanie JS Typy danych JS Funkcje JS Obiekty JS Wydarzenia JS JS Strings Metody ciągów JS Wyszukiwanie ciągów JS Szablony JS String Numery JS Metody liczbowe JS Tablice JS Metody macierzowe JS Sortowanie tablic JS Iteracja tablicy JS JS Array Const JS Daty Formaty daty JS JS Data Pobierz metody Metody ustawiania daty JS Matematyka JS JS losowo JS Booleans Porównania JS Warunki JS Przełącznik JS Pętla JS dla Pętla JS dla In Pętla JS dla Of Pętla JS, podczas gdy Przerwa JS Iterable JS Zestawy JS Mapy JS Typ JS Konwersja typu JS JS Bitwise JS RegExp Błędy JS Zakres JS JS Podnoszenie Tryb ścisły JS JS to słowo kluczowe Funkcja strzałki JS Klasy JS JS JSON Debugowanie JS Przewodnik po stylu JS Najlepsze praktyki JS Błędy JS Wydajność JS JS słowa zastrzeżone

Wersje JS

Wersje JS JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Krawędź Historia JS

Obiekty JS

Definicje obiektów Właściwości obiektu Metody obiektowe Wyświetlanie obiektów Akcesoria do obiektów Konstruktorzy obiektów Prototypy obiektów Iterowalne obiekty Zestawy obiektów Mapy obiektów Odniesienie do obiektu

Funkcje JS

Definicje funkcji Parametry funkcji Wywołanie funkcji Wywołanie funkcji Funkcja Zastosuj Zamknięcia funkcji

Klasy JS

Wprowadzenie do zajęć Dziedziczenie klas Klasa statyczna

JS Async

Oddzwaniania JS Asynchroniczny JS JS Obietnice JS Async/Oczekiwanie

JS HTML DOM

Wprowadzenie do DOM Metody DOM Dokument DOM Elementy DOM DOM HTML Formularze DOM DOM CSS Animacje DOM Wydarzenia DOM Odbiornik zdarzeń DOM Nawigacja DOM Węzły DOM Kolekcje DOM Listy węzłów DOM

Zestawienie komponentów przeglądarki JS

Okno JS Ekran JS Lokalizacja JS Historia JS JS Navigator Wyskakujący alert JS Czas JS Pliki cookie JS

JS Web API

Wprowadzenie do internetowego interfejsu API Interfejs API formularzy internetowych Interfejs API historii online API przechowywania danych w sieci Web Web Worker API Internetowy interfejs API pobierania Internetowy interfejs API geolokalizacji

JS AJAX

Wprowadzenie do AJAX AJAX XMLHttp Żądanie AJAX Odpowiedź AJAX Plik XML AJAX AJAX PHP ASP AJAX Baza danych AJAX Aplikacje AJAX Przykłady AJAX

JS JSON

Wprowadzenie do JSON Składnia JSON JSON a XML Typy danych JSON Analiza JSON JSON Obiekty JSON Tablice JSON Serwer JSON JSON PHP JSON HTML JSON JSONP

JS kontra jQuery

Selektory jQuery jQuery HTML jQuery CSS jQuery DOM

Grafika JS

Grafika JS JS płótno JS Działka JS Chart.js Wykres JS Google JS D3.js

Przykłady JS

Przykłady JS JS HTML DOM Wejście JS HTML Obiekty HTML JS Wydarzenia JS HTML Przeglądarka JS Edytor JS Ćwiczenia JS JS Quiz Certyfikat JS

Referencje JS

Obiekty JavaScript Obiekty HTML DOM


JSON PHP


Powszechnym zastosowaniem JSON jest odczytywanie danych z serwera WWW i wyświetlanie danych na stronie internetowej.

W tym rozdziale dowiesz się, jak wymieniać dane JSON między klientem a serwerem PHP.


Plik PHP

PHP ma kilka wbudowanych funkcji do obsługi JSON.

Obiekty w PHP można przekonwertować na JSON za pomocą funkcji PHP json_encode() :

plik PHP

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

$myJSON = json_encode($myObj);

echo $myJSON;
?>

Klient JavaScript

Oto JavaScript na kliencie, używający wywołania AJAX do żądania pliku PHP z powyższego przykładu:

Przykład

Użyj JSON.parse(), aby przekonwertować wynik na obiekt 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();


Tablica PHP

Tablice w PHP zostaną również przekonwertowane na JSON podczas korzystania z funkcji PHP json_encode() :

plik PHP

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

$myJSON = json_encode($myArr);

echo $myJSON;
?>

Klient JavaScript

Oto JavaScript na kliencie, używający wywołania AJAX do żądania pliku PHP z powyższego przykładu tablicy:

Przykład

Użyj JSON.parse(), aby przekonwertować wynik na tablicę 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();

Baza danych PHP

PHP jest językiem programowania po stronie serwera i może być używany do uzyskiwania dostępu do bazy danych.

Wyobraź sobie, że masz bazę danych na swoim serwerze i chcesz wysłać do niej żądanie od klienta, w którym prosisz o 10 pierwszych wierszy w tabeli o nazwie „klienci”.

Na kliencie utwórz obiekt JSON opisujący liczbę wierszy, które chcesz zwrócić.

Zanim wyślesz żądanie do serwera, przekonwertuj obiekt JSON na ciąg znaków i wyślij go jako parametr do url strony PHP:

Przykład

Użyj JSON.stringify(), aby przekonwertować obiekt JavaScript 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();

Przykład wyjaśniony:

  • Zdefiniuj obiekt zawierający właściwość i wartość „limit”.
  • Przekonwertuj obiekt na ciąg JSON.
  • Wyślij żądanie do pliku PHP z ciągiem JSON jako parametrem.
  • Poczekaj, aż żądanie wróci z wynikiem (jako JSON)
  • Wyświetl wynik otrzymany z pliku PHP.

Spójrz na plik PHP:

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

Wyjaśnienie pliku PHP:

  • Przekształć żądanie w obiekt za pomocą funkcji PHP json_decode() .
  • Uzyskaj dostęp do bazy danych i wypełnij tablicę żądanymi danymi.
  • Dodaj tablicę do obiektu i zwróć obiekt w formacie JSON za pomocą funkcji json_encode() .

Użyj danych

Przykład

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

Wysyłając dane na serwer często najlepiej jest skorzystać z POSTmetody HTTP.

Aby wysyłać żądania AJAX przy użyciu POSTmetody, określ metodę i poprawny nagłówek.

Dane wysyłane do serwera muszą być teraz argumentem send()metody:

Przykład

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

Jedyną różnicą w pliku PHP jest metoda pobierania przesłanych danych.

plik PHP

Użyj $_POST zamiast $_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);
?>