Քանի՞ անգամ եք հանդիպել այն փաստի, որ սխալ տվյալներ եք մուտքագրել, ինչի պատճառով էջը վերաբեռնել և ամբողջությամբ ջնջել է դաշտերում մուտքագրված նիշերը։ Դա շտկելու համար օգտատիրոջ միջերես կառուցելու բավականին տարածված մոտեցում կա, և դրա անունը ajax է: Այն հայտնվում է բազմաթիվ նախագծերում և օգտագործվում է բազմաթիվ ձևերով:
Ajax ձևի ուղարկում. գրադարանների միացում
Ներառել jquery գրադարանը index.php-ում:
Կա jquery-ն փաստաթղթում ներառելու ևս մեկ եղանակ: Դուք պետք է ներբեռնեք գրադարանը jquery-ի պաշտոնական կայքից, տեղադրեք այն ճիշտ թղթապանակում և տեղադրեք դրա հղումն այսպես՝
Փաստաթղթերի միացում և կարգավորում
1. Կայքի թղթապանակում ստեղծեք.php փաստաթուղթ ձեզ համար հարմար ցանկացած անունով. սա կուղարկի ajax php ձևը: Դրանում կարող եք գրել, թե ինչ ձևաչափով կցուցադրվի հաղորդագրությամբ տեքստը։ Օրինակ՝ form1.php.
2. Ձեր javascript ֆայլերի պանակում ստեղծեք.js ֆայլցանկացած հարմար անուն: Օրինակ՝ form.js.
3. Միացրեք այս թղթապանակը ձեր փաստաթղթին:
4. Ստեղծեք ձև հետևյալ պարամետրերով.
Դրանում մի մոռացեք ստեղծել ձեր տվյալները մուտքագրելու դաշտեր:
5. Կայքի գրացուցակում անցեք form1.php ֆայլը, որտեղ գրեք՝
Այժմ ձևը ներկայացնելիս զննարկիչը կցուցադրի տեղեկություններ տվյալների մասին:
Նույն ֆայլում կարող եք գրել, թե կոնկրետ ինչ կամ ինչպես կցուցադրվի։ Այստեղ կարող եք նաև ցիկլեր կամ ալգորիթմներ գրել:
Ajax jquery ձևի ուղարկում
1. Ստեղծված form.js ֆայլում դուք պետք է գրեք այն կոդը, որը պատասխանատու է կայքի էջն ամբողջությամբ բեռնվելուց հետո ֆայլի աշխատանքի համար:
$(document).ready(function(){ //Մեր հաջորդ կոդը կաշխատի այստեղ });
2. Այնուհետև դուք պետք է հարմարեցնեք ուղարկել կոճակը: Ամեն ինչ արեք նույն ֆայլում։
$("ձև").submit(function(event) { event.preventDefault(); //հետևյալ կոդը կգրվի այստեղ });
Կոդի առաջին մասը պատասխանատու է էջի տարրի ընտրության համար, իսկ երկրորդը պատասխանատու է կանխադրված գործողությունը կանխելու համար:
3. Այնուհետև, օրինակ, վերցրեք ajax ձևաթուղթը հաջողության վերաբերյալ:
$.ajax ({ տեսակ՝ $(this).attr('մեթոդ'), url՝ $(this).attr('գործողություն'), տվյալներ՝ նոր FormData(this), բովանդակության տեսակ՝ կեղծ, քեշ՝ կեղծ, գործընթացՏվյալներ՝ կեղծ, հաջողություն՝ ֆունկցիա(արդյունք){ զգուշացում(արդյունք); } });
Ստորև ներկայացված են յուրաքանչյուր պարամետրի մանրամասն նկարագրությունը:
- տեսակ -սա այն հայտի տեսակն է, որը ներկայացվում է ձևով. քանի որ այն արժե POST, հարցման տեսակը կլինի համապատասխան;
- this - տարրի ընտրություն կառուցվածքի ներսում;
- attr - գրավչություն (գրավչություն), այսինքն՝ ներգրավված է ընտրված թիրախի (ձևի) որոշակի պարամետր;
- url - պարամետր, որը պատասխանատու է այն բանի համար, թե որտեղ է ուղարկվելու հարցումը; այս դեպքում ինչ է գրված ձևի պարամետրերում (form1.php);
- data - նշում է ձևի տվյալները;
- contentType - պատասխանատու է սերվերին վերնագրեր ուղարկելու համար; այս դեպքում դա պետք չէ;
- քեշ - պատասխանատու է օգտատիրոջ քեշը պահելու համար;
- processData - պատասխանատու է տվյալները տողի փոխարկելու համար;
- հաջողություն - ցուցադրում է տվյալների հաջող ներկայացման արդյունքը; հետևաբար, եթե տվյալների ուղարկումը հաջող էր, ապա ֆունկցիայի գործողությունները կատարվում են։
4. Ավարտված է, այժմ ajax ձևաթուղթը ներկայացնելիս դուք տվյալներ կստանաք առանց էջը թարմացնելու:
Արդյունքը կարող է փոխվել՝ օգտագործելով form1.php ֆայլը, որտեղ կարող եք նշել, թե կոնկրետ ինչ կցուցադրվի արդյունքում։ Օրինակ՝
Դուք կարող եք փորձարկել և ստեղծել որոշակի տվյալների մուտքագրման ճիշտության ստուգում. եթե տվյալները ճիշտ չեն, ապա ցուցադրվում է ցանկալի հաղորդագրությունը, հակառակ դեպքում այն վերահղվում է ճիշտ էջ: Շատ այլ բաներ նույնպես հնարավոր են, ինչ ուզում է ձեր սիրտը:
Կա նաև տվյալներ սերվերին ասինխրոն կերպով ուղարկելու հնարավորություն: Սա այն դեպքում, երբ օգտվողը մուտքագրում է տեքստ, և այն անմիջապես ընդգծվում է կարմիրով, ինչը ցույց է տալիս, որ մուտքագրված տվյալները ճիշտ չեն: Դրա մասինՀամացանցում կան բազմաթիվ ձեռնարկներ, որտեղ ամեն ինչ պարզ բացատրված և օրինակներով ցուցադրված է։
Եզրակացություն
Անկասկած, ajax-ը օգտակար գործիք է վեբ կայքի կառուցման համար: Բարձրորակ էջեր և ինտերֆեյսեր պատրաստելու համար պարզապես անհրաժեշտ է. Հարկ է նշել, որ jQuery-ի իմացությունը շատ կարևոր է՝ նկարն ու կոդում գրվածը լիովին հասկանալու համար, քանի որ պարզ copy-paste-ը միշտ չի կարող օգնել և սովորեցնել հասկանալ կոդը։ Միշտ արժե հիշել, որ լեզվական տարբերակները թարմացվում են, և որոշ գործառույթներ կարող են պարզապես անհետանալ: Հետևաբար, ոչ բոլոր լուծումները կարող են տեղին լինել, հաճախ գրված կոդը պարզապես չի աշխատում կամ չի տալիս այն արդյունքը, որը դուք կցանկանայիք տեսնել ձեր էկրանին:
