afficher json avec ajax

Version imprimable

Bonjour à tous,
je souhaite acceder et afficher mes données sous forme json .
Ces données sont envoyé par un servlet qui s'occupe de traiter la requête de l'utilisateur ( depuis un formulaire ) et renvoi une liste de données comme ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 {"myArrayList":[ { "name":"lieu1", "latitude":"44.50669", "longitude":"-69.797974" }, { "name":"lieu2", "latitude":"43.18355", "longitude":"-85.892945" }, { "name":"lieu3", "latitude":"40.616904", "longitude":"-74.094129" } ]}
Comment procéder avec Ajax et jquery pour accéder a ces données la ( renvoyé par le servlet) depuis ma page html.

Formulaire est comme ceci:
Code:

1 2 3 4 5 6 7 8 9 10 <form id="myform" method="post" action="/InputSearch"> <input type=text align="middle" size=51 name=query_value id="query_value" > <p style="text-align: center;"> <input type="submit" align="middle" size=13 value="Search "> </p> </form>
/InputSearch étant mon servlet qui effectue le traitement de la requête et renvoi le résultat avec json:
Code:

1 2 3 4 5 6 7 8 public void doGet(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException { response.setContentType("text/html"); response.setCharacterEncoding("UTF-8"); response.setHeader("Cache-Control", "no-cache"); (....................traitement .........) response.getWriter().write(gson.toJson(array).toString());
Merci pour vos réponses

31/05/2011, 15h19
SpaceFrog

Tu fais un submit de ton form ...
=> la page se recharge
tu devrais passer par ajax
pour juste recupérer le json :
http://api.jquery.com/jQuery.parseJSON/
31/05/2011, 15h33
doudoubens

Citation:

Envoyé par SpaceFrog

Tu fais un submit de ton form ...
=> la page se recharge
tu devrais passer par ajax
pour juste recupérer le json :
http://api.jquery.com/jQuery.parseJSON/

Merci pour ta réponse!!
mais j'ai pas bien compris " faire un submit du form " et puis passer par ajax.
Comment passer par ajax ?

pour récupérer le json est il possible de le faire directement depuis le servlet ?
31/05/2011, 15h39
SpaceFrog

si tu soumets le form ... tu recharges la page ...

le principe est de faire une requete ajax qui pointe sur ton fichier sur le serveur
fichier qui va rediger le json.

lors du retour ajax tu recupères le string retourné par le serveur.

en l'occurrence si tu ne souhaites récupérer qu'un json, jquery possède cetet methode :
http://api.jquery.com/jQuery.getJSON/

cette page te montre la methode avac ajax classique ou avec getJson
31/05/2011, 16h24
doudoubens

Merci!

je suis tjrs coincé à l'étape : récuperer les données json depuis le servlet ....
01/06/2011, 08h30
SpaceFrog

Montre nous ou tu en es avec ton code ...

Dans ma page html :

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
<script type="text/javascript">
  $(document).ready(function() {
 
		  $.get('/menu.jsp', {  //servlet qui contient les liens vers les autres pages html présentes.
				selected : "ma_page_avec_formulaire"
			}, function(data) {
				$('#navigation').html(data);
			});	
 
	});
function display(){
	$("input#getcameralist").submit(function() { 
    $.ajax({ 
                   type:"POST", 
                   url:"http://localhost:22001/InputSearch",  //lien vers le servlet qui renvoi la list json ,je ne suis pas sur de cet appel .
                   cache: false,   
                   data:{},    
                   dataType: 'json',   
          			success:function(myArrayList){      
                       alert(myArrayList[0].latitude);    //je souhaite pour le moment afficher la latitude du premier élément, pour ensuite l'afficher sur la map déja chargé sur ma page.
              }
                   });
 
	  });
 }
 
</script>

voici la partie du formulaire :

Code:

1
2
3
4
5
6
7
8
9
<form id="myform" method="post">   //j'ai enlevé action="/InputSearch" je souhaite que ca soit Ajax qui récupère le tableau Json d'où l'appel a la fonction "display" dans la balise input ci dessous
			<input type=text align="middle" size=51 name=query_value
				id="query_value">
 
			<p style="text-align: center;">
				<input id="getcameralist" type="submit"  align="middle"
					action="display" size=13 value="Search ">
			</p>
		</form>

Ma classe servlet qui s'occuper de renvoyer le tableau json:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
public class SearchCamServlet extends HttpServlet{
public  void doGet(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException {
 
		// TODO Auto-generated method stub
		doPost(request, response);
 
	}
 
	public  void doPost(HttpServletRequest request,	HttpServletResponse response)throws ServletException, IOException {
		response.setContentType ("text/html"); 
		response.setCharacterEncoding("UTF-8");
		response.setHeader("Cache-Control", "no-cache");
 
 
		(...traitement du string entrée par lutilisateur dans le formulaire et renvoi du tableau json ...)
 
				                     response.getWriter().write(gson.toJson(array).toString());
 
}
}

tableau json renvoyé par le servlet:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{"myArrayList":[
				{
				"name":"lieu1",
				"latitude":"44.50669",
				"longitude":"-69.797974"
				},
				{
				"name":"lieu2",
				"latitude":"43.18355",
				"longitude":"-85.892945"
				},
				{
				"name":"lieu3",
				"latitude":"40.616904",
				"longitude":"-74.094129"
				}
]}

En cliquant sur le boutton "search" rien ne se passe , la page se recharge seulement...

01/06/2011, 11h31
SpaceFrog

que retourne un simple

Code:

alert(myArrayList)

dans le success ?.
01/06/2011, 11h45
doudoubens

Citation:

Envoyé par SpaceFrog

que retourne un simple

Code:

alert(myArrayList)

dans le success ?.

Il ne retourne rien quand je clique sur le bouton "search", la page se recharge seulement.

Soit l'appel à la fonction "display" n'est pas bon ,soit l'appel à ma servlet pour la récupération de mon tableau est erronée.
01/06/2011, 11h51
SpaceFrog

heu ... qui dit ajax dit pas de rechargement !!!!!

Citation:

Envoyé par SpaceFrog

heu ... qui dit ajax dit pas de rechargement !!!!!

j'ai finalement procéder autrement :

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
38
39
40
41
42
 
var xmlHttp;
 
 
function startRequest(){
	alert("call function OK"); //affichage ok
	createXmlHttpRequest();
 
var u1=document.getElementById("query_value").value;
	alert(u1); //affichage de ce que j'ai tappé dans le champs input OK
 
xmlHttp.open("GET","http://localhost:22001/InputSearch?query_value="+u1 ,true);
xmlHttp.setRequestHeader("Content-type", "application/json");
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.send(null);
}
 
function createXmlHttpRequest()
{
	alert("appel createXMLHTTPRequest"); //affichage OK
    if(window.ActiveXObject){
     xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
 
 else if(window.XMLHttpRequest)
 {
     xmlHttp=new XMLHttpRequest();
  }
 
}
 
function handleStateChange()
{
 
	if (xmlHttp.readyState == 4 && xmlHttp.status == 200|| xmlHttp.status == 0){ 
		var json = eval('(' + xmlHttp.responseText + ')');
		alert(json.myArrayList[0].name);  //  OK
		alert(json.myArrayList[0].latitude);  //  OK
		alert(json.myArrayList[0].longitude);  //  OK
 
	  }
    }

Code:

1
2
3
4
5
6
form id="myform" ></form>
		<input type=text align="middle" size=51 name="query_value"
			id="query_value">
		<p style="text-align: center;">
				<button id="getcameralist" align="middle" size=13 onclick = "startRequest();">Search a virtual sensor</button>
		</p>

L'affichage fonctionne :ccool: maintenant je dois assigner chaque latitude , longitude à ma carte google map ... pour afficher pour chaque lieu un marqueur et avoir un zoom adapté