Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.71/7: Рейтинг темы: голосов - 7, средняя оценка - 4.71
1 / 1 / 0
Регистрация: 19.08.2013
Сообщений: 163
1

Подскажите, как прикрутить ajax?

25.09.2015, 15:57. Показов 1364. Ответов 15
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Здравствуйте. После двухнедельного искания формы с отправкой нескольких файлов на почту без перезагрузки, я её всё таки нашел. Но вот осталась одна проблема, как сюда добавить ajax? Посмотрите пожалуйста на код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<form enctype="multipart/form-data" method="post" id="feedback-form">
<label for="nameFF">Имя:</label>
<input type="text" name="nameFF" id="nameFF" required placeholder="например, Иван Иванович Иванов" x-autocompletetype="name" class="w100 border">
<label for="contactFF">Email:</label>
<input type="email" name="contactFF" id="contactFF" required placeholder="например, ivan@yandex.ru" x-autocompletetype="email" class="w100 border">
<label for="fileFF">Прикрепить файл:</label>
<input type="file" name="fileFF[]" multiple id="fileFF" class="w100">
<label for="messageFF">Сообщение:</label>
<textarea name="messageFF" id="messageFF" required rows="5" placeholder="Детали заявки…" class="w100 border"></textarea>
<br>
<input value="Отправить" type="submit" id="submitFF">
</form>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
document.getElementById('feedback-form').addEventListener('submit', function(evt){
  var http = new XMLHttpRequest(), f = this;
  evt.preventDefault();
  http.open("POST", "contacts.php", true);
  http.onreadystatechange = function() {
    if (http.readyState == 4 && http.status == 200) {
      alert(httfp.responseText);
      if (http.responseText.indexOf(f.nameFF.value) == 0) { // очистить поле сообщения, если в ответе первым словом будет имя отправителя
        f.messageFF.removeAttribute('value');
        f.messageFF.value='';
      }
    }
  }
  http.onerror = function() {
    alert('Извините, данные не были переданы');
  }
  http.send(new FormData(f));
}, false);
PHP
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
36
37
38
39
40
41
42
43
44
45
46
47
<?php
if (isset ($_POST['contactFF'])) {
  $to = "@gmail.com"; // поменять на свой электронный адрес
  $from = $_POST['contactFF'];
  $subject = "Заполнена контактная форма с ".$_SERVER['HTTP_REFERER'];
  $message = "Имя: ".$_POST['nameFF']."\nEmail: ".$from."\nIP: ".$_SERVER['REMOTE_ADDR']."\nСообщение: ".$_POST['messageFF'];
  $boundary = md5(date('r', time()));
  $filesize = '';
  $headers = "MIME-Version: 1.0\r\n";
  $headers .= "From: " . $from . "\r\n";
  $headers .= "Reply-To: " . $from . "\r\n";
  $headers .= "Content-Type: multipart/mixed; boundary=\"$boundary\"\r\n";
  $message="
Content-Type: multipart/mixed; boundary=\"$boundary\"
 
--$boundary
Content-Type: text/plain; charset=\"utf-8\"
Content-Transfer-Encoding: 7bit
 
$message";
  for($i=0;$i<count($_FILES['fileFF']['name']);$i++) {
     if(is_uploaded_file($_FILES['fileFF']['tmp_name'][$i])) {
         $attachment = chunk_split(base64_encode(file_get_contents($_FILES['fileFF']['tmp_name'][$i])));
         $filename = $_FILES['fileFF']['name'][$i];
         $filetype = $_FILES['fileFF']['type'][$i];
         $filesize += $_FILES['fileFF']['size'][$i];
         $message.="
 
--$boundary
Content-Type: \"$filetype\"; name=\"$filename\"
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename=\"$filename\"
 
$attachment";
     }
   }
   $message.="
--$boundary--";
 
  if ($filesize < 10000000) { // проверка на общий размер всех файлов. Многие почтовые сервисы не принимают вложения больше 10 МБ
    mail($to, $subject, $message, $headers);
    echo $_POST['nameFF'].', Ваше сообщение получено, спасибо!';
  } else {
    echo 'Извините, письмо не отправлено. Размер всех файлов превышает 10 МБ.';
  }
}
?>
Я знаю, что по средствам ajax можно сделать то что я хочу, но увы знаний у меня не хватает... В конце я хочу получить такой вид: человек нажимает на кнопку "отправить" и появляется анимация загрузки и потом выводится результат. либо положительный, либо отрицательный.

Пока что есть такой код.

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$("#feedback-form").submit(function() {
var str = $(this).serialize();
$.ajax({
type: "POST",
url: "contacts.php",
data: str,
success: function(msg) {
if(msg == 'ok') {
 $(".result").toggleClass("dis"); return false;
}
else {
 $(".notresult").toggleClass("dis"); return false;
}
}
});
return false;
});
Но он, как вы понимаете, не получает msg == 'ok' . Письма уходят, но только почему то без файлов... Подскажите, как ему передать msg == 'ok' и не терять функцию отправки файлов?

P.S. Еще остаётся вопрос, как добавить анимацию загрузки? В какую строчку его засунуть ?

Добавлено через 17 часов 36 минут
Моя форма рабочая, только я не могу её видоизменить. Jquery ajax подключить не могу, и не могу добавить анимацию загрузки.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
25.09.2015, 15:57
Ответы с готовыми решениями:

AJAX: Как прикрутить счетчик товаров?
Здравствуйте! Есть ajax добавление товара в корзину. Есть php счетчик отображающий кол-во...

подскажите с AJAX
Если html5 фаворит и вытесняет xhtml и, то есть xml, а JavaScript базируется технология AJAX,...

подскажите пожалуйста jQuery + ajax
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;&gt;&lt;/script&gt; &lt;script language=&quot;javascript&quot;&gt; ...

Ajax подгрузка контента подскажите
Всем доброго времени суток. Взялся за изучение ajax в итоге возникло 2 вопроса: предположим есть...

15
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
25.09.2015, 16:03 2
Цитата Сообщение от drkrol Посмотреть сообщение
Jquery ajax подключить не могу
Так вы же вроде бы его используете: "Пока что есть такой код."
Загружать файлы средствами Ajax, можно с помощью объекта FormData. Вот тут описано, как это можно сделать с помощью метода jQuery $.ajax(), без проблем это же реализуется на чистом JS. Нужно только учитывать, что объект FormData не такой уж кроссбраузерный. К примеру, IE ниже 10-ой версии его не поддерживает.
0
1 / 1 / 0
Регистрация: 19.08.2013
Сообщений: 163
25.09.2015, 16:26  [ТС] 3
Цитата Сообщение от Lazy_Den Посмотреть сообщение
Так вы же вроде бы его используете: "Пока что есть такой код."
я его не использую. Но он, как вы понимаете, не получает msg == 'ok' . Письма уходят, но только почему то без файлов... Подскажите, как ему передать msg == 'ok' и не терять функцию отправки файлов?
0
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
25.09.2015, 18:08 4
drkrol, что-то я запутался слегка. Давайте по порядку:
1. Вы используете вариант на чистом JS? Если да, то вопрос о FormData снимается, т.к. он у вас там используется.
2. В консоли ошибки есть?
3. Что приходит ответом на ajax-запрос (посмотреть в той же консоли)
4. Вернуть ответ строкой "ok" можно с помощью echo, но у вас передаются другие данные (строка 42, 44).
5. В php Content-Type, Content-Transfer-Encoding, Content-Disposition - вроде как должны быть в заголовках, а вы их добавляете в тело сообщения. Да и можно не особо мучаясь, использовать библиотеку PHPMailer

Добавлено через 1 час 18 минут
drkrol, в общем, пока вы в раздумьях, попробуйте изменить php-код на этот:
PHP
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
36
37
38
39
40
41
42
43
44
45
46
47
48
<?php
$usermail = filter_input(INPUT_POST, 'contactFF', FILTER_VALIDATE_EMAIL);
if( $usermail ) {
    $subject = 'Письмо со вложением';
    $mailto = 'mymail@gmail.com'; // кому отправляем
    $message = 'Сообщение'; // Тектовое сообщение
    $separator = md5(time());
    $mime_boundary = "==Multipart_Boundary_x{$separator}x";
    $eol = PHP_EOL;
    
    // Заголовки
    $headers = 'From: Вася Пупкин <'.$usermail.'>' . $eol;
    $headers .= 'MIME-Version: 1.0' . $eol;
    $headers .= 'Content-Type: multipart/mixed; boundary=' . $separator . $eol . $eol;
    $headers .= 'Content-Transfer-Encoding: 7bit' . $eol;
    $headers .= 'This is a MIME encoded message.' . $eol . $eol;
    
    // Сообщение
    $headers .= '--' . $separator . $eol;
    $headers .= 'Content-Type: text/plain; charset=utf-8' . $eol;
    $headers .= 'Content-Transfer-Encoding: 8bit' . $eol . $eol;
    $headers .= $message . $eol . $eol;
    
    // Прикрепляем файлы
    $files = $_FILES['fileFF'];
    for($i = 0; $i < count($files['name']); $i++) {
        if(is_uploaded_file($files['tmp_name'][$i])) {
            $file = $files['tmp_name'][$i];
            $filename = $files['name'][$i];
            $filetype = $files['type'][$i];
            
            $content = chunk_split(base64_encode(file_get_contents($file)));
            $headers .= '--' . $separator . $eol;
            $headers .= 'Content-Type: '.$filetype.'; name=' . $filename . $eol;
            $headers .= 'Content-Transfer-Encoding: base64' . $eol;
            $headers .= 'Content-Disposition: attachment; filename=' . $filename . $eol . $eol;
            $headers .= $content . $eol . $eol;
            $headers .= '--' . $mime_boundary . $eol;
            
        }
    }   
    // Отправка сообщения
    if (mail($mailto, $subject, '', $headers)) {
        echo 'ok';
    } else {
        echo 'not ok';
    }
}
0
33 / 9 / 11
Регистрация: 20.05.2015
Сообщений: 121
25.09.2015, 18:39 5
drkrol, вы привели в начале функцию
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
document.getElementById('feedback-form').addEventListener('submit', function(evt){
  var http = new XMLHttpRequest(), f = this;
  evt.preventDefault();
  http.open("POST", "contacts.php", true);
  http.onreadystatechange = function() {
    if (http.readyState == 4 && http.status == 200) {
      alert(httfp.responseText);
      if (http.responseText.indexOf(f.nameFF.value) == 0) { // очистить поле сообщения, если в ответе первым словом будет имя отправителя
        f.messageFF.removeAttribute('value');
        f.messageFF.value='';
      }
    }
  }
  http.onerror = function() {
    alert('Извините, данные не были переданы');
  }
  http.send(new FormData(f));
}, false);
А потом сказали, что ajax там нет, что неправда, он присутствует.

Смотрите, объект XMLHttpRequest как раз и занимается реализацией ajax. Он отправляет форму без перезагрузки страницы, а параметр true в строке
Javascript
1
http.open("POST", "contacts.php", true);
как раз и определяет, что запрос на сервер будет происходить асинхронно (это и есть Ajax - асинхронный javascript).

То, что вы написали потом - это тоже код, реализующий ajax, только уже с использованием сторонней библиотеки JQuery
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$("#feedback-form").submit(function() {
var str = $(this).serialize();
$.ajax({
type: "POST",
url: "contacts.php",
data: str,
success: function(msg) {
if(msg == 'ok') {
 $(".result").toggleClass("dis"); return false;
}
else {
 $(".notresult").toggleClass("dis"); return false;
}
}
});
return false;
});
Но зачем было переписывать уже готовую первую функцию?

Добавлено через 8 минут
Тем более, что вторая функция не передает файлы.
0
1 / 1 / 0
Регистрация: 19.08.2013
Сообщений: 163
25.09.2015, 19:19  [ТС] 6
1. да, но я хочу использовать jquery ajax, потому что я хочу использовать $(".result").toggleClass("dis"); return false; и как то не очень выглядит простой js и jquery вместе, поэтому, я подумал, что ajax jquery лучше. Так хотя бы понятно, где положительный результат, а где отрицательный.
2. Нету.
3. У меня в консоли кроме того, что не найден favicon ничего не написано...
5. Я уже успел намучиться с phpmailer... Так что ajax лучше. наверно...
6. Не совсем понял зачем вы переписали php. хотя он имел не самый лучший вид. у вас всё по полочкам)
7. ajax jquery не отправляет файлы. Я так понимаю, что дело в formData. Если я в data напишу formdata, то не только файлы, но и письма отправляться не будут. Нужно что то написать в data и всё. И форма будет работать. наверно...
0
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
25.09.2015, 20:24 7
drkrol, в общем, чувствую, что будем ходить вокруг да около еще долго, поэтому я вам собрал всё вместе, в js два варианта: на чистом JS и jQuery (выберите любой). Всё проверено и работает. Только не забудьте вписать свой email! Данные, которые надо отправлять кроме файлов, допишите к переменной $message.
Вложения
Тип файла: rar mail.rar (33.7 Кб, 32 просмотров)
0
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
25.09.2015, 20:25 8
P.S. И не забывайте фильтровать все данные, которые приходят от клиента!!!
0
33 / 9 / 11
Регистрация: 20.05.2015
Сообщений: 121
25.09.2015, 20:30 9
drkrol,
По 1 - гуглите jquery ajax files тогда.
по 2 - Если вы про результат работы, то первая функция (она написана на чистом javascript) тоже выдавала результат успешно ли прошел запрос или нет.

По 3 - Я пробовал ваш первый скрипт в совокупности с первой javascript функцией - ответ на ajax-запрос приходит нормально, письма отправлялись.

По 5 - php-mailer никак не связан с ajax))) Ajax работает на стороне клиента и занимается обменом информацией с сервером.
Php-mailer - это php-шная библиотека для отсылания писем, вам предлагали ее использовать вместо стандартной функции mail() только потому, что по сравнению с mail в php-mailer файл легче прикрепить к письму)

По 6 - ну а переписали php потому, что в старом варианте заголовки каким-то образом оказались в теле письма. Вы откуда этот скрипт брали?

Добавлено через 3 минуты
Lazy_Den, а что фильтровать, то есть, как вы их предложили фильтровать?
0
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
25.09.2015, 20:46 10
Цитата Сообщение от b_cat Посмотреть сообщение
как вы их предложили фильтровать?
Я ничего не предлагал. А способы фильтрации данных, пусть выбирает сам ТС. Если говорить о моих предпочтениях, то это функции filter_input(), filter_input_array() и другие фильтрующие функции
0
33 / 9 / 11
Регистрация: 20.05.2015
Сообщений: 121
25.09.2015, 20:50 11
Lazy_Den, понятно, вроде как валидация и проверка переменных.
0
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
25.09.2015, 20:54 12
Цитата Сообщение от b_cat Посмотреть сообщение
валидация и проверка
Поправка: валидация и/или очистка. Зависит от типа фильтра
1
33 / 9 / 11
Регистрация: 20.05.2015
Сообщений: 121
25.09.2015, 21:28 13
Lazy_Den, я функции фильтрации не использовал (хотя бы потому, что не знал о них)), в основном, использовал подход с валидацией на клиенте + проверка на сервере.

К вопросу валидации введенного пользователем email в вашем примере - ведь это никак не влияет на работу скрипта, этот email указывается только как контактная информация. Или вы с расчетом на то, чтобы в будущем можно было добавить его в reply-to?
0
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
25.09.2015, 21:40 14
b_cat, Если речь идёт только об email и вам безразлично, какой укажет пользователь, т.к. вы его нигде использовать не будете, то можно и забить на валидацию. Валидацию, но не фильтрацию в глубоком понимании этого слова! И тут плавно переходим дальше:
Цитата Сообщение от b_cat Посмотреть сообщение
использовал подход с валидацией на клиенте + простейшие проверки на сервере
Очень зря. Проверка введенных данных на клиенте - это в основном для удобства пользователя, а проверка на сервере - это чтоб разработчик мог по ночам спать спокойно. Данные которые отправляются из формы, можно отправить и без самой формы, даже не заходя на сайт. И что это будут за данные, какой они могут нанести вред - уже вопрос, который должен волновать вас, как разработчика. Посему, независимо от того - есть каки-то проверки на клиенте или нет - а проверка на сервере должна быть обязательно и достаточно серьёзной.
0
33 / 9 / 11
Регистрация: 20.05.2015
Сообщений: 121
25.09.2015, 22:58 15
Lazy_Den, согласен с вами, так я же не говорю, что нет. Поэтому я и использовал проверку данных на сервере, только без использования функций фильтров в php.
Что касается валидации на клиенте - это да, она нужна в основном для того, чтобы пользователь не ошибся, не сделал опечатку, не ввел по ошибке не то, что нужно.

Добавлено через 2 минуты
А вообще, спасибо, что разъяснили об этих функциях (фильтрации).

Добавлено через 14 минут
drkrol, у вас заработало решение, которое вам предложил Lazy_Den?
Если да, то можно добавить индикатор отправления письма.
0
1 / 1 / 0
Регистрация: 19.08.2013
Сообщений: 163
26.09.2015, 23:00  [ТС] 16
Да. Благодарю! Всё работает как часы. Я сразу не ответил, потому что хотел под свои нужны допилить, а потом уже отчитаться о результате. Но у меня каждую минуту появляются новые проблемы с кодом. Сейчас вот, по своей неосторожности потерял свой js и php который относился к nouislider. Удалил... Теперь смотрю на код и вспомнить не могу, как же оно работало? От nouislider не уходят значения на почту. Пытаюсь заново всё собрать. Если вдруг вы знаете как можно отправить переменные со span, но без input hidden, посмотрите эту тему Как отправить переменную nouislider на почту не прибегая к input hidden? ... Еще раз спасибо вам!
0
26.09.2015, 23:00
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
26.09.2015, 23:00
Помогаю со студенческими работами здесь

Ребята подскажите какую Ajax библиотеку лучше выбрать?
Ребята подскажите какую Ajax библиотеку лучше выбрать? Пытался сам разобраться в этом вопросе, но...

Как тут прикрутить settimeout?
&lt;img id='Img1' src='online.jpg' width='432' height='100' style='position:absolute; top:348px;...

Как прикрутить cookies к меню на jQuery
Здравствуйте программисты. Никак не могу прикрутить куки к меню с выпадающим списком (аккордионом)...

Подскажите как прикрутить переменную?
Ну говоря проще код такой: int j; j = 1; Table1-&gt;Active = true; Вот вместо Table1-&gt;Active =...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
16
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru