Live validation

talevtehnology

Registered
Здравейте
някаде из нета преди време гледах код с който имам примерно няква капатча и в момента в който потребителя напише отговора да изпише верен или съответно грешен отговор.Знам че е нещо с Ajax ,но в чичо гугъл нищо не намирам

или имам примерно цифрите
3+1=5
3+1=4

още при въвеждането като е грешен го оцветява в червено , а ако е верен в зелено :)
 
http://www.google.bg/#hl=bg&pwst=1&&sa=X&ei=928vTZHrF8mYOv3NsMwK&sqi=2&ved=0CBYQvwUoAQ&q=ajax+live+form+validation&spell=1&fp=1b7e4e5333ffdefb
 
Ако изчакаш до утре следобяд, ще ти обясня всичко относно аякс заявките, защото виждам че доста хора се интересуват от това. Ако схванеш основният принцип, ще можеш да прилагаш техниката навсякъде :)
Ще редактирам поста си с обяснението.

EDIT:
Ajax не е някаква разработка на военните или извънземна технология или нещо опасно. Това е като обикновеното зареждане на страницата от браузъра. Могат да се изпращат както GET, така и POST заявки със съответните параметри. Разликата е, че резултата се връща и се обработва от джаваскрипт функция, а не се показва директно на потребителя.
Ако използвате някой джаваскрипт фреймуърк, погледнете в документацията! API-то е доста добре описано и обяснено с примери.
Ако по някаква причина не използвате фреймуърк, трябва да използвате собственоръчно написан код като този :)
Код:
// Тази променлива е глобална, за да не се създава нов
// XHR обект при всяко извикване на функцията loadUrl
var req = false;

// С тази функция изпращаме заявката
function loadUrl(url, callback) {
	
	// Има ли вече зареден XHR обект?
	if (req == false) {

		if(window.XMLHttpRequest && !(window.ActiveXObject)) {
			try {
				req = new XMLHttpRequest();
			} catch(e) {
				req = false;
			}

	// Ако горната проверка не даде истина,, значи най-вероятно работим с IE, а там XHR обекта е различен... 
		} else if(window.ActiveXObject) {
			try {
				req = new ActiveXObject("Msxml2.XMLHTTP");
			} catch(e) {
				try {
					req = new ActiveXObject("Microsoft.XMLHTTP");
				} catch(e) {
					req = false;
				}
			}
		}
    }
    
    // Ако успешно сме заредили XHR обекта, изпращаме заявката!
    if(req) { 
		req.onreadystatechange = function() {
			// ако заявката е изпратена успешно и е заредила документа
			if (req.readyState == 4) {
				// Извикваме функцията, която сме подали като параметър да обработи заявката
				// Може да добавите допълнителни параметри, ако са ви нужни
				callback.call(this, req.responseText, req.status); 
			}
		};
		
		// Тук оформяме самата заявка.
		// Изпращаме GET заявка
		// към адреса url
		// и задаваме да е асинхронна! Това е доста важно, защото ако заявката
		// не е асинхронна, браузъра ще замръзне докато завърши заявката...
		req.open("GET", url, true);
		
		// Тук се изпращат POST параметрите,
		// но в случая ние изпращаме GET заявка,
		// затова изпращаме празен стринг 
		req.send("");
	}
}

И така функцията се използва по следният начин:
Код:
loadUrl('http://nqkakyvadres.com/ajaxpage.php?action=something', function(data, status){
	
	if (status == 200) {
		
		// Зареждаме резултата в div елемент на страницата
		document.getElementById('someDiv').innerHTML = data;
		alert('Заявката изпълнена успешно!');
	} else {
		
		alert('Възникна е грешка! http code:' + status);
	}
});

И така в ajaxpage.php ще може да обработите заявката и да вземете стойността на параметъра
action чрез $_GET['action'] (както обикновено) :)

Ако искате да вземете информация, която няма само да я праснете в един див и шапка на тояга,
тук влиза в действие JSON.
Трябва да добавите https://github.com/douglascrockford/JSON-js/blob/master/json2.js този файл
в сайта си. Той съдържа метод за обработка на JSON стринг.
Като използваме кода от предходния пример ще направим скрипта да използва json
Код:
loadUrl('http://nqkakyvadres.com/jsonpage.com?p1=woo&p2=hoo', function(){
	if (status == 200) {
		
		// Ако възникне грешка при парсването
		// JSON.parse връща Exception
		try {
		
			data = JSON.parse(data);
		} catch(e) {
			
			data = false;
			alert('Parse error!');
		}
		
		// Ако парсването е преминало успешно
		if (data != false) {
			
			if (typeof data.errorString != undefined) {
				
				alert("Грешка!\n" + data.errorString);
			} else {

				alert( 'Здравейте ' + data.name + "!\n Последният ви вход е от IP адрес"+
					data.ip + ' на ' + data.lastVisitDate + "\n Приятен престой в сайта :)");
			}
		}
		
	} else {

		alert('Възникна е грешка! http code:' + status);
	}
});

А в jsonpage.php поставяме следният код:
Код:
<?php

// Ако е пуснато автоматичното ескейпване на кавички,
// може да направи проблеми с PDO, затова ги премахваме
if (get_magic_quotes_gpc()) {
	
	$_GET['p1'] = stripslashes($_GET['p1']);
	$_GET['p2'] = stripslashes($_GET['p2']);
}

// Използвам момента да покажа как се работи с PDO и prepared statements :)
$query = $db -> prepare('
	SELECT *
	FROM users
	WHERE username=:uname
	AND password=:pass
');

// Сега ще заместим :uname в заявката с $_GET['p1'] и PDO ще го филтрира като STRING
$query -> bindParam(':uname', $_GET['p1'], PDO::PARAM_STR);
// Тук става същото
$query -> bindParam(':pass', $_GET['p2'], PDO::PARAM_STR);

// Проверката при PDO е малко странна, но се свиква :D
if ($query -> execute() && ($res = $query -> fetch(PDO::FETCH_ASSOC)) !== false) {
	
	// Взимаме информацията
	$result = array(
		'name' => $res['full_name'],
		'ip' => $res['last_login_ip'],
		'lastVisitDate' => $res['last_visit_date']
	);
} else { // Възникнала е грешка!
	
	// Взимаме информацията за грешката
	$result = array(
		'errorString' => 'Невалиден потребител или парола! '.
			
			// Показва информация за заявката
			// ТРЯБВА да се премахне, когато сайта влезе в
			// публичното пространство!
			print_r($query -> errorInfo(), true));
			
}

// Изваждаме съдържанието във JSON формат
// От PHP 5.2.1 съществуват функциите за json
// Ако използвате по-стара версия на PHP, в официалният сайт
// на json - http://json.org има PHP имплементация :)
echo json_encode($result);
Надявам се поне на 1 човек да му е станало ясно за какво говоря :D

// OFF
WOOO HOOOO 2011 поста :D:D
 

Back
Горе