Как по запросу на сервер вернуть значение ячейки массива?

Question

[Дмитрий Смыков]

Допустим на сервере есть массив, в котором 10 ячеек с каким-либо содержимым.
Как сделать запрос через JS к серверу, чтобы тот рандомно выбрал ячейку и вернул ее содержимое? Ну или просто на JS выбрано рандомное число от 0 до 10, как отправить на сервер это число, чтобы сервер вернул содержимое ячейки под номером, который послал JS?

Answer 1

[Артем]

Ну вы же даже тег нужный поставили.
Это делается Ajax запросом. Вы хотите код? Он же примитивен
https://learn.javascript.ru/fetch - нативно
https://www.w3schools.com/jquery/ajax_ajax.asp - jquery

Comments

[Дмитрий Смыков]

Да я понимаю, что это через Ajax работает, но я пока еще не силен в ни в нем, ни в PHP. Я хотел бы увидеть пример запроса на сервер с нативного JS в котором можно прописать необходимые аргументы (название массива, номер его ячейки), по примеру понять логику процесса и уже дальше работать. На JQuery я понял в чем смысл и как делать, а вот на нативном сложно. JQuery вплетать не хочется ради реализации одного запроса.

[Артем]

Js:

fetch('/index.php')
  .then(function(response) {
       alert(response);
   })
  .catch( alert );

Обработчик:

$data = [1,2,3,4,5]
echo array_rand($data);

[Дмитрий Смыков]

Артем, я вот не понимаю, почему alertы стоят, зачем?
Зачем на сервере строка echo array_rand($data);?
Ну и самое главное, что данный запрос запрашивает-то? Все в точности сделал, только вылетел алерт Object Response

[Артем]

Дмитрий Смыков,

alert показывает, что лежит в переменной.
echo выводит в буфер переменную, array_rand из массива достает случайное значение из тех, что есть в массиве данных.

Позволю себе напомнить:

Допустим на сервере есть массив, в котором 10 ячеек с каким-либо содержимым.

Что касается Object Response:

Объект response кроме доступа к заголовкам headers, статусу status и некоторым другим полям ответа, даёт возможность прочитать его тело, в желаемом формате.

Варианты описаны в спецификации Body, они включают в себя:

response.arrayBuffer()
response.blob()
response.formData()
response.json()
response.text()
Соответствующий вызов возвращает промис, который, когда ответ будет получен, вызовет коллбэк с результатом.

[Дмитрий Смыков]

Артем, и все равно я не догоняю синтаксиса Object Response. Что там нужно написать? И вообще какой вариант нужно выбрать? Я не могу понять где и как именно указывать то, что я хочу от сервера? Как показать серверу, что среди массивов, грубо говоря, нужно взять этот массив, а в нем рандомную ячейку и вернуть ее обратно в JS?

[Артем]

Дмитрий Смыков, в каком формате хотите, в таком и получайте. Попробуйте разные и логните в консоль, что будет. json(), думаю, будет удобен.

среди массивов

Среди каких массивов?

[Дмитрий Смыков]

Артем, так а написать это как и где? Я не понимаю,

fetch('/index.php')      // адрес
  .then(function(response) {     // тут как я понял ничего не меняется
       alert(response);     // вроде как тело запроса, что тут писать я не понимаю. Название массива?
   })
  .catch( alert );     // этого вообще не понял

На сайтах не описывается синтаксис самого запроса, что и как запрашивать, примеров нет, только написано, что сам запрос пишется в теле запроса

[Артем]

Дмитрий Смыков, вы писали, что сделали бы это на jquery. Покажите, как именно.

[Дмитрий Смыков]

Артем, так тут дело в том, что с первого взгляда, мне показалось, что я понял как происходит это на JQuery, но сейчас понимаю, что это не так.

Как я понял, на нативном JS посылается просто пустой запрос, который сервер должен обработать каким-то образом. Я ради эксперимента брал ваш код, написанный выше и проверял что он выдает в консоли. А в консоли он выдает объект responsive, где тогда значения ячейки массива?

[Артем]

Дмитрий Смыков, ваш php обработчик должен отдать содержимое ответа. В js вы делаете так:

fetch('index.php')
  .then(function(response) {
       return response.json(); //Подготовить данные в формате json
   })
.then(function(data){
   console.log(data); //Получить доступ к данным
})
  .catch( alert );