AJAX ფორმა გვერდის ხელახლა ჩართვის გარეშე. საკონტაქტო ფორმა გვერდის ხელახლა ჩართვის გარეშე. ფორმა გვერდის ხელახლა ჩართვის გარეშე php ajax

AJAX ტექნოლოგია გამოიყენება "ფონური" http მოთხოვნების გასაგზავნად JavaScript-ის დახმარებით, რაც საშუალებას გაძლევთ ხელახლა არ ჩართოთ გვერდი, რაც ხდება მაშინ, როდესაც თქვენ თავდაპირველად აგზავნით ფორმებს.

AJAX-ის დანერგვა ტექნიკური თვალსაზრისით საკმაოდ რთულია. ფაქტობრივად, გამოძახებულია XMLHttpRequest API რობოტი, რომელიც განსაზღვრავს მთელ რობოტს. კოდის გასამარტივებლად ვიყენებთ wrapper ფუნქციებს, რომლებიც საშუალებას გვაძლევს შევქმნათ რთული XMLHttpRequest პროგრამა. jQuery-ს აქვს ajax-ის ფუნქციები ამისთვის, ასევე პოსტი "მოდიფიკაცია". თუ jQuery არ არის საჭირო, მაშინ Merezha-ში შეგიძლიათ იპოვოთ სხვა ბიბლიოთეკები, რომლებიც ახორციელებენ AJAX ფუნქციონირებას, მაგალითად Selector (რომელიც jQuery-ის მარტივი ჩანაცვლებაა).

ბიბლიოთეკის მიუხედავად, Ajax-ის გამოყენებით მონაცემების გაგზავნის ძირითადი პრინციპები იგივე იქნება. მე გაჩვენებთ ყველაფერს jQuery-ის გამოყენებით. მაგალითად, თქვენ იპოვით სტატიას, რომელიც გაგზავნილია zip არქივებში ყველა გვერდიდან.

რისი გაკეთება შეგიძლიათ AJAX-ით

ადამიანების უმეტესობა ფიქრობს, რომ ეს არის მხოლოდ ფორმა, რომელიც ხელს უწყობს მიმართულებას. მაგრამ ჩვენ ნამდვილად შეგვიძლია ვიხელმძღვანელოთ ნებისმიერი მოცემული მონაცემებით. დიდი არქივის მიღმა, მსგავსი ფორმა არ არის საჭირო; თქვენ შეგიძლიათ განათავსოთ შეყვანის ველები (შეყვანის, ტექსტური ზონა და ა.შ.) გვერდზე ნებისმიერ ადგილას: გაგზავნამდე უბრალოდ ჩამოაყალიბეთ მონაცემები.

პრაქტიკაში, ისინი ცდილობენ თავად შეცვალონ ფორმა, რადგან ეს გაამარტივებს მონაცემთა ფორმატირებას: გაგზავნამდე ის უბრალოდ კოდირდება (სერიული) და იგზავნება სერვერზე ამ ფორმით.

Zagalna რობოტის სქემა

ყოველთვის ასე იქნება:

• HTML გვერდზე იქმნება ფორმა საჭირო ველებით.
• ფორმის მონაცემების გაგზავნამდე ხდება მისი სერიალიზაცია და მონაცემები გადადის სერვერზე PHP პროცესორზე.
• მუშა, რომელმაც დაასრულა თავისი სამუშაო, აბრუნებს ჩვენებას. ეს შეიძლება იყოს ნებისმიერი მონაცემი ან მზა HTML კოდი.
• ეს შეტყობინება განთავსებულია გვერდზე მოცემულ ბლოკში.

გარდა ამისა, როდესაც თქვენ ამოიღებთ ფორმას, ხშირად უნდა მიმართოთ მას ხელახლა გამორთვისთვის.

Cob კოდი

ჯერ შევქმნათ HTML ჩარჩო. მე ვიყენებ UniCSS-ს მზა CSS კლასებით. jQuery-ს ასევე ვუკავშირებ HEAD განყოფილებას.

ფორმის გადახედვა AJAX-ით... ჩვენი კოდი იქნება აქ...

ახლა შევქმნათ მარტივი ფორმა და ბლოკი.

დასახელება: ტელეფონი: დამატება

პირველი თვისებები

ჯერ გავიგოთ, რომ ფორმას არ გააჩნია პირველადი ატრიბუტების მეთოდი და მოქმედება. ფორმალურად არავის აინტერესებს მათი დაკონკრეტება, მაგრამ რეალურად ისინი გაიმარჯვებენ მხოლოდ იმ შემთხვევაში, თუ ეს იქნება გადაუდებელი და არა აიაქსის გადაგზავნა. Ajax-ის აღსრულებით, ჩვენ არ დაგვჭირდება ფორმის მონაცემები და გაგზავნის მეთოდი და მისამართები უკვე მითითებულია js კოდში. ამ გზით ჩვენ შეგვიძლია გამოვიყენოთ მხოლოდ id ატრიბუტი, რომელიც შეიძლება გამოვიყენოთ ფორმის იდენტიფიცირებისთვის.

ღილაკი არის გაგზავნის ტიპის. სინამდვილეში, ეს არ არის რთული, თავის ფრაგმენტები უბრალოდ პასუხობენ ღილაკის წნევას და შეიძლება არა მხოლოდ წარადგინონ, არამედ დააჭირონ. გაგზავნის ტიპი არის მექანიკური, რადგან ღილაკი ნაჩვენებია ფორმის შუაში, რაც ნიშნავს, რომ თქვენ შეგიძლიათ ნავიგაცია მის წარდგენაში დამატებითი იდენტიფიკაციის გარეშე.

თუმცა, თუ თქვენ განათავსებთ ღილაკს ფორმაზე (რადგან ასეთი პრობლემაა), გაგზავნა არ მუშაობს საკმაოდ სწორად. მით უმეტეს, რომ მეორე მხარეს არაერთი ფორმაა, მნიშვნელოვნების ნაკლებობაა. ამ პარამეტრისთვის დააყენეთ ღილაკის ტიპი ღილაკზე (ისე, რომ არაფერი გაკეთდეს) და შემდეგ შეიყვანეთ მისი იდენტიფიკატორის ID. მაგალითად ასე:

გთხოვთ გამოაგზავნოთ თქვენი სახელი: ტელეფონი:

ბლოკი #my_message ემსახურება როგორც ვიდეო.

თუ ფორმა იგზავნება, უმჯობესია გაგზავნოთ თავად, რათა ფორმა გაიგზავნოს ღილაკზე დაჭერის გარეშე: ტექსტის შეყვანის ნებისმიერ ველზე Enter. ეს არის ბრაუზერების ტიპიური ქცევა. პირველი ვარიანტი (გაგზავნა)

ფორმის გაგზავნისას ფორმის გაგზავნის ღილაკზე დაჭერისას ჩნდება იგივე შეტყობინება, რასაც გავდივართ. jQuery-ში ასე გამოიყურება:

$("#my_form").submit(function())( alert("გაგზავნის ღილაკი დაჭერილია"); return false; ));

ზედმეტად გამოყენებული და ხელახლა ჩართული გვერდის დაბლოკვის მიზნით, ფუნქცია ხდება მცდარი. ჩვენ შეგვიძლია შევცვალოთ თავად პროცესი alert(), მაგრამ სანამ ამას გავაკეთებთ, მოდით გადავხედოთ რას აკეთებს jQuery Ajax-ის მოთხოვნის გასაგზავნად.

როგორც კი დაიწყეთ PHP-ის სწავლა და უკვე ქმნიდით ფორმებს მონაცემთა ჩასატვირთად GET და POST მოთხოვნებით, დაიწყეთ სიმღერა: „როგორ შემიძლია დავამუშავო მონაცემები და განაახლო ისინი გვერდზე ხელახლა შესვლის გარეშე?“ ამ სტატიაში ჩვენ გაჩვენებთ უმარტივეს გზას, თუ როგორ უნდა განახორციელოთ ასეთი დამუშავება და დაგვეხმაროთ AJAX-ში.

AJAX (ასინქრონული Javascript და XML) არის ტექნოლოგია, რომელიც საშუალებას აძლევს ვებ დანამატებს ჩასვან Javascript კოდი გვერდის ხელახლა ჩართვის გარეშე. უფრო ზუსტად, განახლებულია არა მთელი გვერდი, არამედ მხოლოდ ის ნაწილი, რომელიც ჩვენ გვჭირდება, რის შედეგადაც მნიშვნელოვნად იზრდება ინტერფეისის სიჩქარე.

ჩვენ ვახორციელებთ მონაცემთა გაგზავნას სიიდან, ამ მონაცემების სერვერზე დამუშავებას და დამუშავებული მონაცემების კლიენტს დაბრუნებას.

დასაწყისისთვის, თქვენ უნდა შემოიტანოთ JQuery ბიბლიოთეკა AJAX ფუნქციონირებისთვის. ტეგის შუაში

თქვენი პროექტისთვის ჩვენ ვწერთ:

კატეგორია არ არის შერჩეული სამგზავრო ფურგონები სპეციალური მანქანები

AJAX მუშაობს HTML ელემენტებთან id ატრიბუტის საშუალებით, ასე რომ არ დაგავიწყდეთ მისი დამატება ჩვენს ფორმაში.

ფორმის პოზა ქმნის რედაქტირების ღილაკს და div ბლოკს, რომელიც აჩვენებს შედეგს:

გაგზავნა

ღილაკზე დაჭერისას იხსნება ფუნქცია, მისი სახელი იწერება onclick ატრიბუტში. დააყენეთ ID ბლოკისთვის.

აბა, ახლა გადავიდეთ ყველაზე მნიშვნელოვანზე - შემოქმედებით ფუნქციაზე.

გაგზავნას დავარქმევ. დამატებითი ფუნქციის სერიალიზაციის გამოყენებით, ჩვენ შეგვიძლია შევკრიბოთ ელემენტები ჩვენი ფორმიდან პროცესორზე გადასატანად შესაფერის რიგში. url-ზე ჩავწერეთ მარშრუტი ობობლუვაჩამდე, რომელიც მოგვიანებით გაკეთდება. მონაცემების გაგზავნა მესიჯიდან. თქვენ მოგეთხოვებათ შემდგენლისგან.

ახლა თქვენ უნდა შექმნათ კომპენდიუმი. მე უკვე დავაყენე - auto_result.php. დოდამო შემდეგ მომავალ კოდამდე:

ეს მაძიებელი იღებს კატეგორიის მონაცემებს POST მეთოდის გამოყენებით და უგზავნის კატეგორიის ნომერს კლიენტს. თუ კატეგორია არ არის არჩეული, "არა" მნიშვნელობა უგულებელყოფილია.

დავუბრუნდეთ გაგზავნის ფუნქციას. შუაში წარმატების ფუნქცია ამოიღებს კოლექციონერის მიერ გაგზავნილი შეტყობინებების კატეგორიის ნომერს. ამის შემდეგ, თქვენ მოგეთხოვებათ აირჩიოთ შეტყობინება, რომელიც გამოჩნდება არჩეული კატეგორიის მიხედვით.

უმარტივესი დინამიური დამუშავების განხორციელება დასრულდა.

შეამოწმეთ ყველა ყველაზე მაგარი აპლიკაცია Ajax-ით

მოგესალმებით ყველას, ვებ დანამატების შემუშავებისას ხდება კლიენტის ნაწილსა და სერვერის ნაწილს შორის ურთიერთქმედება, მაგალითად მონაცემთა ბაზასთან მუშაობისას აუცილებელია ჩანაწერების დამატება, რედაქტირება ან წაშლა. ყველაზე ხშირად, ყველაფერი კეთდება კარგად ჩამოყალიბებული სქემის გამოყენებით GET ან POST მოთხოვნების სახით. თუმცა, არის მცირე უხერხულობა - ზოგიერთი მათგანი ძირითადად ჩანს PHP-ში მონაცემების გაგზავნისას, სკრიპტი ატრიალებს გამომავალს სერვერიდან და ნაჩვენებია მეორე მხარეს და მონაცემთა მასიური შეყვანის შედეგად ხდება არაეფექტური. შეიყვანეთ მონაცემები, დაამატეთ ისინი მონაცემთა ბაზაში, აიღეთ პასუხი ახალ გვერდზე და შემდეგ გადადით შეყვანის მხარეს.
რობოტის ოპერატორის დასაჩქარებლად და პატიების მიზნით, ჩვენ შეგვიძლია სწრაფად დავამატოთ მონაცემები დინამიურად გვერდის ხელახლა ჩართვის გარეშე ajax და jquery ინსტრუმენტების დახმარებით და ინფორმაციის ამოსაღებად გამოვიყენებთ foreach php ციკლს. სხვა სიტყვებით რომ ვთქვათ, ჩვენ დავამატებთ მონაცემთა ბაზას დამატებითი ajax მეთოდების გამოყენებით და ვამოწმებთ PHP-ის გამომავალს მოთხოვნის წარმატებით დასრულების შესახებ და გამოვაჩენთ შედეგს.
ბრაუზერსა და სერვერს შორის ხდება მონაცემთა ფონური გაცვლა, რომლის დროსაც ვებ გვერდი ხელახლა არ არის ჩართული, არამედ საჭირო მონაცემები განახლებულია.
მოდით შევხედოთ, თუ როგორ მუშაობს იგი - მივდივართ ბოლომდე უკანალამდე. ჩვენ გვაქვს პატარა ვებ-დამატება მონაცემთა ბაზაში მამის სახელის დასამატებლად.
ასე რომ დავასრულოთ:
პირველ რიგში, მოდით შევქმნათ index.php ფაილი აღწერილ სტილში, ვებ ფორმა და სერვერთან ურთიერთქმედების მექანიზმი მონაცემთა მართვისთვის.
HEAD განყოფილება აქ შეიცავს jquery-ის აუცილებელ ბიბლიოთეკებს მონაცემთა გაცვლისთვის, ჩატვირთვის ჩარჩო, რათა უფრო წარმომადგენლობითი სახე მივცეთ ჩვენს აპლიკაციას. ეს სტილები ასევე მნიშვნელოვანია:

შემდეგ ეტაპზე ჩვენ აღვწერთ პროგრამის გვერდის გარე იერსახეს, body tag-ს

ნუ დავივიწყებთ მონაცემთა დამატების ან რედაქტირების მოდალური ფანჯრის შექმნას, რომელიც ჩნდება ღილაკზე „ჩანაწერის დამატება“ დაწკაპუნებისას და არჩევისას და დააჭირეთ მასზე ჩანაწერის დამატება ღილაკზე დაჭერის შემდეგ.

ისე, მაშინ ტეგის უკან არის ლოგიკა, რომელიც მიუთითებს ინფორმაციის ჩვენება კლიენტის მხარეს, ასევე სერვერიდან შედეგის გაგზავნასა და მიღებაზე.

განაახლეთ ცვლილებები და კვლავ შექმენით მოდალური ფანჯარა

JQuery კოდი დამუშავებისთვის დააჭირეთ კლავიშებს მონაცემთა დამატების ან რედაქტირების საათში.

კოდის შემდეგი ბლოკი მიუთითებს, რომ მონაცემები განახლებულია - როდესაც დააჭირეთ ღილაკს განახლება

როდესაც დააწკაპუნებთ ღილაკზე View თქვენ მოგეთხოვებათ ეს კოდი

ჩვენ დავასრულეთ index.php ფაილი, კლიენტის ნაწილი მზად არის, დროა ავაშენოთ სერვერის ნაწილი, ამიტომ დავასრულოთ საჭირო ნაბიჯები და გავუშვათ პროგრამის კლიენტის ნაწილი.

ასე რომ, დავუძახოთ ფაილს action.php და მომავალში გავაგრძელებთ index.php-თან მუშაობას.

მონაცემთა ბაზასთან კავშირის შექმნა

შემდეგი, ჩვენ აღვწერთ ჩვენს დანამატში ყველაზე მნიშვნელოვანს, რაც არის მონაცემთა ბაზიდან შერჩევა და პროგრამის კლიენტის მხარეს გაგზავნა, გვერდის მონაცემების დამატება, ასევე რიგის ფორმირება. ღილაკების კანის ჩაწერა, განახლება და წაშლა, რომელსაც მხარს უჭერს PHP foreach loop.ამისთვის შეგიძლიათ წაიკითხოთ აღწერა საიტზე.
შეურაცხმყოფელი კოდი აღრიცხავს მონაცემთა ბაზაში გადაცემულ ინფორმაციას

განახლების ინფორმაციის ღილაკზე დაჭერა საჭიროა მიმდინარე კოდით