afficher json avec ajax

[doudoubens]

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

[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/

[doudoubens]

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 ?

[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

[doudoubens]

Merci!

je suis tjrs coincé à l'étape : récuperer les données json depuis le servlet ....

[SpaceFrog]

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

[doudoubens]

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...

[SpaceFrog]

que retourne un simple

Code :

alert(myArrayList)

dans le success ?.

[doudoubens]

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.

[SpaceFrog]

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

[doudoubens]

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 maintenant je dois assigner chaque latitude , longitude à ma carte google map ... pour afficher pour chaque lieu un marqueur et avoir un zoom adapté