Категории: Javascript @ 22:54 — Комментарии отключены

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

Я не буду в этой статье рассказывать о jquery, а расскажу как можно быстро и эффективно управлять формами с помощью scriptjava

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

1
2
3
4
5
6
<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 фреймворк, добавив вот такой код:

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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:

1
SendForm();

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

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

1
2
3
4
5
6
7
8
9
10
<?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>
		';
	}
?>

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

Извините, комментарии закрыты.