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