Spring Ajax Json

Version imprimable

Spring Ajax Json

Bonjour,

J'ai voulu afficher une liste des email des all users à travers un controlleur Spring dans mon JSP en utilisant la notion Ajax et Json mais malheureusement aucun résultat affiché sur l'écran JSP(page blanche).

Voilà mes fichiers de .jsp et .js comme celui la :

Mon home.JSP :

Code:

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
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jstl/fmt_rt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		<title>Spring MVC JPA Annotations - Démarrage</title>
		
		<link type="text/css" rel="stylesheet" media="all" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/ui-darkness/jquery-ui.css"/>
		<link type="text/css" rel="stylesheet" media="all" href="${pageContext.request.contextPath}/static/stylesheet/reset.css"/>
		
		<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
        
	</head>
	
	<body>
	
	    <h2> les Emails des all users :  </h2>
	    
		<section id="users-wrapper">
			<!-- liste chargée dynamiquement via appel Ajax -->
		</section>
		
	</body>
	
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.18/jquery-ui.min.js"></script>
	<script type="text/javascript" src="https://raw.github.com/maxatwork/form2js/master/src/form2js.js"></script>
	<script type="text/javascript" src="https://raw.github.com/maxatwork/form2js/master/src/jquery.toObject.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/javascript/home.js"></script> 
	
</html>

et Mon home.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
   $(document).ready(function(){	
              $.ajax({
		url: "/user/list",
		type: "GET",
		contentType : "application/json",
		dataType: "json",
		success: function(users) {
 
			console.log("SUCCESS : ", users);
 
			usersAsHtml = "<ul>";
			for (var i=0, j=users.length; i<j; i++) { 
 
				usersAsHtml += "<li>" + users[i].email + "</li>";
			}
 
			usersAsHtml += "</ul>";
 
			$('#users-wrapper').html(usersAsHtml);
		   }
	    });
 
      });

j'ai fait pas mal de recherche sur le web mais j'ai pas trouvé une bonne solution à mon problème.
et merci pour vos aides.

Cordialement

Bonjour,

Code:

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
 
$(document).ready(function() {
	alert("Le fichier Js est bien chargé"); // verification si ça rentre bien dans la fonction
	$.ajax({
		url : "/user/list",
	type : "GET",
	contentType : "application/json",
	dataType : "json",
	success : function(users) {
 
		console.log("SUCCESS : ", users);
 
		usersAsHtml = "<ul>";
		for (var i = 0, j = users.length; i < j; i++) {
 
			usersAsHtml += "<li>" + users[i].email + "</li>";
		}
 
		usersAsHtml += "</ul>";
 
		$('#users-wrapper').html(usersAsHtml);
	}
 
	error: function(xhr, status, error) {                   // s'il l'appel ajax a achoué
		console.log("Erreur : ", xhr.responseText);  
		alert(xhr.responseText);
		});
	});
 
});

Sinon, utilise Firebug sur firefox pour faciliter un débogage javascript.

A+.

01/06/2016, 12h31
man84

bonjour,

j'ai modifié juste l'url est ca marche dans le script home.js :

url: "http://localhost:8080/DGEDL_DEMO/user/list"

merci bien
01/06/2016, 12h51
andry.aime
C'est déconseillé d'utiliser un chemin absolu en dur, ton code ne fonctionne pas dès que l'on accède la page sur un autre poste. Et quand tu déploieras ton appli sur un autre serveur, tu vas modifier tous les URL dans les fichiers JS?
Code:

1 2 <script>var base = "${pageContext.request.contextPath}";</script> <script type="text/javascript" src="${pageContext.request.contextPath}/static/javascript/home.js"></script>
Code:

url: base+"/user/list",

A+.
03/06/2016, 19h34
man84

exactement ,je l'ai oubli ca dans tout les cas ca marche très bien.

merci bien a+