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

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

31.07.2017, 09:40. Показов 2340. Ответов 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
Ответ Создать тему
Новые блоги и статьи
Midnight Chicago Blues
kumehtar 24.03.2026
Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .
Контроль уникальности заводского номера - вариант №2
Maks 24.03.2026
В отличие от предыдущего варианта добавлено прерывание циклов, также добавлены новые переменные для сохранения контекста ошибки перед прерыванием цикла: Процедура ПередЗаписью(Отказ, РежимЗаписи,. . .
SDL3 для Desktop (MinGW): Вывод текста со шрифтом TTF с помощью библиотеки SDL3_ttf на Си и C++
8Observer8 24.03.2026
Содержание блога Финальные проекты на Си и на C++: finish-text-sdl3-c. zip finish-text-sdl3-cpp. zip
Жизнь в неопределённости
kumehtar 23.03.2026
Жизнь — это постоянное существование в неопределённости. Например, даже если у тебя есть список дел, невозможно дойти до точки, где всё окончательно завершено и больше ничего не осталось. В принципе,. . .
Модель здравоСохранения: работники работают быстрее после её введения.
anaschu 23.03.2026
geJalZw1fLo Корпорация до введения программа здравоохранения имела много невыполненных работниками заданий, после введения программы количество заданий выросло. Но на выплатах по больничным это. . .
Контроль уникальности заводского номера - вариант №1
Maks 23.03.2026
Алгоритм контроля уникальности заводского (или серийного) номера на примере документа выдачи шин для спецтехники с табличной частью в КА2. Данные берутся из регистра сведений, по которому настроено. . .
Хочу заставить корпорации вкладываться в здоровье сотрудников: делаю мат модель здравосохранения
anaschu 23.03.2026
e7EYtONaj8Y Z4Tv2zpXVVo https:/ / github. com/ shumilovas/ med2. git
Программный отбор элементов справочника по группе
Maks 22.03.2026
Установка программного отбора элементов справочника "Номенклатура" из модуля формы документа в КА2. В качестве фильтра для отбора справочника служит группа номенклатуры. Отбор по наименованию. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru