Sommario
La combinazione di PHP e Jquery è una delle tecniche più utilizzate per lo sviluppo di applicazioni Web dinamiche.La libreria JQuery fornisce molti plugin Jquery che gli sviluppatori utilizzano per dare alle loro applicazioni molto dinamismo per migliorare l'esperienza del visitatore sia sul browser Internet che su un dispositivo mobile. Continueremo a sviluppare l'applicazione tutorial Genera elenchi dinamici con Jquery, Php e Mysql, aggiungeremo moduli dinamici per registrare e modificare le informazioni, applicando la combinazione di php e jquery possiamo eseguire questa attività senza reindirizzare la pagina.
Aggiungeremo anche il plugin jquery.validator che ci permetterà di validare i campi del form.
AttenzionePer questo tutorial avremo bisogno del plugin che possiamo scaricare da http://jqueryvalidation.org/, quando lo scarichiamo lo decomprimiamo e avremo tutti i file di cui per ora ci interessano solo due, che sono:
jquery.validate.js qual è il plugin stesso? messaggi_es.js che è il file dove metteremo i messaggi per il visitatore e possiamo tradurlo per lingua.
Aggiungiamo i file alla directory del progetto:
INGRANDIRE
Se non vogliamo scaricare il plugin possiamo usarlo da un server esterno
Ora creeremo i file con il modulo che verrà utilizzato per registrare un veicolo e che richiameremo dal nuovo pulsante. Per fare ciò, dobbiamo assicurarci che il nuovo pulsante abbia un id (identificatore) così da poter poi riconoscere quando si verifica un evento in cui, ad esempio, si verifica un clic. Quindi il codice del pulsante sarà il seguente:
Il nome del componente e l'identificatore possono essere gli stessi, ma univoci per ogni componente html. Nel file functions.js scriviamo il seguente codice che rileverà il clic del mouse sul pulsante newvehiculo e invocherà il file hivehiculos con il modulo di registrazione.
// Richiama il modulo di registrazione del veicolo $ (function () {$ ("# newvehiculo"). Fai clic su (function () {$ .get ("http: //localhost/proyectos/agenciaautos/altavehiculos.php", function (data ) {$ ("# form"). html (data); // prendo il risultato della pagina e inserisco i dati nei form div});});}); Quindi creiamo il modulo di registrazione che si chiamerà altavehiculos.php
Incorporiamo le librerie necessarie nell'intestazione per poter lavorare con jquery e convalidare i campi
Creiamo alcuni stili per dare alla forma un po' di design e ordine. Per l'esempio può essere utilizzato nello stesso file o in un file di foglio di stile separato e quindi aggiunto nell'intestazione.
Quindi scriviamo il codice per salvare i dati e il codice del modulo per acquisire i dati
$ valore) {$ _POST [$ chiave] = mysql_real_escape_string ($ valore); } $ sql = "INSERT INTO` vehicle` (`vehicle_idtype`,` features`, `brandid`,` modelid`, `photo1`) VALUES ('{$ _POST [' vehicle_idtype ']}', '{$ _POST [ 'caratteristiche']}', '{$ _POST [' brand id ']}', '{$ _POST [' model id ']}', '{$ _POST [' photo1 ']}') "; mysql_query ($ sql) o die (mysql_error ()); echo "Registrazione completata."; }?> var13 -> // consulto i veicoli per compilare la selezione del tipo di veicolo Immatricolazione del veicolo
Selezione del veicolo
Creo anche le funzioni Jquery per mettere in relazione le dichiarazioni nel modulo di registrazione
// seleziona l'immatricolazione del veicolo e i marchi correlati $ (funzione () {$ ("# immatricolazione del veicolo"). change (funzione () {veicolo = $ (questo) .val (); // Valore selezionato $ .get ("http : //localhost/proyectos/agenciaautos/marcas.php?idvehiculo="+vehiculo, function (data) {$ ("# altamarca"). html (data); // prendo il risultato della pagina e inserisco i dati nel combinazione });});}); // seleziona marche e modelli correlati $ (function () {$ ("# highbrand"). change (function () {brand = $ (this) .val (); // Valore selezionato $ .get ("http: / /localhost/proyectos/agenciaautos/modelos.php?idmarca="+marca, function (data) {$ ("# altamodelo"). html (data); // prendo il risultato della pagina e inserisco i dati nella select} );});}); Una volta terminato, se eseguiamo e premiamo il pulsante nuovo, il modulo di registrazione dovrebbe apparire come segue:
// validazione del modulo $ (document) .ready (function () {$ ("# frmalta"). validate ({lang: 'es' // o qualunque opzione di lingua tu abbia.});}); Quindi nel componente che vogliamo convalidare aggiungiamo la classe richiesta, ovvero l'elemento non può essere vuoto o senza dati.
Le classi di convalida si trovano nel file dei messaggi. Esempio di convalida
Convalida un'e-mail:
Convalida una data:
Convalida un numero:
Quindi se aggiungiamo la classe richiesta al nostro form all'elemento textarea, ad esempio, e nel caso di istruzioni select, dobbiamo lasciare vuota la prima opzione, quindi se non viene selezionato nulla, si verificherà l'errore e il form non sarà spedito.
caratteristiche
Selezione modello
Infine, se completiamo il form e clicchiamo sul pulsante Save, il form si invierà da solo effettuando una chiamata jquery alla stessa pagina altavehiculos.php, che invia il flag inviato con valore 1 e poi attiva l'inserimento nella tabella MySQL.
Un dettaglio che resta da fare o con jquery o reindirizzando in modo tradizionale, è che quando i dati vengono salvati l'elenco in alto viene aggiornato poiché il modulo di registrazione scompare, ma non abbiamo alcun evento per irrigare l'elenco dei veicoli, quindi dobbiamo aggiungere la chiamata in modo che l'elenco venga visualizzato all'interno del livello elenco che abbiamo utilizzato in precedenza nell'altro tutorial, in questo modo possiamo registrare informazioni se reindirizzare la pagina o eseguire attività in background senza che l'utente debba reindirizzare la pagina o per dare maggiore interattività o trasparenza all'applicazione web, consente anche il riutilizzo del codice sorgente poiché è compatibile con qualsiasi browser e dispositivo compatibile con javascript.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo
