Traitement requête AJAX en GET via PHP

**Qumran59** · 11/11/2015, 09h52

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

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

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

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

**Qumran59** · 11/11/2015, 16h12

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 :

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

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
{
  "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

**Qumran59** · 11/11/2015, 17h34

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,

**NoSmoking** · 11/11/2015, 18h25

Bonjour,

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

**Qumran59** · 11/11/2015, 20h48

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 :

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

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

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,

**NoSmoking** · 11/11/2015, 21h16

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 :

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

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

Traitement requête AJAX en GET via PHP

AJAX

Vue hybride

Discussions similaires

Partager

Partager