[JQUERY]Problème requête ajax en GET via PHP

Problème requête ajax en GET via PHP [JQUERY] - Javascript/Node.js - Programmation

Marsh Posté le 11-11-2015 à 17:14:00    

Bonjour,
 
Pour un projet je dois réaliser en urgence un moteur de recherche basé sur une API wikipédia, en jQuery et Ajax,  pour cela j'ai déjà le code PHP.
Je ne fais du jQuery et de l'Ajax que depuis une semaine
En gros, je crée une page HTML très sommaire avec un champ de saisie et un input de type submit. L'utilisateur saisit quelque chose et ça doit lui renvoyer en dessous du formulaire plusieurs liens en rapport avec sa recherche.Comme Google quoi. Je met tout cela dans une div.
Ensuite, lorsque que l'utilisateur clique sur un des liens, celui ci doit s'ouvrir dans une autre div placée à droite de la première.  
Pour l'instant (après moults galères), j'arrive grâce à une requête de type .ajax() en GET à récupérer ce que je veux, que je convertis en fichier lisible grâce à JSON.stringify()
 
Voici mon code HTML :

Citation :

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


 
Voici mon code js :

Citation :

$(document).ready(function() {
 $('#bouton').click(function(e){
  e.preventDefault()
  var saisie = $('#search').val();
  $.ajax({
       type: 'GET',
       url: 'proxy.php?search=' + saisie,
       timeout: 10000,
       success: function(data) {
         $('#resultats').html(JSON.stringify(data));  
       },
       error: function() {
         alert('La requête n\'a pas abouti');  
       }
  });          
 });    
});


 
Et enfin le fichier "proxy.php" fourni qui me sert de base :

Citation :

<?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\""}';
}
 
?>


 
Jusque là, dans ma div de gauche je récupère un bloc de texte de ce type, dont voici un extrait :

Citation :

{"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, dans laquelle l'utilisateur pourra cliquer sur un lien dont le contenu s'affichera afficher dans ma balise div #detail située à sa droite. J'ai beau chercher je ne vois pas par quel bout m'y prendre, comment faire svp ?
 
En vous remerciant :)
 
Merci


Message édité par qumran59 le 11-11-2015 à 17:15:16
Reply

Marsh Posté le 11-11-2015 à 17:14:00   

Reply

Marsh Posté le 11-11-2015 à 17:32:54    

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,

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed