Traitement requête AJAX en GET via PHP

Version imprimable

Salut,

Mon problème concerne un devoir que je dois rendre mardi prochain.

Je débute en jQuery, je connais aussi un peu PHP, j'arrive à récupérer des données via jQuery, que ce soit avec la méthode .ajax(), .load() ou .get(). Jusque là, je n'ai fait que récupérer des données stockées dans des tableaux via des scripts script php.

Or, le devoir du prof est le suivant :

Créer une page simple HTML, en passant par Bootstrap pour une édition très sommaire, le but étant de créer une sorte de moteur de recherche wikipédia. On crée donc un simple champ de saisie et un bouton d'envoi. Ça c'est OK.

En utilisant jQuery, on doit aller récupérer en GET, via un script PHP fourni par le prof, qui utilise une API wikipédia pour nous renvoyer toutes les pages en lien avec ce que l'utilisateur aura saisi(ici je dois l'afficher dans la div #resultats.

Mon problème, c'est tout simplement que je ne récupère rien du tout, et que je n'ai même pas de message d'erreur.

Voici le code 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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
	<title>Formulaire Wikipédia</title>
	<meta charset="UTF-8">
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
 
 
</head>
 
<body>
	<div class="container">
		<h1>WikiSearchor <span> mon moteur de recherche préféré NEW!</span></h1>
 
		<form>
			<input type="text" id="search">
			<input type="submit" id="bouton">
		</form>
		<div class="row">
 
			<div class="col-md-6">
				<h2>Résultats</h2>
				<div id="resultats">
					<h3>K.maro</h3>
					Description
				</div>
			</div>
			<div class="col-md-6">
				<h2>Détails</h2>
				<div id="detail">
					<h3>K.maro</h3>
					blabla...
				</div>
			</div>
		</div>
	</div>	
 
 
	 <script src="jquery.js"></script>
	 <script src="formulaire.js"></script> 
</body>
</html>

Le code php fournit par le prof :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
 
header('Content-Type: application/json');
if ( isset( $_GET['search'] ) || isset( $_GET['title'] ) )
{
	$url = "https://fr.wikipedia.org/w/api.php?action=query&format=json";
	if ( isset( $_GET['search'] ) )
	{
		$url .= "&list=search&srsearch=".urlencode( $_GET['search'] );
	} else if ( isset( $_GET['title'] ) ) {
		$url .= "&prop=revisions&rvprop=content&titles=".urlencode( $_GET['title'] );
	}
 
	// chargement et affichage de la réponse brute de l'API wikipedia
	$request = curl_init( $url );
	curl_setopt($request, CURLOPT_SSL_VERIFYPEER, false);
	$response = curl_exec( $request );
	curl_close( $request );
} else {
	echo '{"error":"Et le paramètre \"search\" il est où ?? Au pire il me faut un paramètre \"title\""}';
}
 
?>

Et enfin mon code jQuery :

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
$(document).ready(function() {
	$('#bouton').click(function(){
	// 	// essai alert : 
		// var saisie = $('#search').val()
		// alert(saisie);
		var param = $('#search').val();
 		$('#resultats').load('proxy.php',param);
		// $.get('proxy.php?search=', function(data) {
	 //            $('resultats').html(data);
	    });        
 
	});
 
});
	// $.ajax({
 //              type: 'GET',
 //              url: 'proxy.php?search=bla',
 //              timeout: 3000,
 //              datatype:'html',
 //              success: function(data) {
 //                alert(data); 
 //              },
 //              error: function() {
 //                alert('La requête n\'a pas abouti'); 
 //              }
 
	//     });    		
	// });

J'ai rajouté en commentaire l'essai avec un .ajax() que j'ai tenté.

Merci de bien vouloir m'aider. :roll:

Je reviens vers vous car ÇA Y EST ! J'ai compris comment éxécuter la requête et récuérer le résultat de la saisie de l'utilisateur.
Voici mon nouveau code js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function() {
	$('#bouton').click(function(e){
    e.preventDefault(); //C'est ici qu'on annule l'envoie du formulaire, faut bien passer l'événement e à la fonction
    var saisie = $('#search').val();
    $.ajax({
        type: 'GET',
        url: 'proxy.php?search=' + saisie, // On concatène la valeur saisie par le visiteur à l'url à appeler
        timeout: 15000, 
        success: function(data) {
        	$('#resultats').html(JSON.stringify(data)); //juste une mise en garde, penses à faire un concole.log(data) avant de l'afficher si tu ne veux pas être surpris
        },
        error: function() {
            alert('La requête n\'a pas abouti');
        }
    });
    });
});

Pour afficher ce qu'il y a dedans, j'ai convertit les données récupérées en JSON en string avec la commandeJSON.stringify()que j'ai trouvé, ça m'affiche un truc en bloc dont voici un extrait :

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
{
  "batchcomplete": "",
  "continue": {
    "sroffset": 10,
    "continue": "-||"
  },
  "query": {
    "searchinfo": {
      "totalhits": 16399
    },
    "search": [{
          "ns": 0,
          "title": "Chat",
          "snippet": "voir Chat (animal) et Chat (homonymie). Felis silvestris catus Sous-espèce Felis silvestris catus (Linnaeus, 1758) Crâne de chat. Le chat domestique",
          "size": 139394,
          "wordcount": 16627,
          "timestamp": "2015-10-15T23:33:32Z"
        }, {
          "ns": 0,
          "title": "Chat sauvage",
          "snippet": "Wikimedia : chat sauvage, sur le Wiktionnaire Le Chat sauvage (Felis silvestris) est une espèce de félin. Le chat sauvage d'Europe, le chat sauvage d'Asie",
          "size": 1237,
          "wordcount": 166,
          "timestamp": "2015-11-09T19:16:08Z"
        }, {
          "ns": 0,
          "title": "Chat-léopard",
          "snippet": "Rév. du 16/02/1995 Le Chat-léopard (Prionailurus bengalensis), souvent appelé Chat léopard du Bengale et plus rarement Chat de Chine, est une espèce",
          "size": 5804,
          "wordcount": 651,
          "timestamp": "2015-07-23T17:59:36Z"
        },

Maintenant j'aimerai récupérer un affichage qui ressemble à une vraie page de résultat de moteur de recherche, dont je pourrai afficher à chaque ouverture de lien le résultat dans ma balise div #detail. J'ai beau chercher je ne vois pas par quel bout m'y prendre, comment faire svp ?

Merci :zoubi:

11/11/2015, 17h34
Qumran59

Apparemment sur un autre forum, on vient de me dire qu'en gros j'ai terminé l'exo, et que je ne peux pas obtenir mes données autrement qu'en JSON, ou les convertir comme je l'ai fait.
Est-ce dû au script PHP qui spécifie cela à la fin (script que je ne dois pas modifier) ?

Rien de plus à faire à part modifier le PHP alors ?

Merci,
11/11/2015, 18h25
NoSmoking

Bonjour,

Citation:

Mon problème concerne un devoir que je dois rendre mardi prochain.

quoiqu'il arrive tu reçois du serveur une chaine de caractères, tu as donc jusqu'à lundi pour regarder du coté de JSON.parse et for...in ;)

Merci beaucoup pour les pistes que tu me donnes.
JSON.parse(), j'avais déjà eu l'occasion de tomber dessus lors de mes recherches.
Parcourir avec une boucle for...in, j'en étais pas encore là, mais merci pour le conseil.

Néanmoins, avec le JSONparse(), encore et toujours le même problème dans ma boucle, lorsque je l'utilise j'ai toujours le même message d'erreur :
SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data
Voici mon code, inspiré presque point par point dans sa construction par un script trouvé dans un tuto anglosaxon :
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 $(document).ready(function() { $('#bouton').click(function(e){ e.preventDefault(); //C'est ici qu'on annule l'envoie du formulaire, faut bien passer l'événement e à la fonction var saisie = $('#search').val(); $.ajax({ type: 'GET', url: 'proxy.php?search=' + saisie, // On concatène la valeur saisie par le visiteur à l'url à appeler timeout: 15000, success: function(donnees) { console.log(donnees); var jsonObj = JSON.parse(donnees); var sortie; //= $('#resultats').appendTo('<p></p>') for (var i in jsonObj) { sortie = jsonObj[i]; } $('#resultats').html(sortie); // $('#resultats').text(JSON.stringify(donnees)); //juste une mise en garde, penses à faire un concole.log(data) avant de l'afficher si tu ne veux pas être surpris }, dataType: 'json', error: function() { alert('La requête n\'a pas abouti'); } });
Alors j'ai lu quelque part que JSON.parse() ne peut accueillir que des strings, j'ai donc essayé avec un JSON.parse(JSON.stringifydonnees) ma "parsification.
Je n'ai plus de message d'erreur, le texte de base mis dans ma div censée l'accueillir s'efface, mais ma div reste désespérément vide.

Bref, avant cela, j'ai fait des essais dans un autre fichier avec un code tout bête inspiré aussi d'un tuto sur le net et là pas de souci, ça m'affiche bien ce que je veux où je veux :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <script> $(function() { var textejson = '{"kiwis": 3, "url": "http://www.lesite.com"}'; var courses = JSON.parse(textejson); console.log(courses); var r = '<ul>' for (var i in courses) { r += '<li>' + courses[i] + '</li>' } r += '</ul>' $('div > div:first').html(r); }); </script>
Bref, si vous pouviez m'expliquer un peu mon souci, et un peu la logique du JSON;parse(), je vous en saurai gré.
Ah ! Et même si j'ai jusque lundi, j'ai hélas beaucoup de choses de prévu d'ici là; j'y ai déjà passé énormément de temps, je ne peux plus en consacrer beaucoup plus.
J'ai un certain âge, je suis en reconversion, et pas mal d'obligation.

Merci, :)

Comme tu utilises jQuery, il te faut préciser le type de données que tu attends en retour et tu aura directement ton objet JSON
Code:

1 2 3 4 5 6 7 $.ajax({ dataType: 'json', url: 'https://fr.wikipedia.org/w/api.php?action=query&format=json&list=search&srsearch=javascript', success: function( data) { console.log( data); } });
• jQuery.ajax().

Merci Nosmoking, ça a l'air limpide comme tu le présentes.
Seulement, le prof nous avait dit explicitement de mettre l'adresse que j'avais mis en url à la base.
Aussi, l'adresse que tu donnes est la même que celle utilisée dans le script PHP, sans le "javascript" à la fin néanmoins.
Revoici le code PHP (à ne pas toucher en principe) pour rappel :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <?php header('Content-Type: application/json'); if ( isset( $_GET['search'] ) || isset( $_GET['title'] ) ) { $url = "https://fr.wikipedia.org/w/api.php?action=query&format=json"; if ( isset( $_GET['search'] ) ) { $url .= "&list=search&srsearch=".urlencode( $_GET['search'] ); } else if ( isset( $_GET['title'] ) ) { $url .= "&prop=revisions&rvprop=content&titles=".urlencode( $_GET['title'] ); } // chargement et affichage de la réponse brute de l'API wikipedia $request = curl_init( $url ); curl_setopt($request, CURLOPT_SSL_VERIFYPEER, false); $response = curl_exec( $request ); curl_close( $request ); } else { echo '{"error":"Et le paramètre \"search\" il est où ?? Au pire il me faut un paramètre \"title\""}'; } ?>
Malgré tout, j'ai voulu essayer, j'ai remplacé l'url de base par la tienne :
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 $(document).ready(function() { $('#bouton').click(function(e){ e.preventDefault(); //C'est ici qu'on annule l'envoie du formulaire, faut bien passer l'événement e à la fonction var saisie = $('#search').val(); $.ajax({ type: 'GET', dataType: 'json', url: 'https://fr.wikipedia.org/w/api.php?action=query&format=json&list=search&srsearch=javascript'+saisie, // On concatène la valeur saisie par le visiteur à l'url à appeler timeout: 15000, success: function(donnees) { console.log(donnees); var jsonObj = JSON.parse(donnees); var sortie; //= $('#resultats').appendTo('<p></p>') for (var i in jsonObj) { sortie = jsonObj[i]; } $('#resultats').html(sortie); // $('#resultats').text(JSON.stringify(donnees)); //juste une mise en garde, penses à faire un concole.log(data) avant de l'afficher si tu ne veux pas être surpris }, error: function() { alert('La requête n\'a pas abouti'); } }); }); });
Et hélas, la requête ne passe pas et j'ai ce joli message d'erreur dans ma console :

Citation:

Blocage d'une requête multi-origines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur https://fr.wikipedia.org/w/api.php?a...h&srsearch=bla. Raison : l'en-tête CORS « Access-Control-Allow-Origin » est manquant.

J'ai essayé en amputant l'adresse de certains de ses éléments au fur et à mesure, mais toujours le même souci.
De ce que je comprend, je ne peux pas utiliser l'adresse à la fois dans js et dans PHP, comment remédier au problème dans ce cas précis ?

Je ne manquerai pas d'étudier la doc que tu m'as mis en lien un peu plus tard, merci :)

Citation:

Et hélas, la requête ne passe pas et j'ai ce joli message d'erreur dans ma console :

Je t'ai mis cela pour l'exemple et dans un cas "direct" il te faut utiliser un dataType: 'jsonp', voir la documentation

Citation:

Seulement, le prof nous avait dit explicitement de mettre l'adresse que j'avais mis en url à la base.

Ecoute ce qu'il te dit/demande ;)

Dans ce bout de code
Code:

1 2 3 4 5 6 7 $.ajax({ type: 'GET', dataType: 'json', url: 'proxy.php?search=' + saisie, // On concatène la valeur saisie par le visiteur à l'url à appeler timeout: 15000, success: function(donnees) { var jsonObj = JSON.parse(donnees); // INUTILE pris en charge par jQuery
tu peux utilser directement donnees.

Par exemple
Code:

1 2 3 4 5 6 7 8 success: function( donnees) { var result = []; var tab = donnees.query.search; // c'est ici qu'il y a des données $.each( tab, function(ind){ result.push( tab[ind].snippet); }); $('#article').html( '<p>' +result.join('</p><p>' +'</p>')); }

11/11/2015, 22h41
Qumran59

MERCI !!!

Désolé si j'ai du mal, mais en plus de débuter jQuery et ajax depuis une semaine en autodidacte, en guie de cours nous a juste eu droit à quelques diapos.
Et je ne fais du javascript que depuis moins d'un mois.

Citation:

Ecoute ce qu'il te dit/demande

:D Comme le bon pt'tit nélève à son professeur que je suis...

Pour la navigation dans le JSON j'avais essayé et tu m'as donné l'élément qui me manquait pour accéder aux données, la bouche each et le tableau ne sont que des formalités après, mais merci encore pour ton aide précieuse. ;)

Il ne me reste plus qu'à trouver comment mettre ça en lien et ouvrir ces mêmes liens dans ma div de droite, youhou !

J'espère ne pas revenir(à part pour mettre le sujet en "résolu") et trouver le reste tout seul comme un grand,

Bonne soirée !
12/11/2015, 19h21
Qumran59

Me revoilà avec mon fameux moteur de recherche.
Alors j'arrive à afficher le résultat de ma recherche ('proxy.php?search=') correctement
J'ai un peu mieux compris comment naviguer dans un fichier JSON.
Merci à NoSmoking ! :P

Seulement pour la deuxième partie(qui servira à afficher dans une autre div le détail que l'utilisateur aura choisi), le 'title'(dans le 'else if du PHP), je dois passer par un autre objet JSON, et là, la partie à laquelle je veux accéder a comme intitulé un "*", et non un mot.
Je m'explique, pour l'exemple du 'search', je pouvais accéder aux données que je souhaitais en faisant "tab[ind].snippet", là, avec cette méthode je ne peux pas faire "tab[ind].*
Comment faire pour accéder à des données qui n'ont pas de mot comme nom ,

Merci
16/11/2015, 21h19
NoSmoking
Citation:

je veux accéder a comme intitulé un "*", et non un mot.

*,+,- et / sont des opérateurs arithmétique en javascript et ne peuvent donc être utilisé comme cela.

Par contre il existe les caractères *,+,- et / que tu peux utiliser en les mettant entre quote '*', '+', '-', '/'.
Code:

1 2 3 4 5 6 7 8 9 10 var data = { '+': 'plusse', '-': 'moinsse', '/': 'divise', '*': 'multiplie' } for( var i in data){ console.log(i +' : '+data[i]) } console.log( data['+'])
16/11/2015, 21h51
Qumran59

Oui merci, j'avais trouvé comment faire au final.
J'arrive à récupérer un résultat via les deux URL séparément, ça c'est bon.

Nan, là mon souci c'est que je n'arrive pas à faire en sorte que lorsque je clique sur le titre d'un des résultats, ça affiche le détail de cette page uniquement et pas autre chose.
En gros, comment "capter" le titre que je clique pour l'envoyer ensuite être traité dans une deuxième requête ajax qui a l'autre URL ('proxy.php?title=').
On m'a parlé d'ajouter un bouton ou un lien à chaque titre de mon résultat, d'affecter une fonction au clic pour le traitement ajax, mais je ne vois pas comment faire, et hélas, je n'ai plus le temps de me prendre la tête dessus.

Merci encore

:?

Citation:

En gros, comment "capter" le titre que je clique pour l'envoyer ...

c'est au moment de traiter le retour JSON qu'il te faut formater ton code pour créer le lien.
Par exemple

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 success: function( data) {
     var tab = data.query.search;
    // construction d'une liste
     $.each( tab, function(ind){
        result.push( tab[ind].title);
     });
     $('#article').html( '<ul><li>' +result.join('</li><li>') +'</li></ul>');
     // événement sur le click des titre
     $('li').on('click', function(){
       alert( $(this).text());
     });
 }