HTTP POST de formulaire en PHP utilisant AJAX
Cet exemple démontre HTTP POST de formulaire à remplir le formulaire HTML sur le serveur et l'affichage de la réponse en utilisant AJAX.
HTML de la page
"text/javascript" > var time_variable ; function getXMLObject ( ) //XML OBJECT { var xmlHttp = false ; try { xmlHttp = new ActiveXObject ( "Msxml2.XMLHTTP" ) // For Old Microsoft Browsers } catch ( e ) { try { xmlHttp = new ActiveXObject ( "Microsoft.XMLHTTP" ) // For Microsoft IE 6.0+ } catch ( e2 ) { xmlHttp = false // No Browser accepts the XMLHTTP Object then false } } if ( ! xmlHttp && typeof XMLHttpRequest != 'undefined' ) { xmlHttp = new XMLHttpRequest ( ) ; //For Mozilla, Opera Browsers } return xmlHttp ; // Mandatory Statement returning the ajax object created } var xmlhttp = new getXMLObject ( ) ; //xmlhttp holds the ajax object function ajaxFunction ( ) { var getdate = new Date ( ) ; //Used to prevent caching during ajax call if ( xmlhttp ) { var txtname = document. getElementById ( "txtname" ) ; xmlhttp. open ( "POST" , "testing.php" , true ) ; //calling testing.php using POST method xmlhttp. onreadystatechange = handleServerResponse ; xmlhttp. setRequestHeader ( 'Content-Type' , 'application/x-www-form-urlencoded' ) ; xmlhttp. send ( "txtname=" + txtname. value ) ; //Posting txtname to PHP File } } function handleServerResponse ( ) { if ( xmlhttp. readyState == 4 ) { if ( xmlhttp. status == 200 ) { document. getElementById ( "message" ) . innerHTML = xmlhttp. responseText ; //Update the HTML Form element } else { alert ( "Error during AJAX call. Please try again" ) ; } } } </ script > <body> <form name="myForm"> <table> <tr> <td>Enter Name</td> <td><input type="text" name="txtname" id="txtname" /></td> </tr> <tr> <td colspan="2"><input type="button" value="Submit" onclick="ajaxFunction();" /></td> </tr> </table> <div id="message" name="message"></div> </form> </body> </head> </html> <html> <head> <title> PHP en utilisant AJAX </ title> type de script <= "text / javascript" time_variable var>; getXMLObject function () / / XML Object (var xmlHttp = false; try (xmlHttp = new ActiveXObject ( "Msxml2.XMLHTTP") / / Pour Old Microsoft Navigateurs) catch (e) (try (xmlHttp new ActiveXObject = ("Microsoft.XMLHTTP") / / Pour Microsoft IE 6.0 +) catch e2) ((xmlHttp = false / / Non navigateur accepte l'objet XMLHTTP puis false)) if (! xmlHttp & & typeof XMLHttpRequest! = "undefined") (xmlHttp = new XMLHttpRequest (); / / Pour Mozilla, Navigateurs) xmlHttp retour Opera; / / obligatoire Déclaration retour de l'ajax objet créé var =) XMLHTTP getXMLObject new (); / / XMLHTTP détient la fonction objet ajaxFunction ajax () (var = getdate new Date (); / / Utilisé pour prévenir la mise en cache pendant un appel ajax if (xmlhttp) (var = txtName document. getElementById ( "txtName"); XMLHTTP. open ("POST", "testing.php", true); / / testing.php appel en utilisant la méthode POST XMLHTTP. onreadystatechange = handleServerResponse; XMLHTTP. setRequestHeader ("Content-Type", "application / x-www-form-urlencoded '); XMLHTTP. send ("txtName =" + txtName. valeur); / / Affichage txtName de fichiers PHP)) handleServerResponse function () (if (xmlhttp. readyState == 4) (if ( XMLHTTP. status == 200) (document. getElementById ("message"). innerHTML = XMLHTTP. responseText; / / mise à jour de l'élément de formulaire HTML) else (alert ("Erreur lors de l'appel AJAX. S'il vous plaît essayer de nouveau");))) </ script> <body> <form name="myForm"> <table> <tr> <td> Entrée <Nom / td> <td> <input type = "text" name = "txtName" id = "txtName" /> </ td> </ tr> <tr> <td colspan="2"> <input type="button" value="Soumettre" onclick="ajaxFunction();" /> </ td> </ tr > </ table> <div id="message" name="message"> </ div> </ form> </ body> </ head> </ html>
PHP Code
<? $_POST [ 'txtname' ] ; $ A = $ _POST ['txtName']; . $a ; echo "Good Morning". $ a; ?>
Explication du code AJAX
Ici, j'ai déclaré 3 fonctions JavaScript:
getXMLObject () - Responsable de la création de l'objet AJAX selon le navigateur
ajaxFunction () - responsable de la convocation page PHP via un appel AJAX
handleServerResponse () - Responsable pour l'affichage des données récupérées à partir du serveur
Comment fonctionne le code AJAX:
- Lorsque le chargement de la page je crée un objet AJAX en appelant la getXMLObject () et retourner l'objet créé dans la variable XMLHTTP
- Lorsque l'utilisateur clique sur l'entrée, Button ajaxFunction () est appelée pour savoir si des vérifications qui l'objet Ajax est créé ou non et en fonction de qui appelle le script distant. Voici une fonction de gestion de handleServerResponse est également définie pour la récupération de la valeur à partir du serveur
- Lorsque le readyState de l'appel AJAX atteint 4 et le statut HTTP est de 200, nous passons les données récupérées depuis le serveur vers la zone de texte
Explication du code PHP
- Je demande $ _POST pour récupérer le contenu du message envoyer par le biais d'appels Ajax
- Enfin je demande d'écho pour envoyer la réponse Retour à la page d'appel
Recherche personnalisée
Articles populaires:
- OOPS en PHP 5 - __destruct () Méthode
- Contrôle de fin de session au cours de l'Ajax d'appel
- AJAX Demo
- Comment AJAX Travaux
- Tutorial PHP5 - méthode magique __autoload
- Déclaration préparée à MySql en PHP
- Tutorial PHP5 - __unset () méthode magique
- Exploration de méthodes magiques en PHP 5
- Lecture de documents Excel à partir d'applications PHP
- Programmation Ajax
Good site I "Stumbledupon" aujourd'hui et lui a donné un faux pas pour vous .. hâte de voir ce que vous avez .. plus tard
Vous avez fait du bon travail
Nice post, Merci.
Excellent tutoriaux pal .... Je cherchais ce depuis longtemps, et finalement trouvé un!
Merci
Je vous remercie beaucoup. Il fonctionne parfaitement!
Salut où il est
Qu'en est-il si l'on utilise plus d'une entrée??
Salut,
Oui vous pouvez faire appel AJAX avec plus d'une entrée.
Dites si vous avez deux TextBox (TextBox1 et TextBox2) dans votre code HTML qui doit être passé par AJAX que, envoyez méthode devra données suivantes:
xmlhttp.send ("txtName =" + Textbox1.value + "& txtname1 =" + textbox2.value);
Merci,
Hitesh Agarwal
1000000 fois merci ... http://www.ghyoom.com/
nice one
u Thnk beaucoup Budy ... ... ... ... ... ....
doux et propre exemple ... Good Job!
Qu'en est-il si l'on utilise plus d'une forme?
Dans ce cas, vous devrez saisir les données des formulaires en utilisant JavaScript et envoyer ces données à la méthode ajax appel individuel.
Excellent tutoriel. Je voulais juste dire Merci d'avoir pris le temps de l'écrire!