Forum d'entraide PHPFrance

Bonjour a tous,

je suis un total debutant avec ajax que j'ai decouvert ce matin! Cela me parait grave cool car cela evite un rechargement total de mon interface intranet!

mon probleme concerne les moteurs de recherche!
j'ai eu beau lire differents tutos je pige pas encore tout!

j'ai le formulaire suivant qui permet d'effectuer une recherche!
j'ai du remplacer le submit par un button car sinon ca delirais!
mais cela semble normal si j'ai bien compris ce que j'ai lu!

le probleme est que desormais je ne sais pas recuperer la recherche pour aller recuprere le resutlat dans ma bdd!
En temps normal il suffit d'un simple et le tour est joue
if (isset($_POST['Submit']) && $_POST['Submit'] == 'Rechercher')

mais ici vu que l'on utilise un bouton j'aimerais comprendre comment je dois procéder!!

Si quelqu'un pouvais m'aider ca serais grave cool car je seche dessus depuis ce matin!!

grand merci

Salut,

C'est beau c'est bien ce bout de code mais la fonction javascript qui est appelée sur onclick est tout aussi importante.

Sinon as tu regardé un tuto "simple"

en gros lors du click sur le bouton tu appeles une fonction JS qui récupère le contenu des champs via "getElementById", par exemple. Ces contenus sont envoyés à une autre page contenant le script de recherche dans la base. Puis la 1ère page récupère le traitement Base de données.

bah ouais mais c'est la mon probleme, car je connais le php mais pas le js donc bon creer une fonction js qui recupere le contenu des champs deja ca moi suis larguer!
le script de recherche dans la base est fait!
c'est juste l'entre deux que je sais pas faire!

il doit suffir de recupere le champ recherche
apres moi avec php je recherche dans ma bdd simplement

mais comment faire cela??

pour récuper un contenu d'un champ de type TEXT ayant pour id=recherche =>

var recherche= document.getElementById('recherche').value;

ensuite tu dois avoir une ligne comme celle-ci:

xhr.send("recherche="+recherche);

pour récupérer dans l'autre fichier de traitement le contenu recherché (as tu regardé le tuto il y a un exemple avec des listes c'est quasi la même chose)

Ajax utilise un objet XHR (XML HTTP REQUEST) c'est à dire un objet lui permettant d'envoyer en arrière-plan une requête HTTP (URL) et recevoir le résultat en XML/HTTP.

L'objet XHR communique en mode Asynchrone, c'est à dire qu'entre le moment où l'URL est demandée et le temps où le résultat est reçu, le navigateur n'est pas bloqué (n'attend pas) contrairement au fonctionnement normal si on demande l'url via la barre d'adresse du navigateur.

Ceci veut dire que lorsqu'on programme la conversation XHR il faut prévoir un conteneur de texte/html qui sera connecté à l'objet XHR et où le résultat d'un appel d'url sera écrit.
Le conteneur de résultat texte/html peut être n'importe quelle balise du document HTML (div, input, textarea, body...) ou tout simplement une variable js.

Exemple algorthmique:
Pour instaurer un dialogue XHR client/serveur, il faut:

• 1. créer un objet XHR
  2. déclarer une fonction de réception du résultat connectée à un conteneur texte/html du document
  3. envoyer l'url

Le programme suivant illustre cet algo:

<script>
//Création de l'objet XHR
function créer_xhr(){
	var xhr =null;
	if(window.XMLHttpRequest) // Firefox et autres
   		xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject){ // Internet Explorer 
   			try {
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
		}
	return xhr; 
}
//Appel d'url via XHR et orientation du résultat dans un conteneur de texte/html
function callUrl(url, conteneur_résultat){
	// On crée un objet XHR
	var xhr = créer_xhr();
	// Si XHR absent ou url non valide
	if (xhr ==null || url ==null) conteneur_résultat.innerHTML = "Ajax ne peut pas ouvrir '"+url+"', Objet XHR absent ou l'URL n'est pas valide!";
	// Fonction d'attente du résultat
	xhr.onreadystatechange = function(){
			// Si le résultat est reçu, l'écrire dans le conteneur prévu
			if (xhr.readyState == 4){
				conteneur_résultat.innerHTML = (xhr.responseText);
			}
			// Si encore en attente du résultat
			else conteneur_résultat.innerHTML = "Veuillez patienter svp...";
	}
	// On appelle l'url et on attend la réponse en mode asynchronne
	xhr.open("GET",url,true);
	xhr.send(null);
}
</script>

<H1>Ajax</H1>
<!-- Démarreur du dialogue Ajax -->
<input type='button' value='Forum Php France' onclick='callUrl("http://www.phpfrance.com/forums", document.all.reponse1);' />
<!-- Conteneur prévu pour recevoir le résultat du dialogue Ajax -->
<div id="reponse1"></div>
<!-- Démarreur du dialogue Ajax -->
<input type='button' value='Microsoft' onclick='callUrl("http://www.microsoft.com", document.all.reponse2);' />
<!-- Conteneur prévu pour recevoir le résultat du dialogue Ajax -->
<div id="reponse2"></div>