Cum să prezinte un formular fără a reîncărca pagina (ajax)

Cum să prezinte un formular fără a reîncărca pagina (AJAX)

În acest articol vom descrie modul de a trimite un formular în fundal, fără a reîncărca pagina (AJAX), cu ajutorul jquery, php. Ca urmare a script-ul, serverul va trimite datele în format JSON, iar clientul va primi date în același format.

Web-hosting evaluare: 8 din 10 cu 325 evaluări

Ce este AJAX

Tehnologia Ajax a devenit o parte integrantă a WEB 2.0 și acum, site-uri de succes au tendința de a crea confort pentru utilizatori. Mai mult decât atât, tehnologia Ajax poate creste viteza site-ului, datorită faptului că utilizatorul nu are nevoie pentru a reîncărca întreaga pagină pentru a actualiza unele elemente ale site-ului.

Punerea în aplicare depune formularul fără a reîncărca pagina

Proiectul nostru demonstrativ va consta din trei fișiere:

Să creăm primul nostru proiect AJAX fișier numit index.php cu următorul conținut:

Vă rugăm să rețineți că metoda de depunere a formularului avem POST, set id = „ajax_form“ și action = „“. De asemenea, după ce forma am adăugat un div c id = result_form. Este în acest div vom afișa rezultatul unor forme de prelucrare.

De asemenea, avem nevoie pentru a crea un al doilea fișier - ajax.js

În ajax.js fișier, există două metode: $ ( "# BTN") și faceți clic pe sendAjaxForm .. Prima metodă - un ascultător cheie eveniment. Adică, atunci când facem clic pe butonul Send, ascultătorul este declanșat și provoacă a doua sendAjaxForm metoda.

SendAjaxForm Metoda (result_form, ajax_form, adresa URL) transmise câmp: result_form - acest div, care va fi redat de date, ajax_form - ID-ul de forma și trimite un mesaj URL - această locație action_ajax_form.php, care este responsabil pentru partea de server de fișiere (procesare formulare).

Al treilea dosar numit action_ajax_form.php

action_ajax_form.php - formularul handler pe partea de server. De exemplu, noi verificați: Dacă există variabile într-un post poate cere numele și NumărTelefon, atunci vom crea un rezultat $ matrice de răspuns JSON de la server. Apoi, $ rezultat matrice traducem un obiect JSON pentru a ajax.js client poate primi în mod corect datele în format JSON.

După cum vedeți, să pună în aplicare AJAX pentru a trimite datele din formular fără a reîncărca pagina este foarte simplu. Descărcați formularele de cod sursă AJAX, aveți posibilitatea să urmați link-ul. Descărcați fișierele pe serverul local sau de găzduire, despacheta și a pus toate fișierele într-un singur director pe server.

Accesul la secțiunea privată a acestui site