jQuery Mobile: form ajax+php

una seconda possibilità di gestire i form in jQuery Mobile è adottare delle soluzioni one page basandosi su ajax.

Per fare questo proveremo una pagina di lgoin con ritorno al form se la login fallisce oppure visualizzazione di un’altra pagina se la login va a buon fine.

Partiamo con le classiche intestazioni:

<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css” />
<script src=”http://code.jquery.com/jquery-1.8.2.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js”></script>

In seguito creiamo la pagina di login con uno span dove eventualmente inserire il messaggio di errore:

<div data-role=”page” id=”login”>
<div data-role=”header”>
<h1>My Title</h1>
</div>
<span id=”error”></span>
<form id=”login_user” data-ajax=”false”>
<label>Email:</label>
<input type=”text” id=”email” name=”email”>
<label>Password:</label>
<input type=”text” id=”pwd” name=”pwd”>
<button type=”submit”>Submit</button>
</form>
</div>
</div>

Successivamente predisponiamo una semplicissima seconda pagina per il post login:

<div data-role=”page” id=”loginok”>
<div data-role=”header”>
<h1>My Title</h1>
</div>>
<div data-role=”content”>
<span id=”test”></span>
</div>
</div>

Passiamo alla sostanza, cioè al document.ready intercettiamo il submit del form e blocchiamo il comportamento di default:

$(document).ready(function(e) {
$(‘#login_user’).on(‘submit’, function (e) {
e.preventDefault();

In seconda battuta pre paro una variabile per il mio form e procedo con il post dei dati sulla form.php:

var $this = $(this);
$.post(
‘form.php’,
$this.serialize(),

I dati inseriti saranno passati con il metodo serialize().

La form.php è sostanzialmente “finta” ovvero è basata su un if anche se nella realtà verificherà le credenziali nel database.

<?php
$email=$_POST['email'];
$pwd=$_POST['pwd'];
if($email==’pippo@tin.it’ && $pwd==’pippo’){echo ‘ok’;}
else{echo ‘ko’;}
?>

Quindi se lo user è pippo@tin.it e la pwd pippo la login andrà a buon fine risponderà ok, viceversa la pagina risponderà ko

Andiamo a gestire la risposta:

function (str){
if(str==’ok’){
$(‘#test’).html(str);
$.mobile.changePage(‘#loginok’)
}
else{
$(‘#error’).html(‘Errore login’);
$.mobile.changePage(‘#login’)
}

Se la risposta è ok, l’utente visualizzerà la pagina in loginok, altrimenti inseriremo un messaggio nello span con id=error

e ritorneremo sulla logi.

L’esempio