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>
	';
}
?>

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

Автор: 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"}
]


}