AJAX Примитивы

Редакция автор: stain

1. index.php //точка входа
2. app.php //валидация передаваемых данных на сервере
3. scriptform.js //ajax запрос

Точка входа.

index.php




	
	myip


	
Email:

Телефон:

Имя:

Валидация передаваемых данных на сервере.

app.php


Ajax запрос.

scriptform.js

// with out callback
window.onload = function(){
	var inp_email = document.querySelector('input[name=email]');
	var inp_phone = document.querySelector('input[name=phone]');
	var inp_name = document.querySelector('input[name=name]');

	document.querySelector('#send').onclick = function() {
		var params ='email=' + inp_email.value + '&' + 
			'phone=' + inp_phone.value + '&' + 
			'name=' + inp_name.value;
		ajaxPOST('app.php', params); 
	}
}

// обращаемся к странице на сервере проводящей валидацию данных, и передаем параметры
function ajaxPOST(url, params){// 
	var request = new XMLHttpRequest();

	//проверка состояния запроса 0-4 (создан, открыт, отправлен, частичный ответ заголовки, пришел ответ)
	request.onreadystatechange = function(){
		if(request.readyState == 4 && request.status == 200){
			if(request.responseText == '1'){
				document.querySelector('#result').innerHTML = 'Ура-ура! Все хорошо!';//params
				// раз все хорошо прячем форму
				document.querySelector('form').style.display = 'none';
				//если надо отправить на другую страницу //document.location = '';
			}
			else{
				document.querySelector('#result').innerHTML = request.responseText;	
			}
			
		}
	}

	request.open('POST', url);
	request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	request.send(params);
}

Комментариев: 0

jQuery это зло «Шаги в пучину зла»

Редакция автор: stain

Скрипты внедряются до их вызова. И если в браузере отключены, то не исполняются. Надо подгружать обработчик jQuery. 

Структура скрипта, функции jQuery.

Внешний контур
<script></script>

Внутренний контур
$(document).ready(function() {

});

Сам скрипт например создающий анимацию подпрыгивания всех кнопок
$("button").addClass("animated bounce");

Здесь button это объект(другие объекты указываются как в стилях css), для которого создается класс анимации(и указано какой конкретно).Кроме прочего там же в скрипте можно прописывать и другие известные классы например из Bootstrap.

Одному объекту может быть назначено много классов, как в одной функции так и для каждого класса отдельно.

например:
$("button").addClass("animated");
$("button").addClass("bounce");

Кроме добавления классов, можно их и отключать
$("button").removeClass(".btn-default");

Для изменения каких либо параметров css используется .css("name","value")
Например сменим цвет для идентификатора target1 голубой:
$("#target1").css("color", "blue");

Для изменения функций html элементов используется функция .prop("параметр", boolean)
Следующий пример делает все кнопки неактивными устанавливая параметр "disabled" в состояние истины:
$("button").prop("disabled", true);

Функция .html() позволяет заменять контент для указанного элемента, в примере ниже в заголовке замещается текст, и добавляются прочие элементы форматирования. Аналогичная ей функция .text() позволяет замещать текст, без внедрения элементов форматирования.
$("h3").html("<em>jQuery Playground</em>");

Функция .remove() позволяет удалять отображение html объектов. Ниже приведен пример удаления с экрана элемента которому присвоен идентификатор target4.
$("#target4").remove();

Функция .appendTo() позволяет перенести объект и прикрепить его в другом месте. Ниже показано как элемент с идентификатором target4 вставляется в конец объекта с идентификатором left-well.
$("#target4").appendTo("#left-well");

Функция .clone() позволяет клонировать объект с последующей привязкой через функцию .appendTo. Когда используется несколько функций подряд это называется Цепью функций(ну примерно).
В примере ниже клон элемента target5 встраивается в конец контейнера left-well.
$("#target5").clone().appendTo("#left-well");

Функция .parent() позволяет задавать параметры объекту в который вложен наш объект. В примере ниже, я через элемент target1 задаю красный фон его родителю.
$("#target1").parent().css("background-color", "red");

Детей не трогать!

Функция .children() позволяет задавать параметры для потомков. В примере через элемент right-well я обратился к его детям и он покрасил их оранжевым цветом.

$("#right-well").children().css("color", "orange");

Блин вот это не понял.

jQuery uses CSS Selectors to target elements. target:nth-child(n) css selector allows you to select all the nth elements with the target class or element type.

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

$(".target:nth-child(2)").addClass("animated bounce");

Аналогичные указатели :even - каждый, :odd,

Here's how you would target all the odd-numbered elements with class target and give them classes:

$(".target:odd").addClass("animated shake");

Note that jQuery is zero-indexed, meaning that, counter-intuitively, :odd selects the second element, fourth element, and so on.

Try selecting all the even-numbered elements and giving them the classes ofanimated and shake.

$(".target:even").addClass("animated shake");

Это просто  еще один элемент анимации hinge, демонстрирует как наш сайт свешивается на левом углу а затем падает. в никуда

$("body").addClass("animated hinge");

Элемент анимации fadeOut прячет элемент.

Для дальнейшего изучения, предлагаю ознакомиться jQuery API.
jQuery API

Комментариев: 0