JQuery ашиглан ajax маягтыг сервер рүү илгээж байна

Агуулгын хүснэгт:

JQuery ашиглан ajax маягтыг сервер рүү илгээж байна
JQuery ашиглан ajax маягтыг сервер рүү илгээж байна
Anonim

Та буруу өгөгдөл оруулсантай хэр олон удаа тулгарсан бэ, үүний улмаас хуудсыг дахин ачаалж, талбарт оруулсан тэмдэгтүүдийг бүрэн устгасан. Үүнийг засахын тулд хэрэглэгчийн интерфейсийг бий болгох нэлээд түгээмэл арга байдаг бөгөөд түүний нэр ajax юм. Энэ нь олон төсөл дээр гарч ирдэг бөгөөд олон янзаар ашиглагддаг.

Ajax маягт илгээж байна: номын санг холбох

jQuery номын санг index.php-д оруулах.


Баримт бичигт jQuery оруулах өөр арга бий. Та jquery-ийн албан ёсны сайтаас номын санг татаж аваад, тохирох хавтсанд байрлуулж, линкийг нь дараах байдлаар буулгана уу:


Баримт бичгийг холбож тохируулж байна

1. Өөрт тохирох нэр бүхий сайтын хавтсанд.php баримтыг үүсгэнэ үү - энэ нь ajax php маягтыг илгээх болно. Үүн дээр та мессеж бүхий текстийг ямар форматаар харуулахыг бичиж болно. Жишээ нь, form1.php.

Сайтын хавтас
Сайтын хавтас

2. Өөрийн javascript файлуудын хавтсанд.js файл үүсгэнэ үүямар ч тохиромжтой нэр. Жишээ нь, form.js.

js хавтас
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, cache: false, processData: false, амжилт: функц(үр дүн){ alert(үр дүн); } });

Дараах нь тохиргоо бүрийн дэлгэрэнгүй тайлбар юм.

  • төрөл -энэ нь маягтанд ирүүлсэн хүсэлтийн төрөл юм; POST зардалтай тул хүсэлтийн төрөл тохиромжтой байх болно;
  • энэ - бүтэц доторх элементийн сонголт;
  • attr - таталцлын (таталцлын) товчлол, өөрөөр хэлбэл сонгосон зорилтын (маягтын) тодорхой параметрийг татдаг;
  • url - хүсэлтийг хаана илгээхийг хариуцах параметр; энэ тохиолдолд маягтын параметрт юу бичигдсэн байна (form1.php);
  • дата - маягтын өгөгдлийг заана;
  • contentType - сервер рүү толгойг илгээх үүрэгтэй; энэ тохиолдолд шаардлагагүй;
  • кэш - хэрэглэгчийн кэшийг хадгалах үүрэгтэй;
  • processData - өгөгдлийг мөр болгон хувиргах үүрэгтэй;
  • амжилт - амжилттай өгөгдөл илгээсний үр дүнг харуулна; Тиймээс хэрэв өгөгдөл амжилттай илгээгдсэн бол функцийн үйлдлийг гүйцэтгэнэ.

4. Дууслаа, одоо ajax маягтыг илгээх үед та хуудсыг дахин сэргээхгүйгээр өгөгдөл хүлээн авах болно.

Үр дүнг form1.php файлыг ашиглан өөрчлөх боломжтой бөгөөд үүний үр дүнд яг юу харагдахыг зааж өгч болно. Жишээ нь, Та туршилт хийж, тодорхой өгөгдөл оруулах зөв эсэхийг шалгах боломжтой: хэрэв өгөгдөл буруу бол хүссэн мессеж гарч ирэх бөгөөд үгүй бол зөв хуудас руу чиглүүлнэ. Таны зүрх сэтгэлээс үл хамааран өөр олон зүйл боломжтой.

ajax жишээ
ajax жишээ

Мөн сервер рүү синхрон бусаар өгөгдөл илгээж байна. Энэ нь хэрэглэгч текст оруулах үед тэр даруй улаанаар тодорч, оруулсан өгөгдөл буруу байгааг илтгэнэ. Үүний тухайИнтернет дээр бүх зүйлийг тодорхой тайлбарлаж, жишээгээр харуулсан олон гарын авлага байдаг.

Дүгнэлт

Ajax бол вэбсайт бүтээхэд хэрэгтэй хэрэгсэл болох нь дамжиггүй. Өндөр чанартай хуудас, интерфейс хийхийн тулд энэ нь зүгээр л шаардлагатай. Энгийн copy-paste нь кодыг ойлгоход үргэлж тусалж, зааж өгөх боломжгүй тул зураг болон кодонд юу бичсэнийг бүрэн ойлгохын тулд jQuery-г мэдэх нь маш чухал гэдгийг тэмдэглэх нь зүйтэй. Хэлний хувилбарууд шинэчлэгдэж, зарим функцууд алга болж магадгүй гэдгийг үргэлж санах нь зүйтэй. Тиймээс бүх шийдэл нь хамааралтай биш байж магадгүй, ихэнхдээ бичсэн код нь зүгээр л ажиллахгүй эсвэл таны дэлгэцэн дээр харахыг хүссэн үр дүнг гаргахгүй.

Зөвлөмж болгож буй: