Перейти к содержимому


AJAX подгрузка данных.


Сообщений в теме: 44

#1 dolphin

    Активный участник

  • Пользователи
  • PipPipPip
  • 341 сообщений

Отправлено 22 Июль 2014 - 20:00

Друзья, программисты, обращаюсь к Вам! Если с php у меня немножко получается работать, то вот с AJAX я к великому моему сожалению, я совсем не знаком.

Подскажите пожалуйста простой пример, когда данные с КБ, допустим, с какой то таблицы, будут обновляться в представлении без перезагрузки страницы? Как такое сделать? Самый наипростейший пример?..

Заранее благодарю!!!

#2 dolphin

    Активный участник

  • Пользователи
  • PipPipPip
  • 341 сообщений

Отправлено 23 Июль 2014 - 09:32

Раз ответ никто не пишет. Попробую сам разобраться в этом. Прочел немножко документации. Понял основной принцип работы Аякса. Теперь вопрос, к разработчикам, если запрос писать в отображении представления:
function AjaxViborka(){
    $.ajax({
	   url: "path/to/ajax/file.php",
	   type: "POST",
	   data: { Name : 'Имя, которое проверить надо' },
   }).done(function(otvet_php) {
		 if (otvet_php == 1) {  location.reload();  }
   });
}
То какой адрес отображать тут:
url: "path/to/ajax/file.php",


#3 dolphin

    Активный участник

  • Пользователи
  • PipPipPip
  • 341 сообщений

Отправлено 23 Июль 2014 - 09:46

Итак... Начнем. Простейший запрос к БД, который выберет 10 последних записей по добавлению (в подготовке данных):
$sqlQuery = "SELECT f2640 as test FROM ".DATA_TABLE."210 ORDER BY add_time DESC LIMIT 10"; 
$result = mysql_query($sqlQuery);
while ($row = sql_fetch_array($result))
  {
    $data['test'] = $row['test'];
    $lines[] = $data;  
  }
$smarty->assign("lines", $lines);
Простейшее отображение этих данных (в отображении):
{foreach from=$lines item=data}
{$data.test}<br>
{/foreach}

Вопрос в следующем. Как теперь эти данные получать асинхронно(без перезагрузки страницы), через каждые 3 секунды?..

#4 andibrag

    Прежде, чем задать вопрос, продумайте свое решение.

  • Активный пользователь
  • PipPipPip
  • 1 356 сообщений
  • Пол:Мужчина
  • Город:Санкт-Петербург

Отправлено 23 Июль 2014 - 10:15

У вас file.php должен выводить последние десять записей? Смарти тут не нужен. Смарти переменные используются при изначальном формировании страницы. Отображение можно сделать при помощи вызова через js функции, запускающей ajax запрос через каждые три секунды и отображающей полученный результат в слой с id="div_data".
function show_data()  {
  $.ajax({
		dataType: "html",
		url: "path/to/ajax/file.php",
		type: "POST",
		data: { Name : 'Имя, которое проверить надо' },
		success: function(html){
		   $("#div_data").html("........ваш вывод информации .......");
		}
  });
}
А в представление вставьте сам скрипт
<script>
		// отправляем данные функцией show_online через интервал времени timeInt
		var timeInt=3000;
		show_data();
		setInterval('show_data()',timeInt);
</script>
Непосредственно в file.php делаете запрос к базе и в завершаете его echo с результатом обработки.

Творческая группа "ТАВР".

www.TAVR.pro Художественная ковка, металлоконструкции.

www.СтолМет.рф Складные столы, стулья и системы для их хранения


#5 dolphin

    Активный участник

  • Пользователи
  • PipPipPip
  • 341 сообщений

Отправлено 23 Июль 2014 - 10:16

Стоп-стоп-стоп. Правильно ли я понял, что file.php необходимо создавать отдельно где нибудь в папках КБ???

#6 andibrag

    Прежде, чем задать вопрос, продумайте свое решение.

  • Активный пользователь
  • PipPipPip
  • 1 356 сообщений
  • Пол:Мужчина
  • Город:Санкт-Петербург

Отправлено 23 Июль 2014 - 10:18

Просмотр сообщенияdolphin (23 Июль 2014 - 10:16) писал:

Стоп-стоп-стоп. Правильно ли я понял, что file.php необходимо создавать отдельно где нибудь в папках КБ???
Да. Вы же сами путь прописали
url: "path/to/ajax/file.php",

Творческая группа "ТАВР".

www.TAVR.pro Художественная ковка, металлоконструкции.

www.СтолМет.рф Складные столы, стулья и системы для их хранения


#7 dolphin

    Активный участник

  • Пользователи
  • PipPipPip
  • 341 сообщений

Отправлено 23 Июль 2014 - 10:22

Нет. Стойте. Давайте уберём вообще это:
function AjaxViborka(){
    $.ajax({
		   url: "path/to/ajax/file.php",
		   type: "POST",
		   data: { Name : 'Имя, которое проверить надо' },
   }).done(function(otvet_php) {
				 if (otvet_php == 1) {  location.reload();  }
   });
}

Это взято с интернета с желанием разобрать что к чему.

Давайте начнем сначала.

Задача: в представлении без перезагрузки страницы отображать 10 крайних записей с какой нибудь таблицы (обновляя их каждые 3 секунды).

#8 andibrag

    Прежде, чем задать вопрос, продумайте свое решение.

  • Активный пользователь
  • PipPipPip
  • 1 356 сообщений
  • Пол:Мужчина
  • Город:Санкт-Петербург

Отправлено 23 Июль 2014 - 10:36

Просмотр сообщенияdolphin (23 Июль 2014 - 10:22) писал:

Давайте начнем сначала.
Задача: в представлении без перезагрузки страницы отображать 10 крайних записей с какой нибудь таблицы (обновляя их каждые 3 секунды).
Я Вам расписал алгоритм. Если ничего передавать в запрос не нужно, например условие для выборки, то можно удалить строку с data.
datatype - вид возвращаемых данных. В данном случае html.
url - это строка расположения php-файла на стороне сервера, в котором происходит выборка данных из БД и передача их на сторону клиента, т.е. на Ваш компьютер в браузер.
success - если запрос прошел успешно, выполняется функция из этой строки. Здесь вы можете обработать полученный от php-файла ответ и вывести его в удобном для Вас месте и виде.
type - вид запроса через get или post.
JS код, который прописан ниже. запускает функцию каждые три секунды.
<script>
function show_data()  {
  $.ajax({
	 dataType: "html",
	 url: "path/to/ajax/file.php",
	 type: "POST",
	 success: function(html){
		$("#div_data").html("........ваш вывод информации .......");
	 }
  });
}
// отправляем данные функцией show_online через интервал времени timeInt
var timeInt=3000;
show_data();
setInterval('show_data()',timeInt);
</script>

Творческая группа "ТАВР".

www.TAVR.pro Художественная ковка, металлоконструкции.

www.СтолМет.рф Складные столы, стулья и системы для их хранения


#9 dolphin

    Активный участник

  • Пользователи
  • PipPipPip
  • 341 сообщений

Отправлено 23 Июль 2014 - 10:39

Просмотр сообщенияandibrag (23 Июль 2014 - 10:36) писал:

url - это строка расположения php-файла на стороне сервера, в котором происходит выборка данных из БД и передача их на сторону клиента, т.е. на Ваш компьютер в браузер.
Может ли этот php-файл распологаться не на стороне сервера, а быть в самом представлении в "подготовке данных"??? Если да, то как это отобразить?

#10 CbCoder

    Активный участник

  • Программист ООО "КБ"
  • PipPipPip
  • 8 759 сообщений
  • Пол:Мужчина
  • Город:Казань

Отправлено 23 Июль 2014 - 10:55

Просмотр сообщенияdolphin (23 Июль 2014 - 10:39) писал:

Может ли этот php-файл распологаться не на стороне сервера, а быть в самом представлении в "подготовке данных"??? Если да, то как это отобразить?

Почему нет? Вместо пути к file.php задаете путь к вашему представлению, с каким-нибудь доп.параметром, например "ajax=1". Соответственно, в обработке данных добавляете код под условие if ($_REQUEST['ajax']) {// тут код обработки аякс запроса}

#11 dolphin

    Активный участник

  • Пользователи
  • PipPipPip
  • 341 сообщений

Отправлено 23 Июль 2014 - 10:57

Так-так-так... Секундочку.... Голова вспухает... Сейчас всё соображу!!! Спасибо!

#12 dolphin

    Активный участник

  • Пользователи
  • PipPipPip
  • 341 сообщений

Отправлено 23 Июль 2014 - 11:02

Составил. В подготовке имеем:

if ($_REQUEST['ajax'] == 1) {
$sqlQuery = "SELECT f2640 as test FROM ".DATA_TABLE."210 ORDER BY add_time DESC LIMIT 10"; 
$result = mysql_query($sqlQuery);
while ($row = sql_fetch_array($result))
  {
    $data['test'] = $row['test'];
  }
}   


В отображении:

<script>
  function show_data() {
    $.ajax({
	  dataType: "html",
	  url: "edit_php.php?report=460&ajax=1",
	  type: "POST",
	  success: function(html){
	    $("#div_data").html("$data['test']");
	    }
    });
  }
// отправляем данные функцией show_online через интервал времени timeInt
  var timeInt=3000;
  show_data();
  setInterval('show_data()',timeInt);
</script>
<div id="div_data"></div>

Результат:
$data['test']

P. S. Что не так? :(

#13 CbCoder

    Активный участник

  • Программист ООО "КБ"
  • PipPipPip
  • 8 759 сообщений
  • Пол:Мужчина
  • Город:Казань

Отправлено 23 Июль 2014 - 11:06

А где возврат каких-либо данных скриптом запроса? Вы что обрабатывать то собираетесь? Вы должны что-то вывести через echo, а уж функция в JS должна обработать результат. Не через астрал же она его возьмет.

Абстрагируйтесь от того что у вас скрипт запроса сейчас включен в "обработку данных" представления, по сути этот тот же file.php из примера, никак не связанный с остальным кодом.

#14 dolphin

    Активный участник

  • Пользователи
  • PipPipPip
  • 341 сообщений

Отправлено 23 Июль 2014 - 11:07

не пойму никак :( у меня ведь возвращается массив с данными? :(

#15 CbCoder

    Активный участник

  • Программист ООО "КБ"
  • PipPipPip
  • 8 759 сообщений
  • Пол:Мужчина
  • Город:Казань

Отправлено 23 Июль 2014 - 11:11

Где возвращается, куда возвращается? Вывода нет в вашем фрагменте.

Еще раз (может не прочли, дописывал):

Цитата

Абстрагируйтесь от того что у вас скрипт запроса сейчас включен в "обработку данных" представления, по сути этот тот же file.php из примера, никак не связанный с остальным кодом.

Фрагмент с обработкой запроса никак не связан с выводом в отчет, это абсолютно отдельный поток данных!

По этой причине кстати и exit должен быть в его конце, чтобы выполнение дальше не пошло, иначе у вас весь отчет вылезет в ajax ответ.

#16 dolphin

    Активный участник

  • Пользователи
  • PipPipPip
  • 341 сообщений

Отправлено 23 Июль 2014 - 11:14

:unsure: :wacko: :blink: Вы меня вообще запутали :(

#17 dolphin

    Активный участник

  • Пользователи
  • PipPipPip
  • 341 сообщений

Отправлено 23 Июль 2014 - 11:17

Начнем сначала. Вновь.

Подготовим данные:
if ($_REQUEST['ajax'] == 1) {
$sqlQuery = "SELECT f2640 as test FROM ".DATA_TABLE."210 ORDER BY add_time DESC LIMIT 1"; 
$result = mysql_query($sqlQuery);
while ($row = sql_fetch_array($result))
  {
    $x = $row['test'];
    return $x;
  }
}   
Всё верно тут?...

#18 dolphin

    Активный участник

  • Пользователи
  • PipPipPip
  • 341 сообщений

Отправлено 23 Июль 2014 - 11:18

<script>
  function show_data() {
    $.ajax({
	  dataType: "html",
	  url: "report.php?report=460&ajax=1",
	  type: "POST",
	  success: function(html){
	    $("#div_data").html("$x");
	    }
    });
  }
  var timeInt=3000;
  show_data();
  setInterval('show_data()',timeInt);
</script>
<div id="div_data"></div>
а тут мы получим этот $x. Всё верно?

#19 dolphin

    Активный участник

  • Пользователи
  • PipPipPip
  • 341 сообщений

Отправлено 23 Июль 2014 - 11:21

Еще доработал:

if ($_REQUEST['ajax'] == 1) {
$sqlQuery = "SELECT f2640 as test FROM ".DATA_TABLE."210 ORDER BY add_time DESC LIMIT 1"; 
$result = mysql_query($sqlQuery);
while ($row = sql_fetch_array($result))
  {
    $x = $row['test'];
  }
  return $x;
  exit;
}   


#20 CbCoder

    Активный участник

  • Программист ООО "КБ"
  • PipPipPip
  • 8 759 сообщений
  • Пол:Мужчина
  • Город:Казань

Отправлено 23 Июль 2014 - 11:23

Наверное, имеет место глобальное непонимание сути аякса. Поясню:

1. То что вы выводите в отчет из подготовки данных и отображения - это привычная всем html страница целиком со всеми заголовками, она непосредственно отображается в браузере, когда вы вводите адрес отчета, либо переходите к нему по ссылке, либо выполняете какие-то действия по отправке формы (например, поменяли период или менеджера в шапке отчета).
2. То что вы запрашиваете через аякс, к стандартному выводу в браузер никакого отношения не имеет!! Это отдельный, скрытый запрос к серверу из js-скрипта, ВНЕ браузера, с целью получить какие-то данные, грубо говоря в виде строки простого текста. Потом, этот текст должна обработать функция, которую вы задали в запросе из js. Никаких передач в smarty и отображение там не надо.

Так понятнее стало?

Поэтому собственно и обрабатывать запрос должен абсолютно отдельный скрипт, или его эмуляция в подготовке данных, но со СВОИМ выводом и exit'ом в конце, т.е как совершенно независимый кусок кода.





Количество пользователей, читающих эту тему: 1

0 пользователей, 1 гостей, 0 анонимных