Здесь я хотел бы рассказать о том, как легко и просто начать использовать Ajax в повседневной жизни для отправки данных из форм, получения ответа и пр.
Мы будем использовать библиотеку JQuery. Скачайте и сохраните файл на своем сайте.
в хеде страницы подключаем нашу библиотеку кодом
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
Технология аякс состоит из трех основных составных:
-файл взаимодействия с пользователем (с формой, которую заполняет и отправляет пользователь, например), назовем его index.php
– файл библиотеки позволяющей передавать данные на серверный скрипт
– сам серверный скрипт, в нашем случае написанный на php, и обрабатывающий передаваемые аяксом данные.
Представим ситуацию, когда вам нужно передать какие то данные на сервер без перезагрузки страницы. Например, пользователю нужно ввести в форму свои имя и фамилию, и это должно пойти в базу данных по нажатию кнопки “отправить”.
Рисуем следующие поля
<p>
<label>Имя
<input type="text" name="name" id="name" />
</label>
</p>
<p>
<label>Фамилия
<input type="text" name="lastname" id="lastname" />
</label>
</p>
<p>
<label>
<input type="submit" name="go" id="go" value="Отправить" />
</label>
</p>
Сюда пользователь будет вводить данные. Сохраним файл под именем index.php
Затем создадим файл serverside.php со следующим содержимым
<?
$host = "localhost";
$dbuser = "user";
$dbpass = "pass";
$db = "dbname";
$link = mysql_connect($host, $dbuser, $dbpass) or die("не могу соединиться");
mysql_select_db($db, $link);
if (!empty($_POST))
{
$sql="INSERT INTO table (name,lastname) VALUES ('".mysql_real_escape_string($_POST['name'])."','".mysql_real_escape_string($_POST['last'])."')";
if (mysql_query($sql)) {echo 'Success!';}
}
?>
Что нам нужно сделать: нам нужно как то передать данные из файла index.php файлу serverside.php без перезагрузки страницы. Пишем JS часть. Вставляем ее в хед документа после подключения библиотеки JQuery.
<script type="text/javascript" language="javascript">
function senddata() {
$.ajax({
type: 'POST',
url: "serverside.php",
data: { name: $('#name').val(), lastname:$('#lastname').val() }}
)}
</script>
что здесь происходит:
type: ‘POST’ – говорим библиотеке, что будем использовать пост запрос
url: “serverside.php”, – скрипт на который будет идти пост запрос
data: { name: $(‘#name’).val(), lastname:$(‘#lastname’).val() } – данные, которые мы ему передадим
$(‘#name’).val() – фича JQuery, аналог записи document.getElementById.value, то бишь получение значение элемента по его ID.
Далее нам нужно сделать так, чтобы на какие то наши события шла отправка этих данных, вешаем на нашу кнопку он клик
<input id="go" onclick="senddata();" type="submit" name="go" value="Отправить" />
и по нажатию на кнопку срабатывает функция, отправляющая наши данные.
Для разнообразия, давайте получим ответ со скрипта serverside.php
Если помните, мы там написали вывод строки “Success!” если все будет ок, и данные вобьются в базу. Немного обновим наш JS код, отправляющий данные на серверную часть программы
function senddata() {
$.ajax({
type: 'POST',
url: "serverside.php",
data: { name: $('#name').val(), lastname:$('#lastname').val() },
success: function(data){$('#resp').html(data)}}
)}
этим мы говорим, что полученный от сервера ответ, в случае успеха нужно вставить как html код внутри объекта с идентификатором resp, теперь давайте создадим этот объект, например контейнер div, и поместим его чуть ниже формы отправки
<div id="resp"></div>
и мы будем получать сообщение “Success” если корректно сработал запрос, и все это без перезагрузки страницы!
Если остались вопросы, не стесняйтесь задавать, я не теоретик, но метод тыка великая штука :) мне очень помогает. Вместе мы что нибудь придумаем, а ответы на интересные вопросы буду вписывать в продолжение статьи.
Можете мне помочь с php?
В MySQL есть таблица, в которой прописаны ссылки к фотографиям. В этой же таблице описание каждой из фотографий. У каждой фотографии свой id.
Задача состоит в том, чтобы все фотографии из таблицы выводились на одной странице.
Сейчас для того, чтобы вывести каждую фотографию, я использую такую конструкцию:
$result = mysql_query(“SELECT photo, prim FROM catalog WHERE id=2”,$db);
$myrow = mysql_fetch_array($result);
echo $myrow[“photo”];
Для каждой фотографии вся конструкция повторяется, изменяется только значение id, для того, чтобы выводились разные фотографии.
Вопрос: Можно ли сделать запрос всей галереи, а потом там где нужна фотография или еще какие-нибудь данные из таблицы просто прописать echo photo (id 3); например и на этом место выводится третья фотография. Чтобы не повторять каждый раз запрос.
Это возможно?
Конечно, можно и нужно, то, что вы делаете, принципиально неверно: вы для каждой фотки делаете отдельный sql запрос, т.е. если у вас будет миллион фото у вас просто ляжет браузер (или сервер:) )
для корректного вывода, вам нужно создать цикл. пример
$result = mysql_query(«SELECT photo, prim,id FROM catalog ORDER BY id DESC); while($myrow = mysql_fetch_array($result)) { echo $myrow["photo"]; }Спасибо, что вызвались помочь. Я сам догадывался, что слишком много лишних движений, но не знал как реализовать более грамотно.
По вашему коду у меня вопрос. Строкой {echo $myrow[“photo”]; } выводятся выводятся все фотографии которые в таблице? Можно ли выводить каждую фотографию, указывая ее персональный id? Дело в том, что каждую фотографию сопровождают всякие скрипты, которые ее увеличивают и выводить эти фотографии нужно между специальными div-ами. А если все фотографии выводятся одним echo $myrow[“photo”]; – это очень удобно, кратко и лаконично, но тогда не будут работать скрипты.
Каким образом выводить отдельное фото в конкретном месте, где нужно?
Вот как например как вставляется звездный рейтинг
Где первая цифра id статьи для которой рейтинг учитывается, а вторая цифра количество звезд.
Было бы здорово, чтобы фото вставлялось как-нибудь так же. Где нужна фотография №5 вставляем небольшой код, с id 5 и на экран выводится эта фотография. Где нужна фотография №30 вставляем такой же код, с id 30 .
Вот примерно так. Такое возможно? Хотя, может я неправильно понял предложенный вами вариант. Буду дома, испробую предложенный вариант.
Спасибо вам за ответ.
Мой пример делает следующее:
– делает запрос к базе на предмет наличия в ней записей, и выбирает все записи без каких то фильтраций
– строкой {echo $myrow[“photo”]; } мы делаем вывод столбца photo из вашей бд одby за другим, т.е. в цикле..
прежде чем писать такое, рекомендую вам ознакомиться с самим понятием циклов, и с тем, как они работают. например здесь http://www.php.su/learnphp/cs/?cycles
Превосходно! Все работает. Такой краткий код получился, но делает все так же как громоздкий! Более того, мои опасения по поводу работы скриптов были беспочвенными! Загрузил в поле “photo” весь код вместе с div-ами и прочим и все прекрасно работает.
Но столкнулся с проблемкой. Если ее удастся решить, то это будет потрясающе!
К каждой фотографии у меня ведется рейтинг. (Я о нем писал выше и ссылку на него давал)
Там где этот рейтинг хочешь увидеть, нужно вставить код:
echo rating_bar(2,5);
Где первая цифра (в примере 2), это id фотографии, которую оценивает рейтинг, а вторая (в примере 5), количество звезд.
Пытался его прописать в базе данных, чтобы рейтинг выводился вместе с фотографиями, но он не выводится – буд-то там пусто.
Как вы думаете что тут можно предпринять?
если честно, я рекомендую не трогать тот рейтинг, он не обновляется с 2007 года, и автор четко написал что больше его не будет поддерживать, если все же хотите рискнуть – напишите, гляну чем помочь.
Он отлично работает. На многих сайтах встречал этот рейтинг. Вы мне очень помогли и буду благодарен, если еще поможете прикрутить к каждой фотографии рейтинг. )).
ну навскидку, должно работать как то так
попробуйте
Рейтинг так и работает. Дело в том, что вносить эту строку в таблицу MySQL не получается. На выходе, рейтинга нет, хоть эта строка прописана вместе с фотографиями в таблице MySQL.
я ничего не пойму. конечно вы не сможете внести ее в базу данных, т.к. это уже будет не функция а строка. скиньте куда то дамп базы данных, я качну скрипт и гляну.
Хотя, если посоветуете другой рейтинг, то охотно прислушаюсь к вашему совету. Может другой рейтинг легче будет прикрутить к фото галерее?
Вечер добрый.
А можно ли соединить 2 файла в один?
Если да – то какой потом URL писать? URL страницы на которой всё это исполняется?
Заранее спасибо.
Если вы имеете ввиду, соединить файл, в котором юзер отправляет форму, и файл, исполняющий php код – думаю можно, хотя не пробовал, просто надо четко отделить тогда, например file.php?userview=true – тут показываем все юзеру, и file.php?ajaxquery=true – тут выполняем аякс.
Не получается у меня 3 поля… 1 поле – текстовое, 2 других select.
Прописал следующее – function senddata() {
$.ajax({
type: ‘POST’,
url: “libraries/serverside.php”,
data: { vakansy: $(‘#vakansy’).val(), sity:$(‘#sity’).val(), grafik:$(‘#grafik’).val() },
success: function(data){$(‘#resp’).html(data)}}
)}
Вот код html
Ключевое слово:
Город
Все
Москва
Санкт-Петербург
Волжский
Курск
Великий Новгород
Владивосток
Егорьевск
Екатеринбург
Казань
Калуга
Киев
Красноярск
Липецк
Нижний Новгород
Новомосковск
Новосибирск
Пермь
Ростов-на-Дону
Самара
Тюмень
Уфа
Чехов
График работы
Все
5-дней в неделю
Ненорматированый график
Посменый график
Другое
В firebuge при нажатии на кнопки выбивает – $(“#vakansy”) is null
[Break on this error] data: { vakansy: $(‘#vakansy’).val()…val(), grafik:$(‘#grafik’).val() },
В чём может быть дело?
Извините за вопрос в позднее время, но очень нужно.
блин, порезало html-код
нету поля с идентификатором vakansy
вот прописываю по аналогии с вашем полем name… input type=’text’ value=” size=’25’ name=’vakansy’ id=’vakansy’
выложите куда нить архив с файлами, я посмотрю.
http://depositfiles.com/files/3s09cf1ac … там файл HTML и подключение скрипта в index.php
Большое спсибо за помощь.
http://depositfiles.com/files/tq51uo6ta
качайте. вы почему-то разделили javascript и html, я где то такое писал? :)
сделал вам рабочий скрипт, допишите только серверную часть libraries/serverside.php
Блин, наверное надо было сразу сказать… делаю сайт на Joomla.
для Joomla есть модуль – mod_html, который позволяет вставлять код на php, html, js на страницу сайта.
в этот модуль я вставил код html, в файле index.php прописал script и указал путь к php.
Вставил javascript и html в этот модуль….выбило порядком 40 ошибок.
Возможно ли это “подружить” Joomla и Ваш метод?
Или может для Joomla есть какие-то другие решения, известные Вам?
Без понятия, я с joomla не работаю.
жаль, спасибо помощь.
не за что. p.s. ошибки могут быть из-за того, что joomla (например) использует другую библиотеку (mootools например), используйте jQuery.noConflict если это так http://api.jquery.com/jQuery.noConflict/
Помогите пожалуйста, есть таблица в базе MySQL, при добавлении нового элемента, нужно отобразить это на странице(например: было 10 стало N), сделал с вызовом по onclick=”senddata();”, всё работает, но как этого же добиться чтобы div сам обновлялся без всяких телодвижений, пока есть идеи вызвать по таймеру, но может есть какието более лояльные решения?
а чем вам собственно не нравится settimeout?
setTimeout('functionname()', 1000);и все дела.
так и сделал не устраивает то что api-bitrix много ресурсов кушает, боюсь что тормоза начнуться, ладно будем искать значит на форуме битрикса. Спасибо
без поедания ресурсов не обойдешься – везде надо чем то жертвовать, я не думаю, что вы найдете что либо, что ест меньше ресурсов :)