Работаем с формами в DoJo

В предыдущей статье про DoJo мы рассмотрели механизмы взаимодействия с php-скриптом на основе Ajax. Но там не была рассмотрена важная особенность - возможность делать submit любой существующей формы на страничке.

А зачем нам делать submit формы? Можно же просто сформировать некоторый GET-запрос вроде этого:

main.php?action=add&what=address&value=123

Дело в том, что у передачи формы скрипту есть преимущества по сравнению с простым GET-методом:

  • сложно закодировать что угодно с помощью URL и передать скрипту (например, двоичные данные)
  • нельзя передать динамично изменяющиеся параметры (из текстового поля например)
  • нельзя передать файл (input type=file)

Сейчас мы с Вами научимся передавать форму нашему php-скрипту с помощью DoJo. Поставим перед собой цель: загрузить файл на сервер и при этом передать его короткое текстовое описание, которое сохраним в текстовом файле. При этом скрипт должен нам вернуть 1, если все ок (файл принят и сохранен), иначе - 0.

Напишем сначала php-скрипт (назовем его form.php):

form.php

<?
	if (is_uploaded_file($_FILES['my_file']['tmp_name']) && $_FILES['my_file']['size'] > 0) {
		$filename = basename($_FILES['my_file']['name']);
		if (move_uploaded_file($_FILES['my_file']['tmp_name'], $filename)) {
			// Save the file description
			if (!empty($_REQUEST['desc'])) {
				file_put_contents('desc_'.$filename.'.txt', $_REQUEST['desc']);
			}
			echo '1';
		} else {
			echo '0';
		}
	} else {
		echo '0';
	}
?>

Как видим, наш скрипт будет возвращать 1, если файл успешно сохранен на сервере. При этом описание файла будет загружено в текстовый файл. Теперь напишем код html-страницы, откуда будем загружать наш файл:

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
                      "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Dojo Form Demo</title>
	<script type="text/javascript" src="./dojo/dojo.js" djConfig="parseOnLoad:true, isDebug:false"></script>
	<script type="text/javascript">
		dojo.require("dojo.io.iframe");
	</script>
</head>
<body>
	<form id="my_form" method="post" enctype="multipart/form-data">
		Browse any file: <input type="file" name="my_file" /><br />
		Enter a description:  <input type="text" name="desc" /><br />
		<br />
		<input type="button" id="my_button" value="Upload" />
	</form>
	<br />
	<b>Status:</b> <span id="my_status"></span>
	<script type="text/javascript">
	dojo.addOnLoad(function() {
		var my_button = dojo.byId("my_button");
		dojo.connect(my_button, "onclick", function() {
			dojo.io.iframe.send({
				url: "form.php",
				handleAs: "html",
			    form: "my_form",
			    load: function(data) {
					if (data.body.innerHTML == '1') {
						dojo.byId("my_status").innerHTML = 'Success!';
					} else {
						dojo.byId("my_status").innerHTML = 'Fail!';
					}
				},
				error: function(error) {
					dojo.byId("my_status").innerHTML = error;
				}
			});
		});
	});
	</script>
</body>
</html>

При успешной загрузке файла в поле «Status» будет выведено слово «Success!». Иначе - «Fail!».

На самом деле загрузка файла на сервер с помощью DoJo - целая проблема. Мне потребовалось около двух часов, чтобы разобраться, почему файл не загружался с помощью dojo.io.iframe.send (у меня не сразу все заработало). А изначально я вообще пытался использовать dojo.xhrPost, чтобы передать данные в php-скрипт из формы. Оказывается, с помощью dojo.xhrGet, dojo.xhrPost вообще нельзя передавать файлы. И даже не пытайтесь это сделать (но просто форму без файла передавать можно).

Обратите внимание на строчку

dojo.require(“dojo.io.iframe”);

Здесь мы использовали расширение io.iframe для Dojo. Чтобы представленный пример работал, нужно, чтобы на одном уровне с dojo.js находилась папка io, в которой лежат script.js и iframe.js.

Также параметр handleAs должен обязательно быть равен “html”.

На этом все. Пост довольно небольшой, но раскрывает решение проблемы передачи файла через форму с помощью Dojo 1.0. Судя по многочисленным сообщениям в программерских форумах, с этой проблемой столкнулось большое кол-во программеров, использующих DoJo.

Пример к статье можно скачать здесь.

Удачи!



Теги: , ,


Читайте также:



12 Ответов на “Работаем с формами в DoJo”

  1. Zholdin

    Как по мне - тема раскрыта четко, спасибо за пост!

  2. dobs

    Хотелось бы увидеть статейку про то как сделать голосование на AJAX

    Спс за сайт!

  3. novice

    2 dobs: не за что :) В скором времени обязательно напишу про голосования

  4. spry

    очень хотелось бы увидеть статейку по ДнД в дожо
    что-то никак не могу освоить, как мне с помощь ДнД дать возможность сортировать список.. возможность дать могу, но как мне это все передать серверу чтобы он мог в соответствии с уже отсортированым списком расставил все в нужном порядке в таблице. Надеюсь novice ты читаешь старые комменты :)

  5. novice

    2 spry: я полагаю, ты имеешь в виду под словом “таблица” таблицу базы данных (сохранение полученного порядка в базе)?

  6. spry

    да! фактически у меня плейлист.. и мне нужно иногда сортировать песенки т.е. менять порядок их воспроизведения. для этого у меня в таблице некое поле order.. и мне надо его менять в соотвествии с положением в который я могу сортировать с помощью dojo.dnd.Source

  7. novice

    Понятно. Надо будет рассмотреть эту фичу в Dojo

  8. Василий

    Спасибо за статью, меня интересуют редактируемые таблицы, почемуто не получается.

  9. Сергей

    Этот катет не прокатит 😉

    Такой фокус не работает в Google Chrome
    Your text to link…
    Здесь предлагают решение проблемы. Но мне пока не удалось заставить этот скрипт работать как надо. Проблема в том, что iframe требует некий blank.html. Подключаю его куда сказана и как сказано, но результат : “Теже яйца, только в профиль.”

  10. Алексей

    Как создать dojo-форму и разместить в ней контролы чистым JS?

  11. Дмитрий Дегтярев

    Неправда на счет того что
    handleAs: “html” и это обязательно….

    Вовсе не так… без проблем может быть и json, например,
    Просто надо определенным образом готовить формат ответа от сервера, обертывая его в html страницу, где сам ответ будет в первом дочернем дом элементе…
    т.е например если нужно вернуть JSON, то сервер должен возвращать страницу вида:
    isLoaded = true;{“Result”:1, “Other”:”Другое значение”}

    Т.е сам JSON как видно находится между тегами textarea. Вот такая нетривиальная штука.

  12. Дмитрий Дегтярев

    Неправда на счет того что
    handleAs: “html” и это обязательно….

    Вовсе не так… без проблем может быть и json, например,
    Просто надо определенным образом готовить формат ответа от сервера, обертывая его в html страницу, где сам ответ будет в первом дочернем дом элементе…
    т.е например если нужно вернуть JSON, то сервер должен возвращать страницу вида(специально заменяю теги скобками, чтобы можно было отправить комментарий):
    [html][head][script]isLoaded = true;[/script][/head][body][textarea]{“Result”:1, “Other”:”Другое значение”}[/textarea][/body][/html]

    Т.е сам JSON как видно находится между тегами textarea. Вот такая нетривиальная штука.


© Copyright. . I-Novice. All Rights Reserved. Terms | Site Map