Как получить значение переменной из PHP с помощью Ajax

Для осуществления этого надо выполнить два шага:

  1. Написать PHP-скрипт, который будет выводить в выходной поток значение переменной. В случае, если это составная переменная наподобие массива, состоящая из многих значений, то можно перед выводом преобразовать ее в формат JSON.

  2. Написать клиентскую часть, которая будет отправлять запрос на сервер к этому скрипту, используя технологию AJAX, получать от него текст со значением переменной и преобразовывать его к нужному типу. Если для передачи был использован формат JSON, то надо ещё и декодировать полученный текст из этого формата, преобразовав его обратно в значение.

PHP-скрипт может выглядеть так:

<?php

$ar=[1,2,3];

$str='Передаваемая строка';

$i=3;

switch($_GET['dataType'])

{

case 'array':

echo(json_encode($ar));

break;

case 'string':

echo($str);

break;

case 'integer':

echo($i);

break;

}

Он принимает GET-параметр под названием “dataType”. В зависимости от значения этого параметра скрипт отдает значение одной из трех переменных, которые представляют собой массив, строку и целое число. При передаче массива выполняется его преобразование в формат JSON. Составные типы данных, такие как массивы и объекты, удобно передавать в этом формате. При передаче строки и целого числа они просто выводятся в выходной поток.

Клиентская часть является веб-страницей и может быть такой:

<html>

<head>

<script src="jquery.js"></script>

<script>

function loadArray()

{

$.ajax({

url: "send.php?dataType=array",

}).done(function( data ) {

let value=JSON.parse(data);

alert(value);

});

}

function loadString()

{

$.ajax({

url: "send.php?dataType=string",

}).done(function( data ) {

alert(data);

});

}

function loadInteger()

{

$.ajax({

url: "send.php?dataType=integer",

}).done(function( data ) {

let intValue=parseInt(data);

alert(intValue);

});

}

</script>

</head>

<body>

<button onclick="loadArray();">Получить массив</button>

<button onclick="loadString();">Получить строку</button>

<button onclick="loadInteger();">Получить целое число</button>

</body>

</html>

Строка <script src="jquery.js"></script> подключает библиотеку JQuery для упрощения использования Ajax.

Далее тут находятся 3 функции - loadArray, loadString и loadInteger. Все они выполняют Ajax-запрос к приведенному выше PHP-файлу с различным параметром dataType. Еще они отличаются тем, что после получения массива выполняется его раскодирование из формата JSON с помощью функции JSON.parse, при получении строки она просто выводится в окошке, а преобразование из строки к целому числу выполняется с помощью функции parseInt, хоть это и не имеет принципиального значения в данном случае.


Внутри тега body находятся 3 кнопки, щелчки по которым запускают соответствующие функции.


Стоит учесть, что для корректной работы этот PHP-скрипт и web-страница должны находиться в одной и той же папке, причем на сервере, можно на локальном сервере и виртуальном домене.


Комментарии

Популярные сообщения из этого блога

Почему не работает header('Location: site.com') в PHP-скрипте