Туура эмес маалыматтарды киргизгениңизге канча жолу туш болдуңуз, андыктан барак кайра жүктөлүп, талааларга киргизилген белгилерди толугу менен жок кылды. Муну оңдоо үчүн колдонуучунун интерфейсин курууда абдан популярдуу ыкма бар жана анын аты 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. Андан кийин тапшыруу баскычын өзгөчөлөштүрүү керек. Баарын бир файлда жасаңыз.
$("form").submit(function(event) { event.preventDefault(); //төмөнкү код бул жерде жазылат});
Коддун биринчи бөлүгү беттеги элементти тандоо үчүн жооптуу, ал эми экинчиси демейки аракеттин алдын алуу үчүн жооптуу.
3. Андан кийин, мисалы, ийгиликтүү тапшыруу боюнча ajax формасын алыңыз.
$.ajax({ түрү: $(бул).attr('ыкма'), url: $(бул).attr('аракет'), маалымат: жаңы FormData(бул), contentType: false, кэш: false, processData: false, ийгиликтүү: функция(натыйжа){ эскертүү(натыйжа); } });
Төмөндө ар бир жөндөөнүн кеңири сүрөттөлүшү берилген.
- түр -бул формада берилген суроо-талаптын түрү; анын баасы POST болгондуктан, сурамдын түрү ылайыктуу болот;
- бул - конструкциянын ичиндеги элементти тандоо;
- attr - аттракциондун (аттракциондун) кыскасы, башкача айтканда, тандалган максаттын (форманын) белгилүү бир параметри тартылат;
- url - суроо-талап кайда жөнөтүлө турганына жооптуу параметр; бул учурда форманын параметрлеринде эмне жазылган (form1.php);
- дата - форма берилиштерин белгилейт;
- contentType - серверге аталыштарды жөнөтүү үчүн жооптуу; бул учурда кереги жок;
- кэш - колдонуучунун кэшин сактоо үчүн жооптуу;
- processData - маалыматтарды сапка айландыруу үчүн жооптуу;
- success - маалыматтарды ийгиликтүү тапшыруунун жыйынтыгын көрсөтөт; ошондуктан, эгерде маалыматтарды жөнөтүү ийгиликтүү болсо, анда функциянын аракеттери аткарылат.
4. Бүттү, эми ajax формасын тапшырып жатканда, сиз бетти жаңыртбастан маалыматтарды аласыз.
Натыйжаны form1.php файлы аркылуу өзгөртүүгө болот, анда натыйжада так эмне көрсөтүлөрүн белгилей аласыз. Мисалы, Сиз эксперимент жасап, белгилүү бир маалыматтарды киргизүүнүн тууралыгын текшерүүнү түзө аласыз: эгер маалыматтар туура эмес болсо, анда керектүү билдирүү көрсөтүлөт, антпесе ал туура бетке багытталат. Жүрөгүңүз каалагандай, башка көптөгөн нерселер да мүмкүн.
Серверге асинхрондук түрдө берилиштерди жөнөтүү да бар. Бул колдонуучу текстти киргизгенде, ал ошол замат кызыл түс менен белгиленип, киргизилген маалыматтар туура эмес экенин көрсөтүп турат. Бул жөнүндөИнтернетте көптөгөн окуу куралдары бар, аларда баары так түшүндүрүлүп, мисалдар менен көрсөтүлгөн.
Тыянак
Албетте, ajax веб-сайт курууда пайдалуу курал. Жогорку сапаттагы баракчаларды жана интерфейстерди жасоо үчүн бул жөн гана зарыл. Белгилей кетчү нерсе, сүрөттү жана коддо эмне жазылганын толук түшүнүү үчүн jQuery тилин билүү абдан маанилүү, анткени жөнөкөй көчүрүү-паста ар дайым жардам бере албайт жана кодду түшүнүүгө үйрөтө албайт. Тилдин версиялары жаңыланып, кээ бир функциялар жөн эле жок болушу мүмкүн экенин дайыма эстен чыгарбоо керек. Ошондуктан, бардык чечимдер тиешелүү болушу мүмкүн эмес, көбүнчө жазылган код жөн эле иштебейт же экраныңызда көргүңүз келген натыйжаны бербейт.
