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

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

31.07.2017, 09:40. Показов 2300. Ответов 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
Ответ Создать тему
Новые блоги и статьи
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка.
Programma_Boinc 23.12.2025
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Рецензия / Мнение/ Перевод https:/ / **********/ gallery/ thinkpad-x220-tablet-porn-gzoEAjs . . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha
Etyuhibosecyu 20.11.2025
Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух
kumehtar 18.11.2025
Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru