Skip to content

Commit cafb0f2

Browse files
DeveloppeurPascalDeveloppeurPascal
committed
exemples Ajax divers
1 parent 86c9047 commit cafb0f2

File tree

5 files changed

+226
-0
lines changed

5 files changed

+226
-0
lines changed

‎Web-Fetch-API-VueJS/index.html

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Test AJAX with XMLHttpRequest</title>
7+
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
8+
</head>
9+
<body>
10+
<div>
11+
<button onclick="chargeTousLesLivres()">Tous les livres</button>
12+
<button onclick="chargeLesDerniersLivres()">Derniers livres</button>
13+
</div>
14+
<div>
15+
<ul id="books">
16+
<livres v-for="livre in livres">
17+
<li><a href="{{livre.url}}">{{livre.name}}</a></li>
18+
</livres>
19+
</ul>
20+
</div>
21+
<script>
22+
let app = new Vue({
23+
el: '#books',
24+
data: {
25+
livres: []
26+
}
27+
});
28+
29+
function chargeLivres(url) {
30+
const request = new Request(url, {method: 'GET'});
31+
fetch(request).then((reponse) => {
32+
console.log(reponse);
33+
if (reponse.ok) {
34+
reponse.json().then((tabLivres) => {
35+
app.livres = tabLivres;
36+
})
37+
}
38+
});
39+
}
40+
41+
function chargeTousLesLivres() {
42+
chargeLivres('https://delphi-books.com/api/b/all.json');
43+
}
44+
45+
function chargeLesDerniersLivres() {
46+
chargeLivres('https://delphi-books.com/api/b/lastyear.json');
47+
}
48+
</script>
49+
</body>
50+
</html>

‎Web-Fetch-API/index.html

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Test AJAX with XMLHttpRequest</title>
7+
</head>
8+
<body>
9+
<div id="books"></div>
10+
<script>
11+
// https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
12+
// https://developer.mozilla.org/en-US/docs/Web/API/Request/Request
13+
// https://developer.mozilla.org/en-US/docs/Web/API/Response
14+
// https://developer.mozilla.org/en-US/docs/Web/API/Response/json
15+
16+
const request = new Request('https://delphi-books.com/api/b/lastyear.json', {method: 'GET'});
17+
fetch(request).then((reponse) => {
18+
console.log(reponse);
19+
if (reponse.ok) {
20+
reponse.json().then((tabLivres) => {
21+
console.log(tabLivres);
22+
let liste = document.createElement('ul');
23+
for (let i = 0; i < tabLivres.length; i++) {
24+
let lien = document.createElement('a');
25+
lien.setAttribute('href', tabLivres[i].url);
26+
lien.text = tabLivres[i].name;
27+
let item = document.createElement('li');
28+
item.appendChild(lien);
29+
liste.appendChild(item);
30+
}
31+
document.getElementById('books').appendChild(liste);
32+
})
33+
}
34+
});
35+
</script>
36+
</body>
37+
</html>

‎XMLHttpRequest/index.html

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Test AJAX with XMLHttpRequest</title>
7+
</head>
8+
<body>
9+
<div id="books"></div>
10+
<script>
11+
// https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest
12+
const request = new XMLHttpRequest();
13+
request.open('GET', 'https://delphi-books.com/api/b/lastyear.json', true);
14+
request.onload = callback;
15+
request.responseType = 'json';
16+
request.send();
17+
18+
function callback() {
19+
20+
console.log(request.response);
21+
let liste = document.createElement('ul');
22+
let tabLivres = request.response;
23+
for (let i = 0; i < tabLivres.length; i++) {
24+
let lien = document.createElement('a');
25+
lien.setAttribute('href', tabLivres[i].url);
26+
lien.text = tabLivres[i].name;
27+
let item = document.createElement('li');
28+
item.appendChild(lien);
29+
liste.appendChild(item);
30+
}
31+
document.getElementById('books').appendChild(liste);
32+
}
33+
</script>
34+
</body>
35+
</html>

‎jQuery-with-HTML-Templates/index.html

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Test AJAX with jQuery</title>
7+
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
8+
</head>
9+
<body>
10+
<div>
11+
<button id="btnTousLivres">Tous les livres</button>
12+
<button id="btnDerniersLivres">Derniers livres</button>
13+
</div>
14+
<div id="books"></div>
15+
<div id="Templates" style="display:none">
16+
<ul id="tplListeLivres">
17+
<li class="item"><a href="" class="link">titre</a></li>
18+
</ul>
19+
</div>
20+
<script>
21+
function chargeLivresParCode(url) {
22+
$.ajax({
23+
url: url,
24+
type: 'get',
25+
dataType: 'json',
26+
success: (tabLivres) => {
27+
// console.log(tabLivres);
28+
let liste = $('<ul>');
29+
for (let i = 0; i < tabLivres.length; i++) {
30+
livre = tabLivres[i];
31+
liste.append($('<li>').append($('<a>').attr('href', livre.url).text(livre.name)));
32+
}
33+
$('#books').empty().append(liste);
34+
}
35+
});
36+
}
37+
38+
function chargeLivresTemplates(url) {
39+
$.ajax({
40+
url: url,
41+
type: 'get',
42+
dataType: 'json',
43+
success: (tabLivres) => {
44+
// console.log(tabLivres);
45+
let liste = $('#tplListeLivres').clone().attr('id', '');
46+
tabLivres.forEach((livre) => {
47+
// console.log(livre);
48+
let item = $('.item', liste).clone().removeClass('item');
49+
// $('.link', item).attr('href', livre.url);
50+
// $('.link', item).text(livre.name);
51+
$('.link', item).attr('href', livre.url).text(livre.name);
52+
liste.append(item);
53+
});
54+
$('.item', liste).remove();
55+
$('#books').empty().append(liste);
56+
}
57+
});
58+
}
59+
60+
$(document).ready(function () {
61+
$('#btnTousLivres').click(function () {
62+
// chargeLivresParCode('https://delphi-books.com/api/b/all.json');
63+
chargeLivresTemplates('https://delphi-books.com/api/b/all.json');
64+
});
65+
66+
$('#btnDerniersLivres').click(function () {
67+
// chargeLivresParCode('https://delphi-books.com/api/b/lastyear.json');
68+
chargeLivresTemplates('https://delphi-books.com/api/b/lastyear.json');
69+
});
70+
});
71+
</script>
72+
</body>
73+
</html>

‎jQuery/index.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Test AJAX with jQuery</title>
7+
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
8+
</head>
9+
<body>
10+
<div id="books"></div>
11+
<script>
12+
// https://api.jquery.com/jQuery.ajax/
13+
$(document).ready(function () {
14+
$.ajax({
15+
url: 'https://delphi-books.com/api/b/lastyear.json',
16+
type: 'get',
17+
dataType: 'json',
18+
success: (tabLivres) => {
19+
// console.log(tabLivres);
20+
let liste = $('<ul>');
21+
for (let i = 0; i < tabLivres.length; i++) {
22+
livre = tabLivres[i];
23+
liste.append($('<li>').append($('<a>').attr('href', livre.url).text(livre.name)));
24+
}
25+
$('#books').empty().append(liste);
26+
}
27+
});
28+
});
29+
</script>
30+
</body>
31+
</html>

0 commit comments

Comments
 (0)