javascript ajax php soulagement

Page 3 sur 3 Précédent  1, 2, 3

Voir le sujet précédent Voir le sujet suivant Aller en bas

Re: javascript ajax php soulagement

Message  antare le Lun 5 Mai 2008 - 14:22

ok

alors, pour commencer, j'ai utilisé XHRconnection, qui est une classe javascript, téléchargeable sur le net ici: [Vous devez être inscrit et connecté pour voir ce lien]
au début, j'avais developpé moi meme la classe, mais un collegue m'a dit qu'il y avait déjà ca de dispo sur internet, alors hop, download, et ca rend les scripts beaucoup plus propres

ensuite, voila ce qui tourne sur le client:


<head>
<title>Autocomplete</title>
</head>
<html>
<body>
<form name="form_selects" id="form_selects" action="" method="" onsubmit="return false;"> <div id="divdesortie" style="display:none;position:absolute; top:10; left:200; background-color:yellow;"> toto </div> <script type="text/javascript" src="js/XHRConnection.js"></script>
<script language = "javascript">
function select_change(index_selection) { //fonction qui permet de mettre à jour le champ input avec la valeur selectionnee
index_selection=document.form_selects.test_select.selectedIndex;
val_selection= document.form_selects.test_select.options[index_selection].value;
document.getElementById("divdesortie").style.display="none";
document.getElementById("liste1").value=val_selection;
}

var afficheListe = function(obj) {
var reponse_texte=obj.responseText;
var reponse_tableau=reponse_texte.split("__");
var reponse_entiere="<select id='test_select' name='test_select' size=10 onchange='select_change(this.selectedIndex)'>";
for (var i=0; i<reponse_tableau.length-1; i++)
{
reponse_entiere=reponse_entiere+"<option value='"+reponse_tableau[i]+"'>"+reponse_tableau[i]+"</option>";
}
reponse_entiere=reponse_entiere+"</select>";
document.getElementById("divdesortie").style.display="";
document.getElementById("divdesortie").innerHTML=reponse_entiere;
}
function recherche(f) {
var l1 = f.elements["list1"];
var index = l1.value;
if (index.length<4) return; // recherche a partir de 4 caracteres
if(index < 1) // ca, ca ne sert à rien, y a qu a virer le if
var toto=0;
else {
var XHR = new XHRConnection();
XHR.appendData('variable_php', document.getElementById('list1').value); //variable_php envoye method post
XHR.sendAndLoad('test.php', 'POST', afficheListe); //au script php
}
}

</script>
<input name="liste1" id="list1" autocomplete="off" onkeyup='javascript:recherche(this.form);'> <!-- le champ input dans lequel -->

</form>
</body>
</html>



et puis il y a le php qui tourne sur le serveur et qui envoie les données au html qui tourne côté client:

[size=9]
<?
require ("sqlconf.php");
@mysql_connect($sqlserver , $login , $password) or die ('connexion à la base impossible'); @mysql_select_db($sqldb); $sql="select nom from switchs where nom like '".$_POST["variable_php"]."%' order by nom;"; // variable_php recupere par method POST $resultat=mysql_query($sql); while ($ligne=mysql_fetch_array($resultat))
{
$string= $ligne["nom"]."__"; // le __ va servir a spliter la chaine de caractere et faire un tableau avec les noms de machine
echo $string; // ce qui est ecrit, est ce qui est recupere de l'autre cote par javascrip
}
mysql_close();
?>
[/size]


Et voila.

la première partie, que tu enregistres avec un .html avec le nom que tu veux, sert à créer un champ input normal dans le formulaire. il s'appelle "liste1". Et il y a aussi, dans le même formulaire un select dans un div caché au début. Le select s'appelle "test_select". bien sur, comme il est dans la div invisible, il est aussi invisible au début.

voila comment ca fonctionne:

quand tu lances le premier .html, il t'affiche un champs de saisie, et c'est tout. Dans ce champs, a chaque fois que tu tapes quelque chose, tu déclenches la fonction "recherche".
dans la fonction, tant que on n'est pas arrivé à 4 caracteres, il ne se passe rien. Pas la peine de commencer à chercher dès le premier caractere.mais ca, tu peux le changer.
quand t'arrives au quatrieme caractere, tu lances la fonction, et la, la fonction envoie ce que tu as tapé (donc ici, ta chaine de 4 caracteres) au script test.php qui se trouve sur le serveur. il envoie l'information avec la methode POST.

test.php récupere la chaine, et va se connecter à la base de données mysql pour faire une recherche avec la chaine qu'elle vient de recevoir, puis fait simplement un 'echo' du résultat, sous forme d'une seule chaine. C'est pour ca que j'ai utilisé "__" (2 underscores) pour pouvoir spliter la chaine de caractere en tableau. Bref, le test.php renvoie la chaine de caractere qui correspond au nom des switchs, séparés par des "__".

sur le javascript, on recupere ca dans la variable 'obj.reponseText', il le split, fabrique un select avec dans la div invisible, puis rend la div visible.

A partir de la, a chaque fois que tu tapes un caractere de plus dans ton champs texte, il re demande au serveur de lui donner les informations avec la nouvelle chaine, et refait la liste select avec

je me rends bien compte que c'est pas bien claire, mais lance-toi, et n'hesite pas à me demander au fur et a mesure concretement quand t'as des soucis

antare
Modérateur

Nombre de messages : 1316
Date d'inscription : 08/10/2007

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: javascript ajax php soulagement

Message  antare le Lun 5 Mai 2008 - 14:24

ah juste un dernier truc, dans le code de test.php tu vois que j'ai un include de sqlconf.php, ce truc contient le nom du serveur, de la base, user et mot de passe pour se connecter à la base. C'est tout. rabbit
avatar
antare
Modérateur

Nombre de messages : 1316
Date d'inscription : 08/10/2007

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: javascript ajax php soulagement

Message  V-Twin le Lun 5 Mai 2008 - 14:34

Merci Antare, mais je n'y connais rien du tout en développelement...(Hélas parfois...)
Tu fait tourner ça sur quoi comme machine (Unix, Windows?) quel serveur Web (je connais Apache pour php, mais pour Ajax??)
Au fait, la classe que tu télécharge avec ton lien, tu le met où?
Merci d'avance pour le script.
avatar
V-Twin
Grade:Aluminium

Masculin Nombre de messages : 1443
Age : 33
Localisation : chambéry (73)
Date d'inscription : 10/11/2007

Voir le profil de l'utilisateur http://maison.e-labbe.eu

Revenir en haut Aller en bas

Re: javascript ajax php soulagement

Message  antare le Lun 5 Mai 2008 - 14:42

alors mon serveur web a moi tourne sur un unix HP-UX, mais tu peux le faire tourner sur ce que tu veux, un windows aussi. c'est u serveur apache.

ne te trompes pas sur ajax, ce n'est pas un langage, c'est une facon d'utiliser ce qui existe déjà. Dans toutes cette histoire, il n'y a rien de plus que du javascript et du php. ajax, c'est asynchronous javascript et xml ou un truc comme ca. c'est tout, c'est pas un langage, donc, quand on te dit que un truc a ete fait en ajax, c'est un abus de langage. Ca a été fait en javascript, mais d'une certaine facon. De toutes facons, t'inquiete pas, ca tournera sans modifications sur ton serveur apache

le download, c'est juste un fichier js. Moi, j'ai fait un repertoire "js" au même niveau que mes scripts, et j'ai mis le fichier dedans.
avatar
antare
Modérateur

Nombre de messages : 1316
Date d'inscription : 08/10/2007

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: javascript ajax php soulagement

Message  Tétoitator le Lun 5 Mai 2008 - 14:44

antare a écrit:a. c'est un serveur apache.

Pourvu qu'il ne parte pas en fumée. clown
avatar
Tétoitator
Administrateur

Masculin Nombre de messages : 10484
Age : 55
Localisation : Les Deux Sèvres. Parthenay
Date d'inscription : 30/10/2007

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: javascript ajax php soulagement

Message  Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Page 3 sur 3 Précédent  1, 2, 3

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum