Quante volte ti sei imbattuto nel fatto di aver inserito dati errati, per cui la pagina ha ricaricato e cancellato completamente i caratteri inseriti nei campi. Per risolvere questo problema, esiste un approccio abbastanza popolare alla creazione di un'interfaccia utente e il suo nome è ajax. Appare in molti progetti ed è usato in molti modi.
Invio di un modulo ajax: collegamento delle librerie
Includi la libreria jquery in index.php.
C'è un altro modo per includere jquery in un documento. Devi scaricare la libreria dal sito ufficiale di jquery, posizionarla nella cartella giusta e incollare il link ad essa in questo modo:
Collegamento e impostazione dei documenti
1. Crea un documento.php nella cartella con il sito con qualsiasi nome conveniente per te - questo invierà il modulo php ajax. In esso puoi scrivere in quale formato verrà visualizzato il testo con il messaggio. Ad esempio, form1.php.
2. Nella cartella dei file javascript, crea un file.js conqualsiasi nome conveniente. Ad esempio, form.js.
3. Collega questa cartella al tuo documento.
4. Crea un modulo con i seguenti parametri:
In esso, non dimenticare di creare i campi per inserire i tuoi dati.
5. Vai al file form1.php nella directory con il sito, in cui scrivi:
Ora, quando si invia il modulo, il browser visualizzerà le informazioni sui dati.
Nello stesso file, puoi scrivere cosa esattamente verrà visualizzato o come. Puoi anche scrivere cicli o algoritmi qui.
Invio di un modulo jquery ajax
1. Nel file form.js creato, devi scrivere il codice responsabile del funzionamento del file dopo che la pagina del sito è stata completamente caricata.
$(document).ready(function(){ //Il nostro prossimo codice verrà eseguito qui });
2. Quindi è necessario personalizzare il pulsante di invio. Fai tutto nello stesso file.
$("form").submit(function(event) { event.preventDefault(); //qui verrà scritto il codice seguente });
La prima parte del codice è responsabile della selezione dell'elemento nella pagina e la seconda è responsabile della prevenzione dell'azione predefinita.
3. Quindi, ad esempio, invia un modulo ajax in caso di successo.
$.ajax({ type: $(this).attr('method'), url: $(this).attr('action'), data: new FormData(this), contentType: false, cache: false, processData: false, success: function(result){ alert(result); } });
Le seguenti sono descrizioni dettagliate di ciascuna impostazione.
- tipo -questo è il tipo di richiesta che viene presentata nel modulo; poiché costa POST, il tipo di richiesta sarà appropriato;
- questo - selezione dell'elemento all'interno del costrutto;
- attr - abbreviazione di attrazione (attrazione), ovvero un determinato parametro del target selezionato (forma) viene attratto;
- url - parametro responsabile di dove verrà inviata la richiesta; in questo caso quanto scritto nel form parametri (form1.php);
- data - specifica i dati del modulo;
- contentType - responsabile dell'invio delle intestazioni al server; in questo caso non serve;
- cache - responsabile del salvataggio della cache dell'utente;
- processData - responsabile della conversione dei dati in una stringa;
- success - mostra il risultato di un invio dati riuscito; pertanto, se l'invio dei dati è andato a buon fine, vengono eseguite le azioni della funzione.
4. Fatto, ora quando invii il modulo ajax, riceverai i dati senza aggiornare la pagina.
Il risultato può essere modificato utilizzando il file form1.php, dove puoi specificare cosa esattamente verrà visualizzato come risultato. Ad esempio, Puoi sperimentare e creare un controllo per la correttezza dell'inserimento di determinati dati: se i dati non sono corretti, viene visualizzato il messaggio desiderato, altrimenti reindirizza alla pagina corretta. Molte altre cose sono possibili, qualunque cosa il tuo cuore desideri.
C'è anche l'invio di dati al server in modo asincrono. Questo è quando l'utente inserisce il testo, che viene immediatamente evidenziato in rosso, indicando che i dati inseriti non sono corretti. A propositoci sono molti manuali su Internet, dove tutto è spiegato chiaramente e mostrato con esempi.
Conclusione
Indubbiamente, ajax è uno strumento utile nella creazione di siti web. Per realizzare pagine e interfacce di alta qualità, è semplicemente necessario. Vale la pena notare che è molto importante conoscere jQuery per comprendere appieno l'immagine e ciò che è scritto nel codice, perché un semplice copia-incolla non può sempre aiutarti e insegnarti a capire il codice. Vale sempre la pena ricordare che le versioni linguistiche vengono aggiornate e alcune funzionalità potrebbero semplicemente scomparire. Pertanto, non tutte le soluzioni possono essere rilevanti, spesso il codice scritto semplicemente non funziona o non produce il risultato che vorresti vedere sullo schermo.
