--------------------------------------------------------------------------------
Bonjour,
j'ai une page web composée de plusieurs divisions <div>
je souhaite a partir d'un lien d'une des divison , mettre a jours une autre division sans recharger toute la page , je sais qu'il existe une solution en ajax , mais je sais pas laquelle , merci d'avance de bien vouloir m'aider.
Cordialement
oila un exemple d'une page web ajax.jsp
je veux si je click sur un lien d'un menu <li><a href="page1.html">Lien</a></li>
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81 <%@taglib uri="http://java.sun.com/jstl/xml_rt" prefix="x_rt"%><%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%><%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%><%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Mon super site</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" media="screen" title="Exemple" type="text/css" href="1.css" /> </head> <body> <f:view> <!-- L'en-tête --> <div id="en_tete"> </div> <!-- Les menus --> <div id="menu"> <div class="element_menu"> <h3>Titre menu</h3> <ul> <li><a href="page1.html">Lien</a></li> <li><a href="page2.html">Lien</a></li> <li><a href="page3.html">Lien</a></li> </ul> </div> <div class="element_menu"> <h3>Titre menu</h3> <ul> <li><a href="page4.html">Lien</a></li> <li><a href="page5.html">Lien</a></li> <li><a href="page6.html">Lien</a></li> </ul> </div> </div> <!-- Le corps --> <div id="corps"> <h1>Mon super site</h1> <p> Bienvenue sur mon super site !<br /> Vous allez adorer ici, c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site :-D </p> <h2>A qui s'adresse ce site ?</h2> <p> A tout le monde ! Si je commence à privilégier certaines personnes, on va m'accuser de discrimination ;o)<br /> Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si ! </p> <h2>L'auteur</h2> <p> L'auteur du site ? Bah, c'est moi, quelle question :-p<br /> Je vais essayer de faire le meilleur site du monde (ça doit pas être bien compliqué). Mon objectif est d'attirer un maximum de visiteurs, de les rendre accros à mon site, puis de les mettre en mon pouvoir.<br /> Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait, j'irai explorer les confins de l'Univers à la recherche de nouveaux peuples à soumettre à ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique). </p> </div> <!-- Le pied de page --> <div id="pied_de_page"> <p>Copyright "Tout pourri Corporation" 2005, tous droits réservés</p> </div> </f:view> </body> </html>
que la partie du <!-- Le corps -->
qui change pas la page completement dans <!-- Le corps -->charger par exemple un autre text ou bien des calcule et rester toujour sur mem page ajax.jsp
et le fichier 1.css
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125 body { width: 760px; margin: auto; margin-top: 20px; margin-bottom: 20px; background-image: url("image/1.jpg"); } /* L'en-tête */ #en_tete { width: 760px; height: 100px; background-image: url("image/fr.gif"); background-repeat: no-repeat; margin-bottom: 10px; } /* Le menu */ #menu { float: left; width: 120px; } .element_menu { background-color: #626262; background-image: url("images/motif.png"); background-repeat: repeat-x; border: 2px solid black; margin-bottom: 20px; } /* Quelques effets sur les menus */ .element_menu h3 { color: #B3B3B3; font-family: Arial, "Arial Black", "Times New Roman", Times, serif; text-align: center; } .element_menu ul { list-style-image: url("images/puce.png"); padding: 0px; padding-left: 20px; margin: 0px; margin-bottom: 5px; } .element_menu a { color: #B3B3B3; } .element_menu a:hover { background-color: #B3B3B3; color: black; } /* Le corps de la page */ #corps { margin-left: 140px; margin-bottom: 20px; padding: 5px; color: #B3B3B3; background-color: #626262; background-image: url("images/motif.png"); background-repeat: repeat-x; border: 2px solid black; } #corps h1 { color: #B3B3B3; text-align: center; font-family: Arial, "Arial Black", "Times New Roman", Times, serif; } #corps h2 { height: 30px; background-image: url("images/titre.png"); background-repeat: no-repeat; padding-left: 30px; color: #B3B3B3; text-align: left; } /* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */ #pied_de_page { padding: 5px; clear: both; text-align: center; color: #B3B3B3; background-color: #626262; background-image: url("images/motif.png"); background-repeat: repeat-x; border: 2px solid black; }
Partager