Ребятки, я снова к вам, за советом. Задавала до этого 1 единственный вопрос, мне ответили - моему счастью не было предела, так как ошибка была найдена, очень надеюсь на ваши светлые умы. Только изучаю js, поэтому есть огромные пробелы, точнее один огромный пробел и кусочками знания появляются. Суть дела: У меня есть возможность на странице загрузить фалы, они загружаются без перезагрузки. Далее, есть кнопка которая отправляет эти загруженные файлы на почту, файлы во вложении. Все работает. Но при клике на кнопку "Отправить файлы заказчику", происходит перезагрузка страницы. Как избежать перезагрузки? Скрин для понимания http://prntscr.com/p7kgqy Как это выглядит Код кнопки для отправки файлов HTML: <button class="btn btn-success" id="btn_submit" type="submit">Отправить файл(ы) заказчику</button> Событие на кнопку "Отправить файлы" на js (все отлично отправляется в файл send_file_to_mail.php) Код (Javascript): <script> $(document).ready(function(){ $('#btn_submit').click(function(){ // собираем данные с формы var zakaz_id=$('#zakaz_id').val(); var comment_call=$('#comment_call').val(); var mail=$('#mail').val(); // отправляем данные $.ajax({ url: "send_file_to_mail.php", // куда отправляем type: "post", // метод передачи dataType: "json", // тип передачи данных data: { // что отправляем "zakaz_id": zakaz_id, "comment_call":comment_call, "mail":mail } }); }); }); </script> Код в файле send_file_to_mail.php PHP: $msg_box = ""; // в этой переменной будем хранить сообщения формы $errors = array(); // контейнер для ошибок // проверяем корректность полей // если форма без ошибок if(empty($errors)){ $ID= isset($_POST['zakaz_id'])?mysqli_real_escape_string($mysql, trim($_POST['zakaz_id'])):''; $date = time(); $res = mysqli_query($mysql, " SELECT * FROM CRM_zakaz_file WHERE CRM_zakaz_file.zakaz_id='".$ID."'") or die(trigger_error(mysqli_error($mysql).' - zakaz_new_EDIT')); while ($arr = mysqli_fetch_assoc($res)) { $filename = '/путь/'.$arr['file']; //Имя файла для прикрепления $to = $_POST['mail']; //Кому $from = "мое название на латиницу"; //От кого $subject = "Результаты анализов"; //Тема $message = $_POST['comment_call']; //Текст письма $boundary = "---"; //Разделитель /* Заголовки */ $headers = "From: $from\nReply-To: $from\n"; $headers .= "Content-Type: multipart/mixed; boundary=\"$boundary\""; $body = "--$boundary\n"; /* Присоединяем текстовое сообщение */ $body .= "Content-type: text/html; charset='utf-8'\n"; $body .= "Content-Transfer-Encoding: quoted-printablenn"; $body .= "Content-Disposition: attachment; filename==?utf-8?B?".base64_encode($filename)."?=\n\n"; $body .= $message."\n"; $body .= "--$boundary\n"; $file = fopen($filename, "r"); //Открываем файл $text = fread($file, filesize($filename)); //Считываем весь файл fclose($file); //Закрываем файл /* Добавляем тип содержимого, кодируем текст файла и добавляем в тело письма */ $body .= "Content-Type: application/octet-stream; name==?utf-8?B?".base64_encode($filename)."?=\n"; $body .= "Content-Transfer-Encoding: base64\n"; $body .= "Content-Disposition: attachment; filename==?utf-8?B?".base64_encode($filename)."?=\n\n"; $body .= chunk_split(base64_encode($text))."\n"; $body .= "--".$boundary ."--\n"; mail($to, $subject, $body, $headers); //Отправляем письмо // выведем сообщение об успехе $msg_box = "<span style='color: green;'>Сообщение успешно отправлено!</span>"; $query_count = "INSERT INTO CRM_HISTORY_SEND_FILE SET zakaz_id='".$ID."', file='".$arr['file']."', message='".$_POST['comment_call']."', mail='".$_POST['mail']."', time='".$date."'"; mysqli_query($mysql,$query_count) or die('Ошибка добавления CRM_HISTORY_SEND_FILE'); $id = mysqli_insert_id($mysql); } die ("<meta http-equiv=refresh content='0; url=?page=zakaz_new&add=1&edit=$ID'>"); } else { // если были ошибки, то выводим их $msg_box = ""; foreach($errors as $one_error){ $msg_box .= "<span style='color: red;'>$one_error</span><br/>"; } } // делаем ответ на клиентскую часть в формате JSON echo json_encode(array( 'result' => $msg_box )); Итог: Файлы на почте, все хорошо, но перезагрузка при клике на кнопку "Отправить файлы". Как избегается перезагрузка, по моей логике ее не должно быть, я ведь отправляю методом ajax. Подскажите пожалуйста.
Собирайте данные с формы так: Код (Javascript): $("#idForm").submit(function(e) { //указать вашу форму e.preventDefault(); // отменит перезагрузку var form = $(this); var url = form.attr('action'); //урл указанный в форме $.ajax({ type: "POST", url: url, data: form.serialize(), // вся информация с формы success: function(data) { } }); });
Взяла ваш код и сделала так. var url = form.attr('action'); //здесь не знаю, что вставить, так как нет формы в этом блоке, есть одна огромная форма, которая содержит все данные страницы, помимо отправки на почту данных, у меня на этой странице есть данные клиента, данные заказа. Вот как выглядит вся страница http://prntscr.com/p7kpll Код (Javascript): <script> $("#btn_submit").submit(function(e) { //указать вашу форму e.preventDefault(); // отменит перезагрузку var form = $(this); var url = form.attr('action'); //?????? var zakaz_id=$('#zakaz_id').val(); var comment_call=$('#comment_call').val(); var mail=$('#mail').val(); $.ajax({ type: "POST", url: "send_file_to_mail.php", data: form.serialize(), // вся информация с формы success: function(data) { "zakaz_id": zakaz_id, "comment_call":comment_call, "mail":mail } }); }); </script> Раздел Файлы клиента выглядит так HTML: <!-- Файлы клиента --> <fieldset id="form-p-0" role="tabpanel" aria-labelledby="form-h-0" class="body current" aria-hidden="false"> <div class="grayclass col-lg-12"> <h2><strong>Файлы заказчика</strong></h2> <?php if (isset($_GET['edit']) AND !empty($_GET['edit'])) { ?> <div class="col-lg-8"> <div class="col-md-12 well well-sm"> <iframe width="100%" id="frame1" style="min-height:440px;" class="embed-responsive-item autoHeight" seamless src="https://<?php echo $_SERVER['HTTP_HOST']; ?>/programm_files/<?php echo isset($arr['id'])?'pozaddfile_edit_new.php?zakaz_id='.$arr['id'].'&poz_id=0': 'pozaddfile_new.php?file=file'; ?>" frameborder="0" allowfullscreen scrolling="yes"> </iframe> </div> </div> <div class="col-lg-4"> <textarea autocomplete="off" name="comment_call" id="comment_call" class="form-control" rows="2"> Добрый день, <?php echo isset($arr['client'])?$arr['client']:'';?>. Результаты Ваших анализы готовы. </textarea> <p class="smallsh"> Файл будет отправлен на почту заказчика: <?php echo isset ($arr['mail'])?$arr['mail']:''; ?> </p> <br> <button class="btn btn-success" id="btn_submit" type="submit">Отправить файл(ы) заказчику</button> <div class="clearfix mtop"></div> <br><strong class="hist_file"> История отправки файлов </strong> <?php $s=1; $resultf = mysqli_query($mysql, "SELECT * FROM CRM_HISTORY_SEND_FILE WHERE CRM_HISTORY_SEND_FILE.zakaz_id='". intval($_GET['edit']) ."' ") or die(trigger_error(mysqli_error($mysql).' - CRM_HISTORY_SEND_FILE')); while ($arr_file = mysqli_fetch_assoc($resultf)) { ?> <p> <?php echo (isset($arr_file['time']) AND !empty($arr_file['time']))?$s.') '.date('d.m.y H:m',$arr_file['time']):'';?> <?php echo isset($arr_file['file'])?' <strong>Файл: </strong>'.$arr_file['file']:'';?> <?php $s++; } mysqli_free_result($resultf); ?> </div> <?php } ?> </fieldset> <hr>
Код (Javascript): <script> $(document).ready(function(){ $('#btn_submit').click(function(e){ e.preventDefault(); // собираем данные с формы var zakaz_id=$('#zakaz_id').val(); var comment_call=$('#comment_call').val(); var mail=$('#mail').val(); // отправляем данные $.ajax({ url: "send_file_to_mail.php", // куда отправляем type: "post", // метод передачи dataType: "json", // тип передачи данных data: { // что отправляем "zakaz_id": zakaz_id, "comment_call":comment_call, "mail":mail } }); }); }); </script>
зачем из ajax ты предаешь json , если в обработчике даже не думаешь его не декодировать? Если в ajax ты прописал dataType json , то в обработчик отправится json.
Код (Javascript): $( 'body' ).on( 'submit', 'form', function ( e ) { e.preventDefault(); var obj = new FormData( $( this ).get(0) ); $.ajax( { url: $( this ).attr( 'action' ), type: $( this ).attr( 'method' ), contentType: false, processData: false, data: obj, dataType: 'JSON', success: function ( json ) { # действие при успехе } }); }) После не нужно над каждой строчкой комментировать вопросами. Есть Поисковик, есть документация.
Кнопку с type="submit" и полями "накрой" формой, т.е. HTML: <form method="POST" onsubmit="return false;"> <!--Поля для заполнения--> <button class="btn btn-success" id="btn_submit" type="submit">Отправить файл(ы) заказчику</button> </form> Либо просто HTML: <button class="btn btn-success" id="btn_submit" type="button">Отправить файл(ы) заказчику</button> А здесь dataType:"json" - лишнее. Код (Javascript): $(document).ready(function(){ $('#btn_submit').click(function(){ // собираем данные с формы var zakaz_id=$('#zakaz_id').val(); var comment_call=$('#comment_call').val(); var mail=$('#mail').val(); // отправляем данные $.ajax({ url: "send_file_to_mail.php", // куда отправляем type: "post", // метод передачи data: { // что отправляем "zakaz_id": zakaz_id, "comment_call":comment_call, "mail":mail } }); }); });
с формой надо работать как с обычной формой и не нужно драть из нее элементы по частям. Мой код ко всем стандартным формам идет, даже с + дальнейшее использование контента после переработки js скриптом вполне не лишнее, нужно вернуть отметку что все ок и по 20 раз больше не жать и т.д. --- Добавлено ---