Spring Ajax Json

**man84** · 31/05/2016, 20h18

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 :

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
<%@ 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 :

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
   $(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

**andry.aime** · 01/06/2016, 07h53

Bonjour,

Code js :

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
 
$(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+.

**man84** · 01/06/2016, 12h31

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

**andry.aime** · 01/06/2016, 12h51

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 jsp :

Sélectionner tout - Visualiser dans une fenêtre à part

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