afficher le résultat d'une recherche ajax pour POST

afficher le résultat d'une recherche ajax pour POST - PHP - Programmation

Marsh Posté le 11-04-2018 à 17:09:07    

Bonjour,  
 
Voilà plusieurs jours que je recherche a faire un moteur de recherche simple en ajax , il fonctionne mais je n'arrive pas à afficher le resultat de la recherche dans un champs précis (comme si j'avais fait un simple menu déroulant genre  
<select name ='client'>
<option value.....
 
 
ou encore dans un champ texte bref pas comme il fait maintenant en haut ou en bas de l'écran suivant ou je met le code que voici :  
 
Bref la récupérer pour pouvoir la poster avec un formulaire php ce qui n'est pas le cas maintenant
 
J’espère que je suis arrivé a me faire comprendre sinon n'hésitez pas à me poser des question  :)  
 
merci d'avance
 

Code :
  1. <html>
  2. <head>
  3. <title></title>
  4. </head>
  5. <body>
  6. <!--debut du formulaire-->
  7. <form class="ajax" action="ajax-search4.php" method="get">
  8. <p>
  9.  <label for="q">Rechercher un article</label>
  10.  <input type="text" name="q" id="q" />
  11. </p>
  12. </form>
  13. <!--fin du formulaire-->
  14. <!--preparation de l'affichage des resultats-->
  15. <div id="results"></div>
  16. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  17. <script type="text/javascript">
  18. $(document).ready( function() {
  19.   // détection de la saisie dans le champ de recherche
  20.   $('#q').keyup( function(){
  21.     $field = $(this);
  22.     $('#results').html(''); // on vide les resultats
  23.     $('#ajax-loader').remove(); // on retire le loader
  24.     // on commence à traiter à partir du 2ème caractère saisie
  25.     if( $field.val().length > 1 )
  26.     {
  27.       // on envoie la valeur recherché en GET au fichier de traitement
  28.       $.ajax({
  29.    type : 'GET', // envoi des données en GET ou POST
  30. url : 'ajax-search4.php' , // url du fichier de traitement
  31. data : 'q='+$(this).val() , // données à envoyer en  GET ou POST
  32. beforeSend : function() { // traitements JS à faire AVANT l'envoi des
  33.  $field.after('<img src="ajax-loader.gif" alt="loader" id="ajax-loader" />'); // ajout d'un loader pour signifier l'action
  34. },
  35. success : function(data){ // traitements JS à faire APRES le retour d'ajax-search.php
  36.  $('#ajax-loader').remove(); // on enleve le loader
  37.  $('#results').html(data); // affichage des résultats dans le bloc
  38. }
  39.       });
  40.     }
  41.   });
  42. });
  43. </script>
  44. </body>
  45. </html>


Message édité par cyberpilou1410 le 11-04-2018 à 20:01:34
Reply

Marsh Posté le 11-04-2018 à 17:09:07   

Reply

Marsh Posté le 12-04-2018 à 18:36:42    

Bonjour,
 
Et comment avez-vous tenté de faire pour afficher le résultat à l'endroit souhaité ?


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 15-04-2018 à 10:58:33    

salut,
 
le problème est-il toujours d'actualité ?
 
généralement, les requêtes Ajax ne retournent pas une page ou du code html tout prêt, c'est souvent une structure xml ou json qui doit être décortiquée dans ta fonction success.
 
que retourne ta fonction php ?
 
si tu veux un peu d'aide :  
modifie ta fonction success telle quelle :  
success : function(data){ // traitements JS à faire APRES le retour d'ajax-search.php
  console.log("données retournées : ",data); // <<<<<--- *****  ICI  *****
 $('#ajax-loader').remove(); // on enleve le loader
 $('#results').html(data); // affichage des résultats dans le bloc
}
 
Cette modification affiche "data" dans ta console (Ctrl+shit+i dans firefox ou F12 chrome)
ouvrir la console avant ta requête ...
 
ensuite lance une requête et fais un copier coller du résultat, déplie la variable dans console pour voir les "sous-champs",... les propriétés quoi...
 
bonne suite.


Message édité par erickred le 15-04-2018 à 10:59:03
Reply

Sujets relatifs:

Leave a Replay

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