Перезагрузка страницы ajax php

Подгрузка данных AJAX и перезагрузка страницы

Здравствуйте, уважаемые форумчане! Целый день не могу решить одну проблему. У меня есть два скрипта:

1 2 3 4 5 6 7 8 9 10 11 12 13

var indexValue = parseInt($(this).attr('index'), 10); $.ajax({ type: "POST", url: "ask_for_select_dp.php", data: { section_name: sectionName, list_item_name: sectionListItemName, task_name: sectionTaskName }, //dataType: 'json', success: function(msg){ alert(indexValue); //Здесь индекс выводится правильно $(".upload_dp_comments").eq(1).html(msg); $(".upload_dp_comments").eq(1).show(); } })

1 2 3 4 5 6 7 8 9 10 11 12 13

var indexValue = parseInt($(this).attr('index'), 10); $.ajax({ type: "POST", url: "ask_for_select_dp.php", data: { section_name: sectionName, list_item_name: sectionListItemName, task_name: sectionTaskName }, //dataType: 'json', success: function(msg){ alert(indexValue); //Здесь индекс выводится правильно $(".upload_dp_comments").eq(indexValue).html(msg); $(".upload_dp_comments").eq(indexValue).show(); } });

Как первый, так и второй скрипты срабатывают для двух select (каждый пронумерованы индексами 0 и 1. 0 — это первый select, 1 — второй (0 и 1 — это атрибуты)) под которыми находятся div’ы, в которые подгружается информация через скрипт (то есть, в div «.upload_dp_comments»). Если использовать первый кусок кода, то при открытии первого select и выбора элемента ничего не подгружается, так как индекс 1, а не 0. Если затем выбрать что-то из второго select, то все работает и контент для каждого элемента списка подгружается. Я целый день не могу понять, что не так. Вот суть проблемы. Если я вместо 1 в функции eq() использую переменную indexValue (см. второй кусок кода), то подгрузка информации из БД (которая туда успешно подгружается) происходит только после перезагрузки страницы (при этом, если я не трогаю первый select, не выбираю в нем что-то, то все работает, а для 1 работает в обоих случаях), а не сразу. Но ведь это абсолютно два идентичных куска кода. Просто вместо 1, я использую indexValue. Очень прошу тех, кто разбирается, помочь найти различия в этих кодах. Они, почему-то работают по-разному, хотя перед передачей indexValue отображается правильно.

P.S. Я не прошу особо вникать в суть проблемы, просто объясните, пожалуйста, почему, когда я передаю не константу 1, а indexValue (при этом я перевожу ее в Integer), второй select ведет себя по-другому (в случае когда я сначала юзаю первый select). Ведь они должны работать одинаково? Это как-то связано с особенностями функции success?

Источник

AJAX и jQuery. Динамическое обновление контента. Основы (изменения от 03.01.2012)

В данной статье речь пойдет о том, что же такое AJAX и jQuery и будут рассмотрены примеры, как их использовать.

AJAX — инструмент для построения веб-приложений, обменивающихся данными с сервером в фоновом режиме. При этом пользователь получает приложение с динамическим обновлением контента, без перезагрузки всей страницы.

jQuery — JavaScript-framework, библиотека, позволяющая более удобно использовать некоторые возможность Javascript, такие как: создание визуальных эффектов, обработка событий, работа с DOM и поддержка AJAX.

Скачать последнюю версию jQuery и подробно ознакомиться со всеми возможностями можно на сайте разработчика: http://www.jquery.com/

В данной статье мы будем рассматривать только одну функцию библиотеки jQuery, а именно функцию $.ajax(). Эта функция позволяет нам как передавать данные на сервер, так и получать ответы от сервера и все это в фоновом режиме, без перезагрузки страницы. Настройка приема или передачи данных зависит от параметров, с которыми вызывается функция $.ajax(). Основные из них будут рассмотрены ниже. Подробнее о параметрах можно прочесть в руководстве по jQuery.

Перейдем к рассмотрению примеров.

Важно!
Для того, чтобы примеры работали корректно, необходимо:
1. Все файлы должны быть записаны в кодировке UTF-8.
2. Скрипты должны выполняться на веб-сервере, а не запускаться в браузере, как файл.

Пример 1. Динамическое обновление контента по таймеру

Создадим простенькую программу, отображающую текущее время, обновляемое раз в секунду по таймеру. Особенностью данной программы будет получение информации о текущем времени из другого внешнего файла.

Содержимое файла index.html.

В коде имеются несколько особенностей, поясним их.

1. Подключение библиотеки jQuery происходит в заголовке HTML файла, для этого записана данная строка.

2. В теле документа создается контейнер, в который мы будем загружать контент.

3. Странная, на первый взгляд, функция $(document).ready() требуется для корректной работы jQuery, к тому же в ней мы можем выполнить все приготовления к работе программы. В нашем случае мы вызываем функцию show(), в которой прописан механизм получения контента из другого файла, и настраиваем таймер, так, чтобы функция show() вызывалась один раз в секунду.

4. Функция show() состоит из обращения к функции $.ajax() с определенным рядом параметров, которая позволяет нам в фоновом режиме получить информацию из внешнего файла на сервере.

Рассмотрим используемые параметры функции $.ajax().

При успешном выполнении запроса, управление переходит функции, которая получает контент в качестве параметра и записывает его контейнер. Запись в контейнер происходит вот в этой строке:

Смысл работы файла time.php — выводим текущее время на экран.

Скачать исходные файлы примера (16,6 кб):
/files/ajax_ex1.zip

Пример 2. Динамическое обновление контента по выбору пользователя

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

Содержимое файла index.html.

     
Какую страницу желаете открыть?
      

В теле документа создана форма, имеющая две кнопки, посредством которых пользователь осуществляет выбор желаемого контента. И контейнер для загрузки контента.

Загрузка динамического контента в контейнер осуществляется аналогично примеру 1. Разница лишь в том, что грузится различный контент, если происходят разные события.

Событие нажатия на кнопку «Страница 1» обрабатывается функцией $(‘#btn1’).click(), а событие нажатия на кнопку «Страница 2» обрабатывается функцией $(‘#btn2’).click().

Содержимое файлов page1.html и page2.html, которые загружаются в область контента динамически, представляет собой простые HTML-страницы или текстовые файлы с контентом.

Скачать исходные файлы примера (18,4 кб):
/files/ajax_ex2.zip

Пример 3. Отправка данных на сервер в фоновом режиме и получение контента

Рассмотрим пример, отправляющий введенное имя пользователя на сервер. Сервер при получении имени выдает приветствие и подсчитывает количество символов в введенном имени.

Содержимое файла index.html.

      Введите имя: 

 
    

В теле документа создана форма для ввода имени пользователя. И контейнер для загрузки динамического контента.

Заметим, что сама форма не имеет привычных полей action и method. В качестве обработчика события нажатия на кнопку «Отправить», выступает функция $(‘#myForm’).submit(). Рассмотрим эту функцию.

$('#myForm').submit(function() < $.ajax(< type: "POST", url: "greetings.php", data: "username="+$("#username").val(), success: function(html)< $("#content").html(html); >>); return false; >);

Как мы видим, основная работа опять связана с функцией $.ajax(). В этот раз появляются дополнительные параметры, не рассмотренные в примерах 1 и 2. А именно:

Параметры, передаваемые серверу. В данном случае мы передаем содержимое поля username — имя пользователя. В общем случае, параметры записываются также, как в методе GET, одной строкой, например:

data: "username=Vasya&age=18&sex=male"

Обратим внимание, что в конце написана строка:

Это сделано для того, чтобы форма не пыталась передать данные файлу, из которого она запускается и не происходило перезагрузки страницы.

Содержимое файла greetings.php.

".$_REQUEST['username']."!
"; echo "В вашем имени букв: ".strlen($_REQUEST['username'])."."; ?>

Выводим на экран приветствие и подсчитываем количество символов в имени.

Скачать исходные файлы примера (16,8 кб):
/files/ajax_ex3.zip

В качестве еще одного примера использования AJAX и jQuery можно посмотреть гостевую книгу из статьи
«Гостевая книга своими руками на PHP и MySQL. Добавляем динамизма. AJAX + jQuery».

Стоит сказать в заключении, что кроме очевидных плюсов создания страниц с использованием динамического обновляющегося контента, есть ряд недостатков, которые следует учитывать при разработке сайта, а именно:

1. На страницах с динамическим обновлением контента, кнопка «Назад» в браузере не работает корректно.

2. Страницы с динамическим обновлением контента не меняют URL, в зависимости от своего содержимого, поэтому не могут быть добавлены в закладки.

3. Страницы с динамическим обновлением контента не индексируются поисковыми системами, т.к. они не выполняют команды JavaScript.

От приведенных недостатов можно избавиться программным путем. В данной статье такие способы не рассматриваются.

Статьи по теме

© 2008 — 2022 :: Codething.ru
При перепечатке и копировании статей с сайта указание автора и URL статьи обязательно!
Программный код, приведенный в статьях в качестве примеров, можно использовать без каких-либо ограничений.
Работоспособность, надежность и безопасность программного кода из примеров не гарантируется.

Источник

Перезагрузка страницы AJAX

Что надо добавить в конце чтоб перезагрузить страницу (это вариант решения) на которой происходит находится сам вызов ajax запроса?

Или как вариант перезагрузить div, который идет после вызова ajax запроса?

div class="my-tests"> table width="100%"> //здесь сама таблица (ее и нужно по сути перегрузить) table> div>

Перезагрузка страницы на ajax
Есть калькулятор, типа кредитный. Там первая страница — форма для заполнения и кнопка рассчитать.

Перезагрузка страницы после ajax запроса
Вообщем ситуация такая. Есть форма данные из которой php сценарию по клику на копку посредством.

Подгрузка данных AJAX и перезагрузка страницы
Здравствуйте, уважаемые форумчане! Целый день не могу решить одну проблему. У меня есть два.

Автообновление страницы на ajax и разделение на страницы php
Добрый день, вот столкнулся с такой задачей, есть у меня автообновляемая страница на ajax которая.

Сообщение от Asew

Смысл какой в этом? Если данные не меняются то зачем перегружать? Если меняются то где брать новые? Что вообще в этой таблице находится?

Сообщение от Smls

Перезагрузить всё страницу:

Сообщение от Smls

Смысл какой в этом? Если данные не меняются то зачем перегружать? Если меняются то где брать новые? Что вообще в этой таблице находится?

в таблицу попадают данные с формы, данные туда попадают как только нажата кнопка «отправить» на форме.

Перезагрузка страницы
//Высылаем пользователю архив header ("Content-Type: application/octet-stream"); header.

Перезагрузка страницы
С файла по адресу ‘/www/admin/index.html’ отправляется форма в файл.

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

Перезагрузка страницы при отправке формы
Как сделать так, что бы при отправке сообщения страничка не обновлялась? <? $sitename =.

Перезагрузка страницы
В php странице подключаю сперва вывод сообщения из базы данных. А затем форму, для добавления.

Перезагрузка страницы после оплаты в банке
На сайте организована оплата с помощью LiqPay, после выбранной цены я отправляюсь на этот сервис.

Источник