{ Ajax con JQuery}

Recupero dei campi input....

Spesso capita che si vuole inviare dati da un modulo web senza dover aggiornare la pagina. Per questo ci viene in aiuto Ajax che accostato a JQuery, ci risolve la vita .
Un breve cenno per intuire il funzionamento di Ajax, tramite esso è possibile ottenere risultati dinamici senza che ci sia il refresh della pagina in essere, questo "sistema" viene chiamato in gergo tecnico chiamata asincorona o "chiamata Ajax".
Per semplificare il complicato sistema Ajax serve la libreria JQuery, che con poche righe ci consente di eseguire operazioni a dir poco enigmatiche.
Senza dilungarsi troppo su questo complicato argomento, veniamo subito ad un esempio lampante di chiamata asincrona. Di seguito un test, inserite nei capi valori casuali per vedere la risposta Ajax e segue una spiegazione di ciò che avviene nel codice con l'invio del form.

Codice:
< script type=" text/javascript">
	$.ajax({
  // definisco il tipo della chiamata
  type: "POST",
  // specifico l'URL della risorsa da contattare
  url: "login.php",
  // passo dei dati alla risorsa remota
  data: "nome=" + nome + "&password=" + password,
  // definisco il formato della risposta
  dataType: "html",
  // imposto un'azione per il caso di successo
  success: function(risposta){
    $("div#risposta").html(risposta);
    document.getElementById("ok").innerHTML = "Operazione conclusa con successo!";
  },
  // ed una per il caso di fallimento
  error: function(){
    alert("Si e' verificato un errore, ritenta in altro momento!!!");
  }
}
< /script>

Di seguito, per chiarezza esplicito la pagina php che viene chiamata da Ajax "login.php"

Codice:
<?php
	if(isset($_REQUEST)){
if(isset($_POST['nome'])){
$nome=$_POST['nome'];
echo "Login andato a buon fine..."."

"; echo "Utente: $nome - "; } if(isset($_POST['password'])){ $password=$_POST['password']; echo "Password: $password"; } } ?>

Ovviamente nella pagina sono riportate solo le operazioni di recupero dei campi input allo scopo dell'esempio e li mostriamo a video per capire la veridicità della risposta alla chiamata Ajax.
Per chiudere in bellezza, di seguito la pagina di esempio completa.

Codice:
<html>  
  <head>  
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">  
    $(document).ready(function() {  
      $("form#login").submit(function(){  
        var nome = $("#nome").val();  
        var password = $("#password").val();
        $.ajax({  
          type: "POST",
          url: "login.php",  
          data: "nome=" + nome + "&password=" + password,
	//data: { nome: $('input#nome').val(), password: $('input#password').val() },
          dataType: "html",
          success: function(risposta) {  
	$("div#risposta").html(risposta);
            document.getElementById("ok").innerHTML = "Operazione conclusa con successo!";   
          },
          error: function(){
            alert("Si e' verificato un errore, ritenta in altro momento!!!");
          }
        }); 
        return false;      
      });
    });
    </script>  
  </head>  
  <body>  
<div id="ok"></div>
    <form id="login" name="login">
    <p>
      nome utente:<br/>
      <input type="text" name="nome" id="nome"/>
    </p>
    <p>
      Password:<br/>
      <input type="password" name="password" id="password"/>
    </p>
    <p>
      <input name="login" type="submit" value="Login">
    </p>
    </form>
  </body> 
</html>
Voglio concludere nel ricodare che è importante icludere la libreria JQuery al fine del corretto funzionamento e di rispettare il giusto percorso del file chiamato da Ajax (url: "login.php"). Detto questo, via ai vostri test...

Siti Web

Da 20 anni Filomeni Maurizio si dedica con passione e tenacia al mondo del web, le sue realizzazioni sono sempre all'avanguardia perchè la sua passione divenuta professione è al passo con i tempi e sempre in fase di studio e ricerca. Grazie ai suoi collaboratori riesce a dedicare il maggior tempo alla programmazione back-end rendendo le applicazioni molto precise e sofisticate. Dopo un attento monitoraggio, Siti Web diventa Partner Partnership di Aruba Group S.p.A

Newsletter & Info

Iscriviti alla nostra newsletter per ricevere aggiornamenti e novità, non riceverai mail indesiderate da parte nostra, odiamo lo spam!


Ti Piace Siti Web?