Задачи для решения

Основы работы с AJAX

Дана страница index.html. В ней есть блок #content и кнопка вне этого блока. Сделайте так, чтобы по нажатию на кнопку в #content аяксом подгружалось содержимое страницы ajax.html.

Решение:

<div id="content"></div>
<button>Нажми</button> 
$(document).ready(function () {
	$('button').click(function () {
		$.get("ajax.html", success);
 	});

	function success(data) {
		$('#content').html(data);
 	}
}); 

Дана страница index.html. В ней есть блок #content и N кнопок вне этого блока. Каждая кнопка привязана с своей странице - первая кнопка к ajax1.html, вторая к alax2.html и так далее. Сделайте так, чтобы по нажатию на любую кнопку в #content аяксом подгружалось содержимое соответствующей страницы.

Решение:

<button data-ajax="1">Нажми</button>
<button data-ajax="2">Нажми</button>
<button data-ajax="3">Нажми</button> 
$(document).ready(function () {
	$('button').click(function () {
		$.get("ajax" + $(this).attr('data-ajax') + ".html", success);
 	});

	function success(data) {
		$('#content').html(data);
 	}
}); 

Дана страница с товарами product.html. На ней по загрузке расположено 12 товаров по 3 в ряд. Сделайте так, чтобы при прокрутке страницы до самого низа аяксом подгружалось еще 12 товаров. Товары расположены на страницах ajax1.html, alax2.html и так далее. Как только страницы с товаром закончатся - страница product.html должна выдать сообщение об этом.

Решение:

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>  
$(document).ready(function () {
	var inProgress = false;
	var page = 1;
	var maxpage = 2;

	$(window).scroll(function () {
		if ($(window).scrollTop() + $(window).height() >= $(document).height() - 200 && !inProgress) {
			$.ajax({
				url: "/ajax" + page + ".html",
				beforeSend: function () {
					inProgress: true;
 				},
 			},
			success: function (html) {
				$('body').append(html);
				inProgress = false;
				page++;
  			});
  		}
	});
});

AJAX + JSON

Дана страница index.html. В ней есть блок #content и кнопка вне этого блока. Дана также страница ajax.json, в ней хранится массив пользователей в формате JSON.

Сделайте так, чтобы по нажатию на кнопку в #content появился список пользователей из ajax.json в виде списка <ul> - каждый пользователь в своем <li>.

Решение:

<button>Нажми</button>
<div id="content"></div>
$(document).ready(function () {
	$('button').click(function () {
		$.ajax("text.json",
			{
			success: function(data) {
					$('#content').children().remove();
					$('#content').append('<ul></ul>');
					$.each(data, function (index, value) {
						$('#content ul').append('<li>' + value.name + '</li>');
 				})
 			}
		});
 	});
 });