Posts de mixed

Ejemplo de uso Ajax con javascript

Editado 2014-08-10 19:41:58 por Víctor
Categoría : mixed

Anem a comprovar l'usuari i el seu password amb ajax i js d'un formulari de login. Primer des del html anomenem una funci&oacute; amb l'element onsubmit&nbsp;a&nbsp;l'objecte formulari.
Per a que funcioni correctament la validaci&oacute; DOM aquest ser&agrave; el 1er formulari de la p&agrave;gina o haur&iacute;em de canviar getElementsByTagName i getElementByName&nbsp;per&nbsp;getElementById i afegir id en els camps input. &lt;form action="myAction.html" onsumbit="return checkIniciSessio()" id="form"&gt; &lt;label&gt; Correu &lt;/ label&gt; &lt;input type="email" name="email" class="email"&gt; &lt;/ div&gt; &lt;div&gt; &lt;label&gt; Password &lt;/ label&gt; &lt;input name="pass" type="password" class="input"&gt; &lt;/ div&gt; &lt;/ form&gt; En el document javascript tenim la funci&oacute; checkIniciSessio function checkIniciSessio () { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var response = false; &nbsp;&nbsp;&nbsp;&nbsp; / / Recollim els valors del mail i el password &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var x = document.getElementsByName ('email') [0]. value; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var i = document.getElementsByName ('pass') [0]. value; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; / / Aquesta &eacute;s la funci&oacute; on fem servir ajax &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; checkMailUserAjax (x, i); &nbsp;&nbsp;&nbsp;&nbsp; return false; } La funci&oacute; que utilitza AJAX. He conservat els alerts comentats. function checkMailUserAjax (mailref, pass) { &nbsp;&nbsp;&nbsp;&nbsp; var email =&nbsp;mailref; &nbsp;&nbsp;&nbsp;&nbsp; var thisPass = pass; &nbsp;&nbsp;&nbsp;&nbsp; / / alert (email + '' + thisPass) &nbsp;&nbsp;&nbsp;&nbsp; var peticion_http = null; &nbsp;&nbsp;&nbsp;&nbsp; if (window.XMLHttpRequest) peticion_http = new XMLHttpRequest (); &nbsp;&nbsp;&nbsp;&nbsp; else if (window.ActiveXObject) peticion_http = new ActiveXObject ("Microsoft.XMLHTTP"); &nbsp;&nbsp;&nbsp;&nbsp; peticion_http.onreadystatechange = getDisponibilitatContacto; &nbsp;&nbsp;&nbsp;&nbsp; peticion_http.open ("POST", "ruta_a_arxiu/mail_check.php", true); &nbsp;&nbsp;&nbsp;&nbsp; peticion_http.setRequestHeader ("Content-type", "application/x-www-form-urlencoded"); &nbsp;&nbsp;&nbsp;&nbsp; peticion_http.send ("correuElectronic&nbsp;=" + email + "&amp;pass =" + thisPass&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp; function getDisponibilitatContacto () { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (peticion_http.readyState == 4) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (peticion_http.status == 200) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (peticion_http.responseText == 1) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; / / alert (peticion_http.responseText + "* Aquest email / password Estan OK"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; refForm = document.getElementById ('form'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; refForm.submit (); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; else if (peticion_http.responseText == 0) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; / / alert (peticion_http.responseText + "* Aquest email / password no coincideixen"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; miSpan = document.createElement ("span"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; miSpan.setAttribute ("style", "color: red"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; miText = document.createTextNode ("* Aquest email / password no coincideixen"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; miSpan.appendChild (miText); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; document.getElementsByTagName ('label') [0]. innerHTML = ""; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; document.getElementsByTagName ('label') [0]. appendChild (miSpan); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } else { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert ("&Eacute;S impossible no pot ser ..." + peticion_http.responseText) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp; } } La p&agrave;gina mail_check.php. Es suposa que temin una bbdd anomenada "miBase" amb una taula anomenada usuaris amb els camps&nbsp;&nbsp;email i pass. &lt;? php $numero_total = 0; $connexio= mysqli_connect ("localhost", "root", "contrasenya", "miBase"); / / Ccomprovem la connexi&oacute; if (mysqli_connect_errno ()) &nbsp;&nbsp; { &nbsp;&nbsp; echo "Failed to connect to MySQL:". mysqli_connect_error (); &nbsp;&nbsp; } $connexio&nbsp;= array (); $result = $connexio-&gt; query ("SELECT COUNT (*) as c FROM usuaris WHERE" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; . "email = '". $ _POST["correuElectronic"]. "' and pass = '". $ _POST["pass"]. "'"); $count = $result-&gt;fetch_object()-&gt;c; $result-&gt;free(); $connexio-&gt;close(); / / echo "there are {$count} rows in the table"; $numero_total = $count; //opcional... sleep (1); if ($numero_total&nbsp;&gt; 0) print 1; else print 0; ?&gt; &nbsp; Espero que sigui d'ajuda. Salutacions

Logueate para comentar. Logueate o registrate...

PHPAdictos

Otros post de mixed

Mixed

Posts de mixed

Ejemplo de uso Ajax con javascript