Javascript.RU

Ajax отправка формы. Отправка формы через Ajax. Отправка формы без перезагрузки страницы.

Как отправить форму без перезагрузки с помощью AJAX?

Допустим на странице сайта у нас есть форма

<form id="test_form" action="comment.php" method="post">
	Имя: <input type="text" name="name" /><br />
	Комментарий: <textarea name="comment"></textarea>
</form><br />
<div id="result">Тут будет статус загрузки</div><br /><br />
<div onclick="SendForm();">Отправить форму через Ajax</div><br />

Обратите внимание что у формы есть id="test_form", этот id нам нужен для доступа к форме через javascript.

Как отправить эту форму при нажатии на другой элемент с помощью Ajax без перезагрузки страницы?

Очень просто:

Подключите к своему сайту перед тегом ScriptJava фреймворк, добавив вот такой код:

<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>

Далее реализовываем функцию отправки:

<script type="text/javascript">
function SendForm() {
	//отправка файла на сервер
	$$f({
		formid:'test_form',//id формы
		url:'comment.php',//адрес на серверный скрипт, такой же как и в форме
		onstart:function () {//действие при начале отправки
			$$('result','начинаю отправку');//в элемент с id="result" выводим результат
		},
		onsend:function () {//действие по окончании отправки
			$$('result',$$('result').innerHTML+'<br />комментарий успешно отправлен');//в элемент с id="result" выводим результат
		}
	});
}
</script>

При нажатии на что либо нужно вызвать функцию которая будет отвечать за отправку формы через Ajax:

SendForm();

Как получать ответ от файла comment.php

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

<?php
if(isset($_POST['name'])) {
	echo'
		<script type="text/javascript">
		var elm=parent.window.document.getElementById("result");
		elm.innerHTML=elm.innerHTML+"<br />Получено имя '.str_replace("\r","",str_replace("\n","<br />",htmlspecialchars(stripslashes($_POST['name'])))).' с текстом '.str_replace("\r","",str_replace("\n","<br />",htmlspecialchars(stripslashes($_POST['comment'])))).' ";
		</script>
	';
}
?>

Как видите ничего сложного.

+6

Автор: Biil Gates (не зарегистрирован), дата: 16 декабря, 2012 - 03:20
#permalink

Напишите, пожалуйста, статью по использованию scriptjava при отправке сообщения на е-мейл, в частности, без использования видимой формы, т.е., при нажатии на определенную кнопку илии ссылку пользователю отправляется сообщение, например, "вы нажали кнопку".

Спасибо.


Автор: Гость (не зарегистрирован), дата: 6 марта, 2013 - 19:34
#permalink

Дело в том что в тестовых задания обычно просят не использовать фрэймворки, так бы jquery подключил и готово.


Автор: paamayim (не зарегистрирован), дата: 14 января, 2014 - 21:21
#permalink

Ну и зачем все эти фреймворки если есть простой и нативный XMLHttpRequest ?


Автор: vasiliy (не зарегистрирован), дата: 28 января, 2014 - 13:58
#permalink
var nameError         = '<div class="alert-box-error">Имя не заданно <span class="alert-close">x</span></div>',
                emailError        = '<div class="alert-box-error">Адресс не указан <span class="alert-close">x</span></div>',
                invalidEmail      = '<div class="alert-box-error">Please enter a valid e-mail address. <span class="alert-close">x</span></div>',  
                subjectError      = '<div class="alert-box-error">Please enter the subject. <span class="alert-close">x</span></div>',
                messageError      = '<div class="alert-box-error">Please enter your message. <span class="alert-close">x</span></div>',
                mailSuccess       = '<div class="alert-box-success">Спасибо за обращение. <span class="alert-close">x</span></div>',
                mailResult        = $('#contact-form .result'),
                i;

            $("#contact-form").submit( function() {
                
                var form       = $(this);
                var formParams = form.serialize();

                mailResult.find('div').fadeIn('300', function() {
                    $(this).remove();
                });

                $.ajax({
                    url: 'contact.php',
                    type: 'POST',
                    traditional: true,
                    data: formParams,
                    success: function(data) {
                        var response = jQuery.parseJSON(data);  

                        if (response.success) {   
                            $('#contact-form .result').append(mailSuccess);
                        } else {
                           for (i=0; i<response.errors.length; i++) {
                                if (response.errors[i].error == 'empty_name') {                          
                                    mailResult.append(nameError);
                                }

                                if (response.errors[i].error == 'empty_email') {                          
                                    mailResult.append(emailError);
                                }

                                if (response.errors[i].error == 'empty_subject') {                          
                                   mailResult.append(subjectError);
                                }

                                if (response.errors[i].error == 'empty_message') {                          
                                   mailResult.append(messageError);
                                }

                                if (response.errors[i].error == 'invalid') {
                                    mailResult.append(invalidEmail);
                                }
                            }
                        }
                    }
                })

                return false;
            });
<form id="contact-form" class="contact-form" method="post" action=" ">
                <div class="result"></div>
                <input type="text" name="contact[name]" id="name" placeholder="Name *">
                <input type="text" name="contact[email]" id="email" placeholder="E-mail *">
                <input type="text" name="contact[subject]" id="subject" placeholder="Subject">
                <textarea cols="5" rows="5" name="contact[message]" id="message" placeholder="Message *"></textarea>
                <input type="submit" class="btn-dark" value="Отправить">
            </form>
contact.php


{"success":
false, "errors":

[{ "field": "name", "error": "empty_name"},
{ "field": "email", "error": "empty_email"},
{ "field": "subject", "error": "empty_subject"},
{ "field": "message", "error": "empty_message"}
]


}

Автор: vasiliy (не зарегистрирован), дата: 28 января, 2014 - 13:59
#permalink

Забыл- помогите!


Автор: Kolas (не зарегистрирован), дата: 12 февраля, 2014 - 10:51
#permalink

А как добавлять поля в форму без перезагрузки?


Автор: Велимудр (не зарегистрирован), дата: 3 июля, 2014 - 12:51
#permalink

Добрый день.
В таких статьях положено пример работы показывать.


Автор: Гость (не зарегистрирован), дата: 23 января, 2015 - 20:28
#permalink

Как в ваших скриптах происходит подключение к базе ?


Автор: Гость (не зарегистрирован), дата: 25 ноября, 2015 - 17:16
#permalink

Кнопка то где у тебя?


Автор: Гость (не зарегистрирован), дата: 13 декабря, 2017 - 20:20
#permalink

jkjkjhkj


Автор: Гость (не зарегистрирован), дата: 13 декабря, 2017 - 20:21
#permalink

jyjhgjhj


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
1 + 0 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Другие записи этого автора
gordon freeman
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние комментарии
Последние темы на форуме
Forum