Подтверждение формы без перезагрузки страницы

Привет, %username%!
В этом примере я покажу тебе, как при помощи аякс можно создать форму, которая при подтверждении данных не будет перезагружать страницу!

JS:
Обратите внимание на dataString

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js">
</script>
<script type="text/javascript" >
$(function() {
$(".submit").click(function() {
var name = $("#name").val();
var username = $("#username").val();
var password = $("#password").val();
var gender = $("#gender").val();
var dataString = 'name='+ name + '&username=' + username + '&password=' + password + '&gender=' + gender;

if(name=='' || username=='' || password=='' || gender=='')
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "join.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}
return false;
});
}); </script>

HTML:
Сама форма:

<form method="post" name="form">
<ul><li>
<input id="name" name="name" type="text" />
</li><li>
<input id="username" name="username" type="text" />
</li><li>
<input id="password" name="password" type="password" />
</li><li>
<select id="gender" name="gender">
<option value="">Пол</option>
<option value="1">Муж</option>
<option value="2">Жен</option>
</select>
</li></ul>
<div >
<input type="submit" value="Submit" class="submit"/>
<span class="error" style="display:none"> Ошибка! Введите норм данные</span>
<span class="success" style="display:none"> Регистрация успешно завершена</span>
</div></form>

join.php
Именно этот код будет обрабатываться посредствам aJax. Т.е. при нажатии на кнопку 'submit' будет выполненно следуещее:

if($_POST){
$name=$_POST['name'];
$username=$_POST['username'];
$password=$_POST['password'];
$gender=$_POST['gender'];
mysql_query("*ваш sql запрос..");
}else { }
?>

Загрузка изображений на сайт без перезагрузки страницы

В этом примере я покажу тебе, как с помощью современных технологий в веб-программировании реализовать загрузку изображений на сервер не перезагружая при этом страницу в браузере. Скрипт работает посредствам jQuery.

Обработка формы без перезагрузки

Использовать скрипт можно для чего угодно: загрузка фоток, файлов или даже видео. Всего пять строк js кода)

Скачать скрипт:

JS- код
$("#photoimg").live('change',function(){}) - "photoimg" это айдишник input- тега, а $('#imageform').ajaxForm() - айдишник формы. используя метод ajaxForm().

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#photoimg').live('change', function()
{
$("#preview").html('');
$("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm(
{
target: '#preview'
}).submit();
});
});
</script>

index.php
Файл состоит из простого PHP и HTML кода. В $session_id присваевается id пользователя.

include('db.php');
session_start();
$session_id='1'; // эмулируется запись айдишника рользователя в сессии
?>
<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
Загрузка изображения <input type="file" name="photoimg" id="photoimg" />
</form>
<div id='preview'>
</div>

ajaximage.php
Состоит из PHP- кода. Данный файл вызывается после нажатия на кнопку загрузки. Изображения загружаются в папку "uploads".

<?php
include('db.php');
session_start();
$session_id='1'; // id пользователя
$path = "uploads/";
$valid_formats = array("jpg", "png", "gif", "bmp","jpeg");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
if(strlen($name)){
list($txt, $ext) = explode(".", $name);
if(in_array($ext,$valid_formats)){
if($size<(1024*1024)) { // ограничение размера фотки
$actual_image_name = time().$session_id.".".$ext;
$tmp = $_FILES['photoimg']['tmp_name'];
if(move_uploaded_file($tmp, $path.$actual_image_name)) {
mysql_query("UPDATE users SET profile_image='$actual_image_name' WHERE uid='$session_id'");
echo "<img src='uploads/".$actual_image_name."' class='preview'>";
} else echo "Ошибка!";
} else echo "Максимум 1 MB";
} else echo "Неверный формат файла";
} else echo "Выберите изображение..!";
exit;
}
?>

И напоследок, база данных:
Создадим таблицу пользователей.

CREATE TABLE `users` (
`uid` int(11) AUTO_INCREMENT PRIMARY KEY,
`username` varchar(255) UNIQUE KEY,
`password` varchar(100),
`email` varchar(255) UNIQUE KEY,
`profile_image` varchar(200),
`profile_image_small` varchar(200),
)

Клавиатурные сокращения с Javascript

Mousetrap — маленькая библиотека (1.4 KB) для обработки горячих клавиш.

// одиночные нажатия
Mousetrap.bind('4', function() { highlight(2); });
Mousetrap.bind("$", function() { highlight(3); }, 'keydown');
Mousetrap.bind('x', function() { highlight(4); }, 'keyup');

// комбинации
Mousetrap.bind('command+shift+K', function() { highlight(7); });
Mousetrap.bind(['command+k', 'ctrl+k'], function() { highlight(8); });

// как gmail
Mousetrap.bind('g i', function() { highlight(11); });
Mousetrap.bind('* a', function() { highlight(12)});

// konami code!   *если вы понимаете о чем я)
Mousetrap.bind('up up down down left right left right b a enter', function() {
    highlight([15, 16, 17]);
});

Как видно, поддерживаются как одиночные нажатия, так и сочетания и клавиатурные комбо.

Работает в Internet Explorer 6+, Safari, Firefox, Chrome (с включенным Vimium не работает).

Пробуйте — craig.is/killing/mice