რამდენჯერ შეგხვედრიათ ის ფაქტი, რომ თქვენ შეიტანეთ არასწორი მონაცემები, რის გამოც გვერდმა გადატვირთა და მთლიანად წაშალა ველებში შეყვანილი სიმბოლოები. ამის გამოსწორების მიზნით, არსებობს საკმაოდ პოპულარული მიდგომა მომხმარებლის ინტერფეისის შესაქმნელად და მისი სახელია 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 ფაილში თქვენ უნდა დაწეროთ კოდი, რომელიც პასუხისმგებელია ფაილის მუშაობაზე საიტის გვერდის სრულად ჩატვირთვის შემდეგ.
$(დოკუმენტი).ready(function(){ //ჩვენი შემდეგი კოდი იმუშავებს აქ });
2. შემდეგ თქვენ უნდა დააკონფიგურიროთ გაგზავნის ღილაკი. გააკეთე ეს ყველაფერი იმავე ფაილში.
$("ფორმა").submit(function(event) { event.preventDefault(); //აქ დაიწერება შემდეგი კოდი });
კოდის პირველი ნაწილი პასუხისმგებელია გვერდზე ელემენტის არჩევაზე, ხოლო მეორე პასუხისმგებელია ნაგულისხმევი მოქმედების თავიდან აცილებაზე.
3. შემდეგ, მაგალითად, აიღეთ ajax ფორმის წარდგენა წარმატების შესახებ.
$.ajax({ ტიპი: $(this).attr('მეთოდი'), url: $(this).attr('მოქმედება'), მონაცემები: new FormData(this), contentType: false, ქეში: false, processData: false, წარმატება: ფუნქცია(შედეგი){ გაფრთხილება(შედეგი); } });
ქვემოთ მოცემულია თითოეული პარამეტრის დეტალური აღწერა.
- ტიპი -ეს არის მოთხოვნის ტიპი, რომელიც წარმოდგენილია ფორმაში; რადგან ღირს POST, მოთხოვნის ტიპი შესაბამისი იქნება;
- ეს - ელემენტის შერჩევა კონსტრუქციის შიგნით;
- attr - მოკლე მიზიდულობა (მიზიდულობა), ანუ იზიდავს არჩეული სამიზნის (ფორმის) გარკვეული პარამეტრი;
- url - პარამეტრი, რომელიც პასუხისმგებელია იმაზე, თუ სად გაიგზავნება მოთხოვნა; ამ შემთხვევაში რა წერია ფორმის პარამეტრებში (form1.php);
- data - განსაზღვრავს ფორმის მონაცემებს;
- contentType - პასუხისმგებელია სათაურების სერვერზე გაგზავნაზე; ამ შემთხვევაში არ არის საჭირო;
- ქეში - პასუხისმგებელი მომხმარებლის ქეშის შენახვაზე;
- processData - პასუხისმგებელია მონაცემების სტრინგად გადაქცევაზე;
- წარმატება - აჩვენებს მონაცემთა წარმატებული წარდგენის შედეგს; ამიტომ, თუ მონაცემების გაგზავნა წარმატებით დასრულდა, მაშინ ფუნქციის მოქმედებები შესრულებულია.
4. დასრულდა, ახლა ajax-ის ფორმის გაგზავნისას თქვენ მიიღებთ მონაცემებს გვერდის განახლების გარეშე.
შედეგის შეცვლა შესაძლებელია form1.php ფაილის გამოყენებით, სადაც შეგიძლიათ მიუთითოთ ზუსტად რა იქნება ნაჩვენები შედეგად. მაგალითად, შეგიძლიათ ექსპერიმენტი და შექმნათ შემოწმება გარკვეული მონაცემების შეყვანის სისწორეზე: თუ მონაცემები არ არის სწორი, მაშინ გამოჩნდება სასურველი შეტყობინება, წინააღმდეგ შემთხვევაში ის გადამისამართდება სწორ გვერდზე. ბევრი სხვა რამაც შესაძლებელია, რასაც გული მოინდომებს.
ასინქრონულადაც ხდება მონაცემების გაგზავნა სერვერზე. ამ დროს მომხმარებელი შეაქვს ტექსტს და ის მაშინვე ხაზგასმულია წითლად, რაც მიუთითებს, რომ შეყვანილი მონაცემები არ არის სწორი. Ამის შესახებინტერნეტში ბევრი სახელმძღვანელოა, სადაც ყველაფერი ნათლად არის ახსნილი და ნაჩვენები მაგალითებით.
დასკვნა
ეჭვგარეშეა, ajax არის სასარგებლო ინსტრუმენტი ვებსაიტების შესაქმნელად. მაღალი ხარისხის გვერდებისა და ინტერფეისების შესაქმნელად, უბრალოდ აუცილებელია. აღსანიშნავია, რომ ძალიან მნიშვნელოვანია jQuery-ის ცოდნა სურათის და კოდში ჩაწერილის სრულად გასაგებად, რადგან მარტივი კოპირ-პასტი ყოველთვის ვერ დაგეხმარებათ და გასწავლით კოდის გაგებას. ყოველთვის უნდა გვახსოვდეს, რომ ენის ვერსიები განახლებულია და ზოგიერთი ფუნქცია შეიძლება უბრალოდ გაქრეს. ამიტომ, ყველა გამოსავალი შეიძლება არ იყოს რელევანტური, ხშირად დაწერილი კოდი უბრალოდ არ მუშაობს ან არ იძლევა შედეგს, რომლის ნახვაც გსურთ თქვენს ეკრანზე.
