ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

JavaScript учебник

JS HOME JS Introduction JS Where To JS Output JS Statements JS Syntax JS Comments JS Variables JS Operators JS Arithmetic JS Assignment JS Data Types JS Functions JS Objects JS Scope JS Events JS Strings JS String Methods JS Numbers JS Number Methods JS Arrays JS Array Methods JS Array Sort JS Array Iteration JS Dates JS Date Formats JS Date Get Methods JS Date Set Methods JS Math JS Random JS Booleans JS Comparisons JS Conditions JS Switch JS Loop For JS Loop While JS Break JS Type Conversion JS Bitwise JS RegExp JS Errors JS Debugging JS Hoisting JS Strict Mode JS this Keyword JS Style Guide JS Best Practices JS Mistakes JS Performance JS Reserved Words JS Versions JS Version ES5 JS Version ES6 JS JSON

JS Forms

JS Forms Forms API

JS Objects

Object Definitions Object Properties Object Methods Object Constructors Object Prototypes

JS Functions

Function Definitions Function Parameters Function Invocation Function Call Function Apply Function Closures

JS HTML DOM

DOM Intro DOM Methods DOM Document DOM Elements DOM HTML DOM CSS DOM Animations DOM Events DOM Event Listener DOM Navigation DOM Nodes DOM Collections DOM Node Lists

JS Browser BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS AJAX

AJAX Intro AJAX XMLHttp AJAX Request AJAX Response AJAX XML File AJAX PHP AJAX ASP AJAX Database AJAX Applications

JS JSON

JSON Intro JSON Syntax JSON vs XML JSON Data Types JSON Objects JSON Arrays JSON Parse JSON Stringify JSON PHP JSON HTML JSON JSONP

JS References

JavaScript Objects HTML DOM Objects


JSON PHP


Обычно JSON используется для считывания данных с веб-сервера и отображения данных на веб-странице.

В этой главе вы научитесь обмениваться данными JSON между клиентом и сервером PHP.


Файл PHP

PHP имеет некоторые встроенные функции для обработки JSON.

Объекты в PHP могут быть преобразованы в JSON с помощью функции PHP жсон_енкоде ():

PHP файл

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

$myJSON = json_encode($myObj);

echo $myJSON;
?>
Show PHP file »

Клиент JavaScript

Вот JavaScript на клиенте, используя AJAX-вызов для запроса PHP-файла из приведенного выше примера:

Пример

Use JSON.parse() to convert the result into a JavaScript object:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myObj = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myObj.name;
    }
};
xmlhttp.open("GET", "demo_file.php", true);
xmlhttp.send();


Массив PHP

Массивы в PHP также будут преобразованы в JSON при использовании функции PHP жсон_енкоде ():

PHP файл

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

$myJSON = json_encode($myArr);

echo $myJSON;
?>
Show PHP file »

Клиент JavaScript

Вот JavaScript на клиенте, используя AJAX-вызов для запроса PHP-файла из приведенного выше примера массива:

Пример

Use JSON.parse() to convert the result into a JavaScript array:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myObj = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myObj[2];
    }
};
xmlhttp.open("GET", "demo_file_array.php", true);
xmlhttp.send();

База данных PHP

PHP является языком программирования на стороне сервера и должен использоваться для операций, которые могут выполняться только сервером, например, для доступа к базе данных.

Представьте, что у вас есть база данных на сервере, содержащая клиентов, продукты и поставщиков.

Вы хотите сделать запрос на сервер, где вы просите первые 10 записей в таблице "Customers":

Пример

Use JSON.stringify() to convert the JavaScript object into JSON:

obj = { "table":"customers", "limit":10 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        document.getElementById("demo").innerHTML = this.responseText;
    }
};
xmlhttp.open("GET", "json_demo_db.php?x=" + dbParam, true);
xmlhttp.send();

Пример объяснил:

  • Определите объект, содержащий свойство Table и свойство Limit.
  • Преобразовать объект в строку JSON.
  • Отправьте запрос в PHP-файл со строкой JSON в качестве параметра.
  • Подождите, пока запрос вернется с результатом (как JSON)
  • Отображение результата, полученного из файла PHP.

Взгляните на PHP файл:

PHP файл

<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_GET["x"], false);

$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$result = $conn->query("SELECT name FROM ".$obj->table." LIMIT ".$obj->limit);
$outp = array();
$outp = $result->fetch_all(MYSQLI_ASSOC);

echo json_encode($outp);
?>

PHP файл объяснил:

  • Преобразовать запрос в объект с помощью функции PHP жсон_декоде ().
  • Доступ к базе данных и заполнить массив с запрошенными данными.
  • Добавьте массив в объект и верните объект как JSON с помощью функции жсон_енкоде () .

Циклический перебор результата

Преобразовать результат, полученный из PHP-файла, в объект JavaScript или, в данном случае, в массив JavaScript:

Пример

Use JSON.parse() to convert the JSON into a JavaScript object:

...
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        for (x in myObj) {
            txt += myObj[x].name + "<br>";
        }
        document.getElementById("demo").innerHTML = txt;
    }
};
...

Метод PHP = POST

При отправке данных на сервер часто рекомендуется использовать метод POST HTTP.

Чтобы отправить Ajax-запросы с помощью метода POST, укажите метод и правильный заголовок.

Данные, отправляемые на сервер, теперь должны быть аргументом метода. Send ():

Пример

obj = { "table":"customers", "limit":10 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        for (x in myObj) {
            txt += myObj[x].name + "<br>";
        }
        document.getElementById("demo").innerHTML = txt;
    }
};
xmlhttp.open("POST", "json_demo_db_post.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);

Единственной разницей в PHP-файле является метод получения передаваемых данных.

PHP файл

Use $_POST instead of $_GET:

<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_POST["x"], false);

$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$result = $conn->query("SELECT name FROM ".$obj->table." LIMIT ".$obj->limit);
$outp = array();
$outp = $result->fetch_all(MYSQLI_ASSOC);

echo json_encode($outp);
?>