Verification: a143cc29221c9be0

Php and ajax json примеры

Файл PHP

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

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

PHP Файл

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

$myJSON = json_encode($myObj);

echo $myJSON;
?>

Показать файл PHP »

Клиентский JavaScript

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

Пример

Используйте JSON.parse() для преобразования результата в объект JavaScript:

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 json_encode():

PHP Файл

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

$myJSON = json_encode($myArr);

echo $myJSON;
?>

Показать файл PHP »

Клиентский JavaScript

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

Пример

Используйте JSON.parse(), чтобы преобразовать результат в массив JavaScript:

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 строк в таблице под названием "клиенты".

На клиенте создайте объект JSON, который описывает количество строк, которые вы хотите вернуть.

Прежде чем отправлять запрос на сервер, преобразуйте объект JSON в строку и отправьте его в качестве параметра на URL адрес страницы PHP:

Пример

Используйте JSON.stringify() для преобразования объекта JavaScript в JSON:

obj = { "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();

Попробуйте сами »

Объяснение примера:

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

Взгляните на файл 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);
?>

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

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

Цикл через результат

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

Пример

Используйте JSON.parse() для преобразования JSON в объект JavaScript:

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

Попробуйте сами »


Получение и вывод JSON-данных

В качестве источника JSON-данных будем использовать сайт jsonplaceholder.typicode.com с данными users.

Директива x-dataуказывает на то, что это компонент Alpine. Мы сразу инициализируем переменную users, которая будет массивом/объектом полученных данных.

Если перейти по указанному адресу, то увидим обычные JSON-данные одного пользователя. Поэтому отображение результата будет происходить в SPAN с директивами x-text. В одном тэге это имя юзера, в другом его email.

Получение данных «вешаем» на click кнопки: прописываем получение данных через fetch(). Здесь происходит get-запрос по указанному URL и данные в формате JSON присваиваются нашей переменной users. В целом это достаточно типовой вариант работы с fetch().

Если данные представляют собой многомерный массив, то для его вывода нужно использовать директиву x-for.

Тут всё практически тоже самое, только по новому адресу получается не один элемент, а множество. Директива для вывода в цикле x-forв Alpine применяется только к тэгу TEMPLATE (как принято с web-компонентами).

Отправка произвольных данных по AJAX

Теперь рассмотрим вариант, если нужно сформировать произвольный Ajax-запрос без создания html-формы. Отправлять post-запрос мы будем уже на свой адрес, а ответ получать в виде текста/html.

Обработчик ajax-запроса представляет собой очень простую страницу. Если вы используете Albireo, то можете сделать такой файл:

Привет!';
 
pr($_POST); // вывод входящего POST

Адрес (slug) можно указать другой. Он указывается в fetch-запросе.

Теперь код примера:

Первое отличие — адрес fetch-запроса. Второе — дополнительные параметры. В данном случае это method, headersи body. Заголовок мы отправляем для того, чтобы в php-обработчике определить, что это именно Ajax-запрос.

Если нужен обычный POST, то этот заголовок можно не указывать и не отслеживать в обработчике.

Тело запроса формируем его из нового объекта FormData. Сейчас в основном именно так и делают вместо обработки данных. Поле _methodнужно для роутинга Albireo (описание и примеры есть в документации). То есть данные для отправки формируются динамически. При желании можно привязать те же поля ввода.

Поскольку ответ — это обычный текст с разметкой HTML, то используем директиву x-html. Если же использовать x-text, то ответ мы увидим в виде обычного текста.

Отправка формы через Ajax

Обычную форму можно отправить похожим образом.

sample1', { method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest', }, body: new FormData($refs.form) }) .then(response => response.text()) .then(response => textData = response); return false; ">

Это самая обычная форма, где мы ловим событие submit. Обратите внимание, что функция возвращает false— это нужно для того, чтобы блокировать обычную отправку данных.

Данные мы формируем через FormData, как и в прошлый раз, только в качестве источника указываем текущую форму. Это $refs.form.

Переменная $refsв Alpine особая («магическая»), которая хранит DOM-элементы. В данном случае это form, который мы указали у самой формы в виде директивы x-ref.

С помощью x-refи $refsв Alpine реализуется получение любого элемента. Если бы мы делали этот пример на нативном JavaScript, то использовали бы getElementById()или querySelector(), чтобы получить доступ к данным формы.

Клиент

Клиентская часть OpenCart работает с использованием jquery, а значит можно использовать $.ajax из этой библиотеки. Ссылка на документацию. Примеры ajax запросов на клиентской части можно посмотреть в admin/view/template/sale/order_form.tpl (.twig для OpenCart 3.0).

Сервер

Просматривая все тот же файл admin/view/template/sale/order_form.tpl (для OpenCart 2.3) можно понять, что в качестве адреса вызова используется классическая схема роутинга OpenCart. Посмотрим на один из запросов:

$.ajax({
    url: 'index.php?route=customer/customer/autocomplete&token=&filter_name=' +  encodeURIComponent(request),
    ...

Все просто: url - путь до контроллера и, если надо, имя метода этого контроллера.

То есть, нам нужно создать класс контроллера, затем из файлов представления можно вызывать методы этого контроллера ajax запросами.

Создадим контроллер нашего нового тестового модуля по пути admin/controller/extension/module/myajax.php:

class ControllerExtensionModuleMyAjax extends Controller
{
    public function index()
    {
        $this->response->addHeader('Content-Type: application/json');
        $this->response->setOutput(json_encode(
            [
                "success" => true, 
                "message" => "ok", 
                "data" => []
            ]
        ));
    }
}

В классе контроллера есть объект response, это экземпляр класса Response , который расположен по пути system/library/response.php. Он позволяет управлять ответом сервера. Нас интересуют только 2 метода:

  • addHeader($header) - добавить http заголовок, header строковый аргумент

  • setOutput($output) - установить данные для вывода, output строковый аргумент

Для формирования ответа на запрос в методе контроллера можно использовать -

$this->response

Так как OpenCart имеет 2 режима доступа/контекста (admin, catalog), то передаваемые данные в запросах разные:

  • admin - требует токен в get параметре (получить можно из объекта класса контроллера):

    • для OpenCart 2.3 token, который берется из $this->session->data['token']

    • для OpenCart 3.0 ¨C4C, который берется из¨C14C¨C5C

  • catalog - в общем случае не требует токена, но есть нюансы о которых позже

Теперь чтобы осуществить ajax запрос достаточно в файл представления (читай в html) подставить js (код для OpenCart 2.3):

$.ajax({
    url: 'index.php?route=extesion/module/myajax&token=',
    type: 'get',
    dataType: 'json',
    success: function(json) {
        alert("success: "+json["success"]+"\n"+"message: "+json["message"]);
    },
    error: function(xhr, ajaxOptions, thrownError) {
        alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
    }
});

В этом коде в url admin это путь указывающий контекст запроса (admin или catalog). Для контекста есть 2 дефайна, определенных в admin/config:

  • HTTP_SERVER или HTTPS_SERVER - путь до директории admin (проще - админка), где будет осуществлен поиск контроллера для выполнения запроса

  • HTTP_CATALOG или ¨C6C¨C15C- корень сайта, однако контроллеры будут браться из директории¨C16C¨C7C