Примеры для jQuery .load()


Загружает элементы списка из другой страницы в список на текущей странице.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>load demo</title>
<style>
body {
font-size: 12px;
font-family: Arial;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<b>Projects:</b>
<ol id="new-projects"></ol>
<script>
$( "#new-projects" ).load( "/resources/load.html #projects li" );
</script>
</body>
</html>

Демонстрация:

Показывает уведомление если Ajax запрос вернул ошибку.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>load demo</title>
<style>
body {
font-size: 12px;
font-family: Arial;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<b>Successful Response (should be blank):</b>
<div id="success"></div>
<b>Error Response:</b>
<div id="error"></div>
<script>
$( "#success" ).load( "/not-here.php", function( response, status, xhr ) {
if ( status == "error" ) {
var msg = "Sorry but there was an error: ";
$( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
}
});
</script>
</body>
</html>

Демонстрация:

Загружает файл feeds.html в div элемент с ID равным "feeds".

1
$( "#feeds" ).load( "feeds.html" );

Результат:

1
<div id="feeds"><b>45</b> feeds found.</div>

передает массив данных на сервер.

1
$( "#objectID" ).load( "test.php", { "choices[]": [ "Jon", "Susan" ] } );

Тоже самое что и выше, но код отправляет дополнительные параметры на сервер и выполняет функцию обратного вызов, после окончания выполнения запроса.

1
2
3
$( "#feeds" ).load( "feeds.php", { limit: 25 }, function() {
alert( "The last 25 entries in the feed have been loaded" );
});