Правила     Закладки     Карма    Календарь    Журналы    Помощь    Поиск    PDA    Чат   
        СМС-ки
   
Пейджер выключен!
 
Фильтр авторов:    показать 
  скрыть
  Ответ в темуСоздание новой темыСоздание опроса

> Отправка формы без перезагрузки страницы, Раздел Статьи JQuery,Ajax / Полезные приёмы
Игорь_Vasinsky  
 ۩  [x]    Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Лысый и злой
******

Профиль
Журнал
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 25989
Пользователь №: 21350
На форуме: 6 лет, 8 месяцев, 23 дня
Карма: 725

Не курю:
1 год, 2 месяца, 9 дней


Отправка формы без перезагрузки страницы с использование JQuery
Один из возможных вариантов с использованием функции ajaxForm(), ajaxSumbit()

Цитата
Плагин jQuery Form позволяет не только сделать новые ajax-формы, но и довольно просто «проапгрейдить» уже существующие формы таким образом, чтобы их можно было использовать вместе с Ajax. Основные методы, ajaxForm и ajaxSubmit, собирают информацию из элементов формы, поддерживают многочисленные опции, использование которых даст полный контроль над передачей данных.


При использовании данного метода, данные из формы буду передоваться без перезагрузки страницы,
для этого я буду использовать jQuery + plugin jquery.form.js http://malsup.com/jquery/form/

Для примера мы будем использовать форму для добавления комментариев на сайт, (а вообще у этого метода очень широкая область применения).

Итак у нас есть страница с формой form.html

<html>
<head>
<title>
Отправьте нам свой комментарий</title>
<script
language="javascript" src="/jquery.min.js"></script>
<script
language="javascript" src="/jquery.form.js"></script>
<script
language="javascript" src="/myscript.js"></script>
</head>
<body>
<h1>
Добавить комментарий:</h1>
<form
id="myform" action="/addcomment.php" method="POST">
Ваше имя: <input type="text" name="user"/><br />
<textarea
name="comment"></textarea><br />
<input
type="submit" value="Отправить"/>
</form>

<!--В этот блок мы будем выводить результат выполнения обработчика PHP-->
<div id="result"></div>
</body>
</html>


Обработчик формы addcomment.php:
<?php
//Обрабатываем $_POST
//Проверяем нажатие simbit
//Записываем в БД или в файл

//Выводим сообщение об удачном завершении
//Или
//Сообщаем пользователю об ошибке

?>


А вот и "волшебный" скрипт, который и запустит наш обработчик php, без перезагузки страницы

JS скрипт myscript.js

1 вариант с ajaxForm()

$(document).ready(function() { 

//Вешаем на нашу форму функцию ajax.Form()
$('#myform').ajaxForm({
//Результат работы обработчика выведем в нашем div
target: '#result',
//Укажем путь и сам обработчик, можно неиспользовать - если в самой форме явно указан обработчик в action
url: '/addcomment.php',
//На время обработки данных обработчикам, до окончания обрабодки повесим анимацию (допустим gif - loading...)
beforeSend: function()
{
$('#result').html("<img src='/images/load.gif' border='0'/>")
},
//Успешное окончание обработки
success: function() {
$('#result').fadeIn('slow');
}
//Так же есть доп. опции - ссылка ниже
});
});

2 вариант с ajaxSumbit()

$(document).ready(function() { 

var option{
target: '#result',
url: '/addcomment.php',
beforeSend: function()
{
$('#result').html("<img src='/images/load.gif' border='0'/>")
},
success: function()
{
$('#result').fadeIn('slow');
}
}

$("#myform").ajaxSubmit(options);
});
});



В результате: как обработчик вернёт результат, а myscript.js вставит его в <div id="result"></div>


Gif-анимацию можно подобрать здесь http://www.ajaxload.info/
Подробно о применении плагина можно почитать на http://jquery.malsup.com/form/


--------------------
Халявные ответы кончились.
Если нужен готовый код - готовьтесь заплатить.
Райкин тоже был артист

Возле дома был сарай
А когда всё хорошо
Можно просто покурить

user posted image
http://ufa102.xyz/
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
xlebosol  
Дата
Цитировать сообщение

Пользователь сейчас на форуме



Знатный быдлокодер
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 337
Пользователь №: 32761
На форуме: 4 года, 5 месяцев, 17 дней
Карма: 19




Спасибо за пример. Можно добавить еще в форме (onSubmit="return false;") или в success, чтобы не улетало.
PMПисьмо на e-mail пользователюICQ
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
m4a1fox  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Журнал
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 5211
Пользователь №: 24565
На форуме: 6 лет, 1 месяц, 10 дней
Карма: 60

Не пью :
4 года, 2 месяца, 1 день


Если не ошибаюсь. Самое пичалька в том, что скорее всего все это не будет работать в IE8/IE9
PMПисьмо на e-mail пользователюСайт пользователяICQ
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Игорь_Vasinsky  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Лысый и злой
******

Профиль
Журнал
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 25989
Пользователь №: 21350
На форуме: 6 лет, 8 месяцев, 23 дня
Карма: 725

Не курю:
1 год, 2 месяца, 9 дней


ну если глянуть на дату первого поста)

сейчас уже есть и $.post, $.get, $.ajax и прочее.


--------------------
Халявные ответы кончились.
Если нужен готовый код - готовьтесь заплатить.
Райкин тоже был артист

Возле дома был сарай
А когда всё хорошо
Можно просто покурить

user posted image
http://ufa102.xyz/
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
m4a1fox  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Журнал
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 5211
Пользователь №: 24565
На форуме: 6 лет, 1 месяц, 10 дней
Карма: 60

Не пью :
4 года, 2 месяца, 1 день


Игорь_Vasinsky
Sorry... на дату не глянул.
Цитата
сейчас уже есть и $.post, $.get, $.ajax и прочее.

Это так же не сработает!
PMПисьмо на e-mail пользователюСайт пользователяICQ
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Игорь_Vasinsky  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Лысый и злой
******

Профиль
Журнал
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 25989
Пользователь №: 21350
На форуме: 6 лет, 8 месяцев, 23 дня
Карма: 725

Не курю:
1 год, 2 месяца, 9 дней


ну для этого случая - можно юзать стандартную функцию AJAX wink.gif


--------------------
Халявные ответы кончились.
Если нужен готовый код - готовьтесь заплатить.
Райкин тоже был артист

Возле дома был сарай
А когда всё хорошо
Можно просто покурить

user posted image
http://ufa102.xyz/
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Гость_cupoma58  
Дата
Цитировать сообщение


Гость пожелал остаться неизвестным

Unregistered









если-бы ещё на коды взглянуть...(jquery.min.js и jquery.form.js)
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Игорь_Vasinsky  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Лысый и злой
******

Профиль
Журнал
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 25989
Пользователь №: 21350
На форуме: 6 лет, 8 месяцев, 23 дня
Карма: 725

Не курю:
1 год, 2 месяца, 9 дней


Гость_cupoma58
http://malsup.com/jquery/form/



--------------------
Халявные ответы кончились.
Если нужен готовый код - готовьтесь заплатить.
Райкин тоже был артист

Возле дома был сарай
А когда всё хорошо
Можно просто покурить

user posted image
http://ufa102.xyz/
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Гость  
Дата
Цитировать сообщение


Гость пожелал остаться неизвестным

Unregistered









Спасибо за пример!
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Гость_Алексей  
Дата
Цитировать сообщение


Гость пожелал остаться неизвестным

Unregistered









А как быть, если нужно задействовать кнопку добавления товара со странички с upsell на сайте и чтоб данные имя и телефон не слетели при переходе на неё, да добавлялись в случае заказа клиентом дополнительного товара? Вернее там 2 варианта:

1. Посетитель вводит имя и телефон в форме заказа и кликает по кнопке "заказать"-его перебрасывает на страницу с доп. товаром и там есть кнопка "добавить в посылку", после чего данные (имя, телефон и название доп. товара) летят на e-mail.

2. Либо посетитель после ввода имени и телефона в форме заказа также перенаправляется на страницу с доп товаром, но отказывается от дополнительной покупки (там есть соответствующая кнопка). И уходит с сайта, а данные с формы заказа без доп. товара летят на e-mail.

Как всё это прописать в php-обработчике и вообще осуществить? Я в программировании ничего не понимаю.
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Игорь_Vasinsky  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Лысый и злой
******

Профиль
Журнал
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 25989
Пользователь №: 21350
На форуме: 6 лет, 8 месяцев, 23 дня
Карма: 725

Не курю:
1 год, 2 месяца, 9 дней


Гость_Алексей
ну, а чем не подходит вариант сохранения этих данных в сессию?

Цитата
Я в программировании ничего не понимаю.

так нужен тот, кто понимает.


--------------------
Халявные ответы кончились.
Если нужен готовый код - готовьтесь заплатить.
Райкин тоже был артист

Возле дома был сарай
А когда всё хорошо
Можно просто покурить

user posted image
http://ufa102.xyz/
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Гость_Алексей  
Дата
Цитировать сообщение


Гость пожелал остаться неизвестным

Unregistered









Проблема решена.
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
sergeiss  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Сидел он, дум великих полон - и вдаль глядел
******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 14974
Пользователь №: 4190
На форуме: 8 лет, 10 месяцев, 1 день
Карма: 443




Цитата (Гость_Алексей @ 7.02.2016 - 04:44)
Я в программировании ничего не понимаю

Ну, вобщем-то, надо искать того, кто понимает smile.gif

Цитата (Гость_Алексей @ 7.02.2016 - 04:44)
А как быть, если нужно задействовать кнопку добавления товара со странички с upsell на сайте и чтоб данные имя и телефон не слетели при переходе на неё, да добавлялись в случае заказа клиентом дополнительного товара?

Можно использовать localStorage в JavaScript.


--------------------
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
PMICQ
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
  Быстрый ответ
Информация о Госте
Введите Ваше имя
Кнопки кодов
Для вставки цитаты, выделите нужный текст и
НАЖМИТЕ СЮДА
Введите сообщение
Смайлики
:huh:  :o  ;) 
:P  :D  :lol: 
B)  :rolleyes:  <_< 
:)  :angry:  :( 
:unsure:  :blink:  :ph34r: 
     
Показать всё

Опции сообщения  Включить смайлики?
 Включить подпись?
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:

Опции темы Ответ в темуСоздание новой темыСоздание опроса