С Новым годом! Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.64/11: Рейтинг темы: голосов - 11, средняя оценка - 4.64
3 / 3 / 2
Регистрация: 16.01.2013
Сообщений: 471

Правильно организовать ajax запросы/ответы

31.07.2017, 09:40. Показов 2303. Ответов 10
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Доброго времени форумчане. Назрел вопрос, как мне кажется, он из разряда ООП.
На сайте сейчас многое делается при помощи обновления данных через ajax.
обычная структура:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var url ='test.php;
    $.ajax({
type: "POST",
url: url,
data:data,
success: function(html) {
 
var returnData = JSON.parse ( html );
 
},
error:  function(){
 
 
    }
});
Существует ли возможность в JS что-то типа создания шаблона, для упрощения передачи и приема различных json данных и не создавать с вышеуказанным кодом кучу файлов или функций, чтобы обрабатывать данные, которые возвращает php скрипт ?
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
31.07.2017, 09:40
Ответы с готовыми решениями:

Не получается организовать запросы ajax
Ребят, доброе время суток! Как думаете, как лучше решить следующий вопрос: Имеется таблица, в которой построчно выводятся данные из бд...

AJAX или запросы от клиента к серверу и обратно
Посылаю запрос Ajax серверу, там его принимаю и с данными работаю, далее, нужно отправить новые данные с сервера на клиентскую страницу....

Не запускать ajax запросы если сайт открыт в нескольких вкладках
Друзья, подскажите пожалуйста. На сайте каждые 5 секунд через функцию SetInterval отправляются запросы к серверу, чтобы узнать, есть ли у...

10
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
31.07.2017, 09:49
Цитата Сообщение от MirDj Посмотреть сообщение
Существует ли возможность в JS что-то типа создания шаблона
Такая возможность есть в любом языке программирования. Продумайте логику вашего шаблонизатора, опишите её программно и пользуйтесь.
0
3 / 3 / 2
Регистрация: 16.01.2013
Сообщений: 471
31.07.2017, 09:51  [ТС]
Balanaar, Если есть возможность, то хоть примерчик какой-то, или подробнее на словах или линк на статью, если знаете. Допустим в php я подключаю в нужном месте нужный файл, а здесь как сделать обработку разного кода внутри
JavaScript
1
2
3
4
5
success: function(html) {
 
var returnData = JSON.parse ( html );
 
},
0
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
31.07.2017, 10:59
Мне не понятно, чего вы хотите добиться. Опишите подробнее. А пока я напишу то, чем пользуюсь лично.
Небольшой кусок кода в качестве примера:
Файл ajax.php
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Class Ajax {
  public $response = ['data' => '', 'errors' => '', 'action' => '']; // Структура ответа. В data будет храниться ответ, в errors - ошибки, в action - функция, которая будет вызвана в JS после ответа от сервера
  
  function send() {
    echo json_encode($this->response, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP | JSON_UNESCAPED_UNICODE); // Ответ от сервера будет сериализован в формат JSON
  }
}
    
if (isset($_REQUEST['action'])) {
  $ajax = new Ajax();
  $a = $_REQUEST['action'];
  $a($ajax, $errors); // Запускаем функцию, имя которой мы получили в запросе
  if ($errors->exist()) $ajax->response['errors'] = $errors->get(); // Если есть ошибки, модифицируем в ответе поле errors. $errors - класс-обработчик ошибок. Его код опущен.
  $ajax->send();
  exit();
}
 
function some_function($ajax, $errors) {
  $ajax->response['data'] = $_GET['id']; // 10
  if (!$errors->exist()) $ajax->response['action'] = 'someAction'; // Функция someAction будет вызвана на стороне клиента в случае успешного ответа от сервера
}
JS-файл:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
function ajax(params) { // Описываем функцию отправки запроса
  params.data.action = params.action;
  delete params.action;
  params.url = 'path/to/ajax.php'; // Путь до файла с нашими функциями
  var request = $.ajax(params);
  request.then(function(response) {
    var json = JSON.parse(response);
    if (json.errors) {
      // Обработчик ошибок
    }
    if (json.action) window[json.action](json.data); // Запускаем коллбек с полученными данными в качестве параметра
  });
}
Использование:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
ajax({
  method: 'GET',
  action: 'some_function', // Функция some_function будет запущена на стороне PHP
  data: {
    id: 10 // Передаём 10 в качестве параметра id
  }
});
 
function someAction(data){ // Будет вызвана после успешного ответа от сервера
  alert(data); // 10
}
Идея в том, что все ajax-функции вы храните в одном файле. Вы описываете функцию ajax(), основанную на jQuery.ajax(), единственное отличие которой заключается в том, что вместо url запроса вы передаёте имя функции, которую нужно запустить из php-файла. В функции ajax() параметр action переносится в data, а параметр url подставляется автоматически. Дальше происходит вызов jQuery.ajax().
В php-файле вы получаете имя функции, подготавливаете структуру ответа, вызываете нужную функцию, отдаёте результат, если не возникло ошибок. Также в ответе от сервера прилетает имя функции, которую нужно запустить в JS при отсутствии ошибок.
Как-то так.
1
3 / 3 / 2
Регистрация: 16.01.2013
Сообщений: 471
01.08.2017, 08:12  [ТС]
Balanaar, Надо потестировать ваш код и тогда я буду больше иметь представление как и что происходит, а затем уже, если будут, задам вопросы.

Добавлено через 16 минут
Balanaar, Стал разбираться в коде и есть пару вопросов, для понимания кода.
Как я делал раньше:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
var url ='test.php; //Путь к файлу, где нужно получить данные
    $.ajax({
type: "POST", 
url: url,
data:data,
success: function(html) {
 
var returnData = JSON.parse ( html ); // Получаю данные.
 
/// Здесь делаю при помощи js вставку данных в страницу клиента и т .д.
/// Например: 
 
if(returnData[0].infoGame){
    $('#infoGame').show('slow');
    $('#infoGame').html('<span style="color: #f93; font-weight:bold; font-size: 1em;">'+returnData[0].infoGame+'</span>')
setTimeout(function(){$('#infoGame').hide('slow');}, 3000);
}
if(returnData[0].question){
document.getElementById('question').innerHTML = returnData[0].question;
document.getElementById('counterVictorina').innerHTML = '60';
clearTimeout(intervalIDVictorina);
intervalIDVictorina = setTimeout('changeCounterVictorina()', 1000);
document.getElementById('ButtonSendAnswer').setAttribute('onclick', 'victorina(\''+returnData[0].id+'\',\'answerVictorina\',\'0\')');
$("#answer").val('');
document.getElementById('tip').innerHTML = '';
document.getElementById('ButtonTipAnswer').setAttribute('onclick', 'victorina(\''+returnData[0].id+'\',\'tipVictorina\',\'1\')');
updRating();
}
 
},
error:  function(){
 
 
    }
});
Перед этим в файле test.php я получил данные и возвращаю их в json
PHP
1
2
3
 $res[] = array("question" => $Rows['question'],"id" => $Rows['id'],"ratingGame" => $ratingGame);
  $victorinaReturn = json_encode($res);
      echo  $victorinaReturn;
В вашем коде я не совсем понял как обратиться к нужному файлу.
И где потом при помощи js обрабатывать данные которые вернулись от php файла?
Как указать метод отправки данных?
Как отправить набор переменных php файлу test.php?
0
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
01.08.2017, 09:26
Цитата Сообщение от MirDj Посмотреть сообщение
В вашем коде я не совсем понял как обратиться к нужному файлу.
Обратите внимание. В описании функции ajax() указывается путь до php-файла со ВСЕМИ ajax-обработками. Как я уже писал, идея в том, что все обработчики ajax-запросов хранятся в одном файле, а не разбросаны по разным. С 18й строчки файла ajax.php начинается один из таких обработчиков. Их может быть неограниченное количество. Чтобы вызвать определённую функцию из ajax.php, необходимо передать имя этой функции в качестве параметра action при вызове функции ajax() в JS (3я строка в примере использования).
Цитата Сообщение от MirDj Посмотреть сообщение
И где потом при помощи js обрабатывать данные которые вернулись от php файла?
Опять же, как я уже писал, в ответе от сервера вы должны передать имя JS-функции, которая будет вызвана после ответа от сервера (20я строка ajax.php). Данная функция должна быть определена в глобальном контексте (9я строка примера использования).
Цитата Сообщение от MirDj Посмотреть сообщение
Как указать метод отправки данных?
2я строка примера использования. Так же как и в обычном методе jQuery.ajax().
Цитата Сообщение от MirDj Посмотреть сообщение
Как отправить набор переменных php файлу test.php?
4-6 строки примера использования. Так же как и в обычном методе jQuery.ajax().
1
3 / 3 / 2
Регистрация: 16.01.2013
Сообщений: 471
01.08.2017, 09:58  [ТС]
Balanaar, Сейчас стало более понятно. Спасибо. Надо поковыряться. )))

Добавлено через 29 минут
Balanaar, Я так понимаю, у вас еще есть класс errors в php и там функция exist для проверки наличия ошибок?
0
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
01.08.2017, 10:05
MirDj, всё верно. Поудаляйте пока отовсюду вызов этого класса, пока не разберётесь в работе кода. А потом уже добавляйте обработчик ошибок.
0
3 / 3 / 2
Регистрация: 16.01.2013
Сообщений: 471
01.08.2017, 11:44  [ТС]
Balanaar, Раньше я данные в каждом php файле кодировал в json
PHP
1
2
3
$res[] = array("question" => $Rows['question'],"id" => $Rows['id'],"ratingGame" => $ratingGame);
  $victorinaReturn = json_encode($res);
      echo  $victorinaReturn;
Все было нормально.
Сейчас же это происходит в функции send.
Т.е мне нужно просто отдавать массив данных?
Делаю так:
PHP
1
2
 $res[] = array("question" => $Rows['question'],"id" => $Rows['id']);
      echo  $res;
и получаю: Notice: Array to string conversion in ajax.php on line 48
Array{"data":"10","errors":"","action":" ReturnDD"} в строке где
PHP
1
 echo  $res;
Добавлено через 24 минуты
Блин... Вот я тупанул.... надо было делать так:
PHP
1
$ajax->response['data'] = array("question" => $Rows['question'],"id" => $Rows['id']);
Добавлено через 17 минут
Balanaar, Вроде теперь все понятно. И правда удобно. Хорошо что обратился на форум...
Насчет обработчика ошибок. Это ошибки от обработки php или туда просто заношу сам чего надо, также как data? только errors - типа "К сожалению, данные не найдены!"?
0
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
01.08.2017, 12:27
Попробую объяснить, как обработчик ошибок устроен у меня.
У меня есть таблица в БД, в которой 2 поля (на самом деле больше, но для простоты восприятия ограничимся двумя). В первом - код ошибки (уникальный ключ), во втором - текст ошибки. Средствами PHP я инициализирую класс-обработчик ошибок. В этом классе есть несколько методов. Например метод push(). Данный метод может быть вызван при обработке ajax-запроса с передачей кода ошибки в качестве параметра. Например:
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Class Error_handler {
  private $errors = [];
  
  function __construct() {
    // ...
  }
  
  function push($error_code) {
    // Запрашиваем из БД текст ошибки по коду и заносим в переменную $error
    $this->errors[$error_code] = $error;
  }
  
  function exist() { // Метод проверяет, существует ли хотя бы одна ошибка. Возвращает количество ошибок.
    return count($this->errors);
  }
  
  function get() { // Возвращает все возникшие ошибки
    return $this->errors;
  }
}
 
$errors = new Error_Handler();
Теперь в обработчике ajax-запросов мы можем эти ошибки вызывать. Например проведём авторизацию пользователя с помощью ajax.
Функция в ajax.php:
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function login($ajax, $errors) {
  foreach ($_POST as $key => $value) ${$key} = $value; // Заносим полученные данные из массива $_POST в "человеческие" переменные
  if (empty($login)) $errors->push('LEM'); // Если поле login пустое - вызываем ошибку с кодом "LEM"
  if (empty($password)) $errors->push('PEM'); // Если поле password пустое - вызываем ошибку с кодом "PEM"
  if (!$errors->exist()) {
    $res = $mysqli->query("SELECT * FROM users WHERE login = '$login' AND password = '".md5($password)."' LIMIT 1");
    if (!($row = $res->fetch_assoc())) {
      $errors->push('LPW'); // Если пользователь с таким сочетанием логина и хеша пароля не найдены - вызываем ошибку с кодом "LPW"
    } else {
      // Если всё в порядке - авторизуем пользователя
    }
  }
  if (!$errors->exist()) $ajax->response['action'] = 'reload'; // Если ошибок нет - на стороне JS запустится функция reload(). Иначе включится обработчик ошибок. (вспоминаем 13ю строчку ajax.php)
}
Дальше магия происходит в обработчике ошибок на стороне JS. (вспоминаем 9ю строчку в описании функции ajax()).
В моей разметке располагаются скрытые блоки, в которых прописаны коды ошибок, за которые отвечает этот блок. Например под полем с вводом логина у меня есть <span errors="LEM">. Изначально он скрыт, но если в ответе на ajax-запрос пришла ошибка с кодом LEM - текст этой ошибки будет выведен в этом span. Также под полем пароля есть <span errors="PEM LPW">. Если придут ошибки с кодами PEM и/или LPW - они будут выведены в этот span. Тексты ошибок примерно такие:
LEM - Введите логин;
PEM - Введите пароль;
LPW - Неверный логин или пароль.

Обращаю внимание, что это всё мои личные выдумки. Код выше - это моя собственная сильно упрощённая и немного изменённая разработка. Естественно всегда можно придумать алгоритмы оптимальнее и удобнее, чем перечисленные выше. Советую обдумать, удобно ли вам использовать этот код или даже придумать свой собственный, в котором вы будете хорошо ориентироваться и который будет удобен именно вам.
1
3 / 3 / 2
Регистрация: 16.01.2013
Сообщений: 471
01.08.2017, 12:35  [ТС]
Цитата Сообщение от Balanaar Посмотреть сообщение
Советую обдумать, удобно ли вам использовать этот код или даже придумать свой собственный
Да, конечно, просто копипастить это не выход. Меня именно интересовало вообще можно ли это организовать и если да, то каким образом.
На вашем примере я понял алгоритм, а далее уже конечно буду мудрить под свои нужды...
Спасибо!
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
01.08.2017, 12:35
Помогаю со студенческими работами здесь

Как правильно создать if else AJAX
Доброго времени суток. Суть вопроса такова -- есть форма которая отправляет сообщение на почту. Она работает, но есть проблема,...

Как правильно сделать перезагрузку каптчи на Ajax'е?
Есть перловый скрипт который генерирует картинку для защиты от спам-ботов. Всё замечательно, но картинка сложная и иногда очень трудно...

Как отлаживать ajax запросы?
Раньше в консоли firefox можно было посмотреть и параметры ajax запроса, и ответ сервера, а в новых версиях, насколько я вижу, подобная...

AJAX правильно ли реализовал?
Доброго времени суток. Написал вот такую универсальную обработку форм. Вопрос к опытным: так как я ещё учусь, то на сколько грамотно я...

Ajax запросы
Всем добрый день не могу понять как посылать правильно запросы серверу Вот содержимое файла index.html &lt;!DOCTYPE html PUBLIC...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Новые блоги и статьи
Почему дизайн решает?
Neotwalker 09.01.2026
В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
Модель микоризы: классовый агентный подход 3
anaschu 06.01.2026
aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR
ФедосеевПавел 06.01.2026
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .
Модель микоризы: классовый агентный подход 2
anaschu 06.01.2026
репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .
Расчёт токов в цепи постоянного тока
igorrr37 05.01.2026
/ * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .
Новый CodeBlocs. Версия 25.03
palva 04.01.2026
Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .
Модель микоризы: классовый агентный подход
anaschu 02.01.2026
Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост.
Programma_Boinc 28.12.2025
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / **********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / **********/ gallery/ bKBkQFf Пост отсюда. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru