JQuery + Ajax = error

**MrClog** · 09-05-2012, 00:41

Salve a tutti,

sto cercando di fare un login, inviando richieste AJAX attraverso il metodo statico $.ajax() (JQUERY)

questo è il codice HTML

codice:

HTML

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
		
<script type="text/javascript">

$(document).ready(function() {

  //al click sul bottone del form
  $("#logbtn").submit(function(){

    //associo variabili
    var user = $("#uname").val();
    var pwd = $("#upass").val();

  //chiamata ajax
    $.ajax({

     //imposto il tipo di invio dati 
      type: "POST",

      //Dove devo inviare i dati recuperati dal form?
      url: "inc/login.inc.php",

      //Quali dati devo inviare?
      data: "username=" + user + "&password=" + pwd,
      dataType: "html",

      //Inizio visualizzazione errori
      success: function(msg)
      {
        $("#risultato").html(msg);
		alert("fatto!");
			// messaggio di avvenuta aggiunta valori al db 
		//(preso dal file inc/login.inc.php) 
      },
      error: function()
      {
        alert("Chiamata fallita, si prega di riprovare..."); 
      }
    });
  });
});
</script>
	
	</head>
	<body>
	<div id="container">
        <div id="header">	
	<form id="login" >
		<label for="uname">User name</label>
			<input id="uname" type="text" name='username' value="user" />
		<label for="upass">User password</label>
			<input id="upass" type="password" name='password' value="password" />
		<label for="logbtn">Login button</label>
			<input id="logbtn" type="submit"  value="login" />
	</form>
	<div id="risultato"></div>
	</div>
	</div>

Questo è lo scritto in php a cui mando i valori. Funziona (testata con il metodo post)

Codice PHP:


inc/login.inc.php





<?php



session_start(); // Faccio partire l'azione delle sessioni



$username = $_POST['username']; // Prendo l'username ricevuto da jQuery

$password = $_POST['password']; // Prendo la password ricevuta da jQuery



mysql_connect("localhost","user","password")or die("Connessione IMPOSSIBILE al DBMS TIPO ERRORE:".mysql_error());

 mysql_select_db("dbprotciv")or die("IMPOSSIBILE selezionare il DataBase");

 

 $sql = "SELECT * FROM utenti WHERE username = '$username' and password='$password'"; 

 $dati=mysql_query($sql);

 $numero_righe=mysql_num_rows($dati);

                        

if($numero_righe>0){// Controllo se la password corrisponde a quella dell'utente

           while($array=mysql_fetch_array($dati)){

            if (($array[1]) == $password){    //Si ritiene che ci sia un unico user con quel nome

            $_SESSION['username'] = $username; // Salvo la sessione dell'username

            $_SESSION['password'] = $password; // Salvo la sessione della password

            die($username); // Chiudo il caricamento della pagina rilasciando il messaggio

            }else{

            die("Password &egrave; errata"); // Chiudo il caricamento della pagina rilasciando il messaggio

              }

        }

}else{

    die("Utente inesistente"); // Chiudo il caricamento della pagina rilasciando il messaggio

    }

?>

Quando eseguo il tutto, la pagina non fa nulla

però nell'url compare il seguente indirizzo

codice:

http://127.0.0.1/test/?username=admin&password=admin

come mai?
username=admin
password=admin

sono le variabili post che passo alla pagina php

dove sta il problema??

**KillerWorm** · 09-05-2012, 01:37

Ciao.
Per prima cosa è consigliabile specificare la proprietà action nel tag form anche se come valore imposti una stringa vuota.

codice:

<form id="login" action="">

Questa proprietà normalmente è obbligatoria e potrebbe darti errori di validazione se non è presente.
Seconda cosa, devi utilizzare il metodo click sul bottone, anziché submit:

codice:

$("#logbtn").click(function(){

o in alternativa, applica il submit all'elemento form e non al bottone:

codice:

$("#login").submit(function(){

In JQuery infatti il metodo submit è relativo all'elemento form il quale lo richiamerà quando si clicca sul bottone/input di tipo "submit".

**mxa** · 09-05-2012, 06:56

Manca anche return false alla fine dell'event handler.

**MrClog** · 09-05-2012, 10:28

Originariamente inviato da mxa
Manca anche return false alla fine dell'event handler.

scusami, ma ajax e jquery le ho imparate ieri sera, dove dovrei metere il return false?

Grazie KillerWorm, ma continua a non funzionare anche con le tue modifiche

**MrClog** · 09-05-2012, 10:46

e come se utilizzasse il metodo GET, infatti dopo il submit di login visualizzo nell'url del browser

codice:

http://127.0.0.1/test/?username=admin&password=admin

invece la pagina server aspetta le variabili col metodo POS

**whisher** · 09-05-2012, 11:05

Ciao,
funziona in quel modo perchè
non blocchi l'evento submit
che per default guarda caso
ti fa il submit della form

devi utilizzare o return false
come ti ha detto mxa
oppure
http://api.jquery.com/event.preventDefault/

**MrClog** · 09-05-2012, 12:00

funziona!
Ho usato e.preventDefault(), perchè ho letto da qualche parte che se mettevo return false, poi mi invalidava sempre quel form in futuro.

il nuovo codice è questo ed ho messo in rosso l'aggiunta

codice:

$(document).ready(function() {

  //al click sul bottone del form
  $("#logbtn").click(function( event ){
	
	
	 event.preventDefault() 
	
    //associo variabili
    var user = $("#uname").val();
    var pwd = $("#upass").val();

  //chiamata ajax
    $.ajax({

     //imposto il tipo di invio dati 
      type: "POST",

      //Dove devo inviare i dati recuperati dal form?
      url: "inc/login.inc.php",

      //Quali dati devo inviare?
      data: "username=" + user + "&password=" + pwd,
      dataType: "html",

      //Inizio visualizzazione errori
      success: function(msg)
      {
        $("#risultato").html(msg);
		alert("fatto!");
			// messaggio di avvenuta aggiunta valori al db 
		//(preso dal file inc/login.inc.php) 
      },
      error: function()
      {
        alert("Chiamata fallita, si prega di riprovare..."); 
      }
    });
  });
});

è funziona!!!!

**MrClog** · 09-05-2012, 12:01

Grazie a tutti voi!!!

Discussione: JQuery + Ajax = error

Strumenti discussione

Ricerca discussione

Visualizza

JQuery + Ajax per login, ma non fa nulla

Permessi di invio