პოსტის მოთხოვნა დააბრუნებს დამლაგებლის გვერდს. პოსტის მოთხოვნის გაგზავნა JavaScript- ის მეშვეობით

JQuery არის JavaScript ბიბლიოთეკა, რომლის მიზანი არის "დაწერეთ ნაკლები, უფრო მეტი." JQuery არის ადვილი დაკავშირება საიტზე და დაიწყოს გამოყენებით. გამოყენებით jQuery, ეს ხდება ბევრად უფრო ადვილია გამოიყენოს JavaScript თქვენს საიტზე.

jQuery აღმოფხვრის მთელი buzz of JavaScript კოდი, და საშუალებას გაძლევთ განახორციელოს ეს რიგი მხოლოდ ერთი მეთოდი.

რა არის აიაქსი?

Ajax არის ასინქრონული (I.E. ბრაუზერი, გაგზავნის თხოვნას, შეუძლია გააკეთოს არაფერი, მაგალითად, აჩვენოს შეტყობინება ელოდება პასუხს, გადაახვიეთ გვერდი და ა.შ.) JavaScript და XML. იგი გამოიყენება დინამიური და სწრაფი ვებ-გვერდის შესაქმნელად. AJAX საშუალებას გვაძლევს ვებ-გვერდის განაახლოს მთელი გვერდის გადატვირთვის გარეშე.

რაც შეეხება jQuery და ajax?

JQuery და Ajax კომბინაცია უზრუნველყოფს ძლიერი ფუნქციონირება. -დან jQuery გამოყენებით. და Ajax შეგიძლიათ გააკეთოთ თხოვნა და მიიღოთ ინფორმაცია სხვადასხვა ფორმატებში, მათ შორის XML, HTML და კიდევ ნორმალური ტექსტი. თქვენ შეგიძლიათ გამოიყენოთ JSON ფორმატის მონაცემების გაცვლა. AJAX მოთხოვნის მიერ მიღებული მონაცემები ჩვენ შეგვიძლია გამოვიყენოთ ჩვენი HTML გვერდზე.

jQuery ხდის არსებული ბრაუზერი AJAX API უფრო ძლიერი და ადვილია. შექმნა AJAX მოუწოდებს ჩვეულებრივი გზით JavaScript- ის გამოყენებით, ცოტა რთულია: მას შემდეგ, რაც თქვენ უნდა გაითვალისწინოთ, რომ სხვადასხვა ბრაუზერებს სჭირდება სხვადასხვა მიდგომები XMLHTTPRequest ობიექტის შესაქმნელად. გარდა ამისა, მონაცემების გაგზავნა, მაგალითად, ფორმებისგან, უფრო რთულია, თუ ჩვეულებრივი JavaScript- ს იყენებთ AJAX- ს.

jQuery უზრუნველყოფს მარტივი და ძლიერი ფუნქციონირების, რომელიც აფართოებს JavaScript Ajax მეთოდები და უზრუნველყოფს უფრო მოქნილი მიდგომა.

ამ პატარა სტატიაში მე გაჩვენებთ როგორ გამოვიყენოთ jQuery და ajax in მარტივი PHP. ფორმა. დავიწყოთ ... გამოიყენოთ jQuery და ajax, ჩვენ გვჭირდება ორი ფაილი, პირველი ფაილი შეიცავს HTML / PHP კოდი, რომლითაც Ajax შეკითხვა იქნება შედგენილი. მეორე ფაილში, ჩვენ გავატარებთ AJAX შეკითხვას და დაბრუნდება პირველი გვერდისთვის.

ნაბიჯი 1. შექმნა School.php ფაილი და ჩადეთ შემდეგი კოდი მას:

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

ᲗᲥᲕᲔᲜᲘ ᲡᲐᲮᲔᲚᲘ:
როლი ნომერი:

ნაბიჯი 2: შექმენით დეტალები .Php და მოათავსეთ შემდეგი კოდი:

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

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

ვიმედოვნებ, რომ ეს სტატია სასარგებლო იქნება თქვენთვის.

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

პოსტის მეთოდის კონტექსტში აღსანიშნავია jSON. - ტექსტის ფორმატი JavaScript- ზე. ეს შეიძლება გამოყენებულ იქნას თითქმის ნებისმიერი პროგრამირების ენა.

jQuery, AJAX მოთხოვნის პოსტი მეთოდი

jquery.post (URL ,,,,,)
  • პირველი არგუმენტი (URL) არის დოკუმენტის URL, სადაც მოთხოვნის გაგზავნა;
  • მეორე არგუმენტი (მონაცემები) არის სერვერზე გაგზავნილი მონაცემები, როგორც წესი, წარმოდგენილია ობიექტის JS;
  • მესამე არგუმენტი (Callback (მონაცემები, Textstatus, JQXHR)) არის F-I მოუწოდა სერვერის რეაგირების შემდეგ. როგორც არგუმენტები ეს ფუნქცია სერვერის მიერ გაგზავნილ მონაცემებს, თუ როგორ შესრულდა მოთხოვნის მოთხოვნის და სტატუსის საპასუხოდ.

json_decode () და json_encode ()

-ში pHP ენა (5.2), JSON მხარდაჭერა შედის Kernel სახით JSON_Decode (Decodes Json String) და JSON_ENCODE (), რომელიც თავად კონვერტირება JSON მონაცემთა ტიპების შესაბამისი სახეები PHP. და პირიქით.

1, "B" \u003d\u003e 2); Echo json_encode ($ arr); ?\u003e.

შედეგი

("ა": 1, "ბ": 2, "C": 3, "D": 4, "E": 5)

PHP მაგალითი ოპერაცია json_decode

$ json \u003d "(" ა ": 1," ბ ": 2)"; Var_dump (json_decode ($ json, true)); $ Arr \u003d json_decode ($ json, true); Echo "
"$ Arr [" A "]."
"$ Arr [" B "]."
";

შედეგი

Array (5) (["A"] \u003d\u003e Int (1) ["B"] \u003d\u003e Int (2)) 1 2

AJAX შეკითხვის მაგალითი პოსტი მეთოდით

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


jQuery.

$ (დოკუმენტი) .რადი (ფუნქცია () (var work \u003d false; / * ეს დროშა ხელს უშლის რამდენიმე კომენტარს: * / $ ("ფორმა"). წარუდგინოს (E) (E.PreventDefault (); თუ (მუშაობს ) დაბრუნების ცრუ; სამუშაო \u003d ჭეშმარიტი; $ ("# წარდგენა"). $ ("შეცდომა"). Removeclass ("შეცდომა"); $ .Post ("Submit.php", $ (ეს) .Serialize (), ფუნქცია (MSG) (/ * გაგზავნის ფორმის ღირებულებები Submition.php: * / სამუშაო \u003d ცრუ; $ ("გაგზავნა"). VAL ("გაგზავნა"); თუ (MSG. სტატუსი) // თუ მონაცემები სწორია, დაამატეთ შეტყობინება (console.log (msg.status); $ (msg.html) .დამალე ("). Slidedown ();) თუ შეცდომები არსებობს, ობიექტის მეშვეობით ობიექტი // msg.errors და მათ $ მიიღებს .თას Page (Msg.errors, ფუნქცია (K, V) ($ ("#" + ლ) .დამატებითი ( "შეცდომა"); // alert (k);))))), "JSON");)););

Html

Php.

// ჩვენ ვიღებთ მონაცემებს, რომლებიც მოვიდა AJAX $ arr \u003d $ _post; $ arr \u003d $ _post; თუ (filter_var ($ arr, filter_valide_email) && filter_var ($ arr, filter_validate_int)) (echo json_encode (array ("სტატუსი" \u003d\u003e 1, "HTML" \u003d\u003e "
გმადლობთ, თქვენი მონაცემები ზუსტია
") // სერვერი Retown ინფორმაცია) სხვაგან (თუ (filter_var ($ arr, filter_valide_email) \u003d\u003d FALSE) ($ შეცდომები [" ელფოსტა "] \u003d" გთხოვთ შეიყვანოთ სახელი ";) თუ (FILTER_VAR Filter_validate_int) \u003d\u003d FALSE) ($ შეცდომები ["INTT"] \u003d "გთხოვთ შეიყვანოთ სახელი";) $ arr \u003d $ შეცდომები; / * შეცდომის შეტყობინებების გამოშვება * / echo "(" სტატუსი ": 0," შეცდომები " : ". JSON_ENCODE ($ ARR).") ")

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

HTML მონაცემების მოთხოვნა დატვირთვის ფუნქციის გამოყენებით

ეს არის მარტივი Ajax შეკითხვის მეშვეობით jQuery მიიღოს HTML მონაცემები და ჩადეთ მათ შევიდა DOM ელემენტს ID \u003d "შედეგი" (ელემენტის შინაარსი შეიცვალა):

$ ("# შედეგი"). ჩატვირთვა (" ");

დატვირთვის უფრო მოწინავე ვერსია:

$ ("# შედეგი"). ჩატვირთვა (" ", (PAR1: VAL1, PAR2: VAL2, ...), ფუნქცია (რეაგირება, სტატუსი, XHR) (თუ (სტატუსი \u003d\u003d" წარმატება ") (alert (" მზად "); else (alert (" შეცდომა: "შეცდომა: "+ xhr.status +" "+ xhr.Statustext);));

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

AJAX ითხოვს მიიღოთ და პოსტი ფუნქციები

ეს ფუნქციები გაიგზავნება AJAX- ის მიერ HTTP მეთოდების მიღება და პოსტი. მე მისცემს რამდენიმე მაგალითს მათი გამოყენება.

$. ", // მისამართი გაგზავნის მისამართი (PAR1: VAL1, PAR2: VAL2, ...), // გადაცემული ნებისმიერი მონაცემების ფუნქციის (მონაცემების) (// ზოგიერთი ქმედებები მონაცემთა მონაცემები სერვერზე));

მონაცემთა გადაცემის არ არის საჭირო, ისევე როგორც ნებისმიერი ქმედების შესრულების შემდეგ სერვერზე რეაგირების შემდეგ, I.E. ამ შემთხვევაში, 3 და 4-6 სიმები შეიძლება ამოღებულ იქნას, საჭიროების შემთხვევაში, და ამცირებს კოდს.

სერვერზე მიღებული მონაცემების ტიპი შეიძლება განისაზღვროს მონაცემთა ბაზის დამატება (იხ. შემდეგი) - ნაგულისხმევი ავტომატურად განისაზღვრება.

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

$ .Post (" ", (PAR1: VAL1, PAR2: VAL2, ...), ONSUCCESS); ფუნქცია Onsuccess (მონაცემები) (// ზოგიერთი ქმედებები სერვერზე მიღებული მონაცემების მონაცემებით)

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

GETJSON JSON მონაცემები მიღების

getjson - შემცირებული ვარიანტი Ajax შეკითხვის გამოყენებით მეთოდი და მიღების მონაცემები როგორც JSON. მეთოდი მოსახერხებელია, მაგალითად, მოიპოვოს რამდენიმე მასივი მონაცემებით და შემდგომში.

$ .GETJSON (" ", (PAR1: VAL1, PAR2: VAL2, ...)) წარმატება (ფუნქცია (მონაცემები) (/ რაღაც ჩვენ გავაკეთებთ მონაცემებს, მაგალითად, ჩვენ წასვლა ციკლი და ჩვენება: ამისთვის (var i \u003d 0; მე

სერვერზე, პროგრამა ქმნის მასივს და აკონვერტებს მას JSON სიმებიანი, მაგალითად, შემდეგნაირად:

$ arr \u003d array (); $ arr \u003d array ("id" \u003d\u003e 10, "ტექსტი" \u003d\u003e "ტესტირება 1"); $ arr \u003d array ("id" \u003d\u003e 20, "ტექსტი" \u003d\u003e "ტესტირების ხაზი 2"); $ arr \u003d array ("id" \u003d\u003e 30, "ტექსტი" \u003d\u003e "ტესტირება ხაზი 3"); Echo json_encode ($ arr);

ანალოგიურად, STDClass ობიექტების შეიძლება გადაეცემა სერვერზე, კონვერტაცია მათ JSON სიმებიანი.

მარტივი Ajax შეკითხვის მეშვეობით jQuery გამოყენებით Ajax ფუნქცია

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

$ .AJAX (URL: " ", Datatype:" HTML ", წარმატება: ფუნქცია (მონაცემები) (/ გარკვეული ქმედება მონაცემთა მონაცემებით მიღებული)));

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

AJAX მოთხოვნის უფრო რთული მაგალითი jQuery

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

$ .AJAX (URL: " ", ტიპი:" პოსტი ", მონაცემები:"<отправляемые_данные>"თქვენ შეგიძლიათ ხაზი, მაგრამ თქვენ შეგიძლიათ, მაგალითად, შემდეგნაირად: $ (" შეყვანის, შეყვანის: შეყვანის, შეყვანის: შემოწმებულია, შეარჩიეთ, Textarea ") Datatype:" JSON ", Beforesert: ფუნქცია () "# Sendajax") .button ("loading");), სრული: ფუნქცია ($) ($ (# sendajax ").), წარმატება: ფუნქცია (JSON) მიღებული მონაცემები), შეცდომა: ფუნქცია (XHR, Ajaxoptions, ThrownError) (alert (thrownerror + "\\ r \\ n" + xhr.Statustext + "\\ r \\ n" + xhr.responsetextext);););

მონაცემთა გაგზავნა ღილაკი:

მაგალითად, როდესაც ღილაკზე დაჭერით ღილაკზე დაჭერით, ღილაკის სტატუსი პირველი ცვლილებების (ტექსტი მასზე "გაგზავნის" ... "და ეს არ არის აქტიური), რომელიც კეთდება beforesend პარამეტრის გამოყენებით. მაშინ მოთხოვნა იგზავნება სასურველი მონაცემების გადაცემასთან. სერვერისგან მიღებული პასუხების შემდეგ, ღილაკის სტატუსი დაბრუნდა იმავე (ტექსტური ცვლილებები "გაგზავნის", აქტიური ხდება). პასუხი მიღებულია JSON მონაცემებით.

მოკლედ აღწერეთ AJAX მოთხოვნის გაგზავნის პარამეტრებს, რამაც შეიძლება ხშირად მოვიდეს მოსახერხებელი:

uLL გაგზავნის AJAX მოთხოვნის მისამართი
ბეჭდვა გაგზავნის მეთოდი მოთხოვნის მიღება. ან პოსტი.
მონაცემები. მონაცემები გაგზავნილი მონაცემები. ეს შეიძლება იყოს სიმებიანი პარამეტრებით და მათი ღირებულებები PAR1 \u003d VAL1 & PAR2 \u003d VAL2 & ..., JQuery Object, მაგალითად, $ ("შეყვანის") ან სხვა მონაცემებით.
Მონაცემთა ტიპი. სერვერის მონაცემების ტიპი. შეიძლება იყოს HTML, JSON, ტექსტი, სცენარი და XML.
ქეში. კახეთის შეკითხვის ბრაუზერი (ყალბი - არ ქეში).
async. ასინქრონული შეკითხვის შესრულება, ანუ. პროგრამა განაგრძობს სერვერის პასუხს ელოდება. თუ მიუთითეთ ცრუ, შეკითხვა შესრულდება სინქრონულად, ხოლო გვერდი არ პასუხობს რეაგირებას სერვერზე.
პროცედურა. URL ფორმატში გაგზავნილი მონაცემების კონვერტაცია. თუ აუცილებელია, რომ მონაცემები არ არის გარდაიქმნება, დააყენოთ ყალბი. მაგალითად, სერვერზე ან XML მონაცემების გაგზავნისას.
Შინაარსის ტიპი. გადაცემული მონაცემების ტიპი, ნაგულისხმევი "განცხადება / X-www-Form-Urlencoded; charset \u003d utf-8". თუ მიუთითეთ ცრუ, სათაური არ გაივლის იმ ტიპს, რომელიც აუცილებელია, მაგალითად, სერვერზე გამოსახულების გაგზავნისას.
beforesend. AJAX მოთხოვნის გაგზავნამდე შესრულებული ფუნქცია.
სრული. სერვერის რეაგირების შემდეგ შესრულებული ფუნქცია (ნებისმიერი, წარმატებული თუ არა).
წარმატება. ფუნქცია შესრულებული წარმატებული შეკითხვით.
შეცდომა შეცდომის შემთხვევაში შესრულებული ფუნქცია.

ქვემოთ მოცემული რამდენიმე მაგალითი მაქვს AJAX- ის შეკითხვების გამოყენებით.

ფორმის გაგზავნის ყველა მონაცემებით AJAX მოთხოვნით JQuery

Sample HTML კოდი:

Javascript კოდი:

$ ("# MyForm"). წარუდგინოს (E.PreventDefault (E); $ .AJAX ((ტიპი: $ (ეს) .ATTR ("მეთოდი"), URL: " ", მონაცემები: $ (ეს) .Serialize (), ASYNC: FALSE, Datatype:" HTML ", წარმატება: ფუნქცია (შედეგი) (alert (" ფორმის გამოგზავნა ");));

იმისათვის, რომ გვერდი გადატვირთოთ "წარუდგინოს" ღილაკზე დაჭერით, პირველი გააუქმეთ სტანდარტული ბრაუზერის ქმედებები e.preventdefaults () .

მონაცემთა პარამეტრი, ჩვენ გადავდივართ ყველა ფორმის სფეროში $ (ეს) .Serialize () - ეს ფუნქცია აკონვერტებს ყველა შეყვანისას და SELECT-S სერვერზე გაგზავნის სტრიქონს.

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

გაგზავნის გამოსახულება ან Ajax შეკითხვის ფაილი მეშვეობით jQuery

ამოცანა გაგზავნის ფაილი ან გამოსახულება სერვერზე გარეშე გადატვირთვის გვერდი საკმაოდ ხშირად ხდება. ამ მაგალითში, Scare of 2 Chips ერთდროულად: აირჩიეთ ფაილი ღილაკზე დაჭერითრომელიც შეიძლება იყოს კარკასის მდგომარეობაში ფაილის გადაცემისას პროგრესის ჩვენება AJAX მოთხოვნის სერვერი.

hTML კოდი იქნება ასე:

#addfile (პოზიცია: ნათესავი; overflow: დამალული: 180px; სიმაღლე: 34px;) #load_file (პოზიცია: აბსოლუტური; მარცხენა: 0; სიგანე: 180px; სიმაღლე: 34px; შრიფტის ზომა: 0px; : 0; ფილტრი: Alpha (Opacity: 0);) #load_file: hover (კურსორი: მაჩვენებელი;)

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

ახლა Javascript გაგზავნა ფაილის კოდი სერვერზე პროგრესის ჩვენება:

$ (ფუნქცია () ($ ("# load_file"). ("ცვლილება", LoadFile);); ფუნქცია LoadFile () ("Addfile Span"). HTML ("ატვირთული 0%"); ფაილები \u003d $ ("# load_file"). ფაილები; var form \u003d ახალი ფორმა); form.append ("ატვირთვა" , ფაილები); $ .AJAX ((URL: " ", ტიპი:" პოსტი ", მონაცემები: ფორმა, ქეში: FALSE, PROFESDATA: FALSE, CONTURTYPE: FALSE, XHR: ფუნქცია () (var myxhr \u003d $ .AJAXSETTINGS.XHR (); თუ (Myxhr. Upload.addeventlistener ("პროგრესი", showprogress, FALSE);) დაბრუნება MyXhr;), სრული: ფუნქცია (მონაცემები). HTML ("ატვირთვის სურათი"); $ (""). წარმატება: ფუნქცია (შეტყობინება) (alert (შეტყობინება), შეცდომა: ფუნქცია (jqxhr, textstathrown) (alert (textstatus + "+ textustthrown);)))) ფუნქცია showprogress (E) (თუ (E.LengthCutabutable) (E) $ ("Addfile span"). HTML ("ატვირთული" + math.round (100 * e.loaded / e.total) + "%");)

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

სერვერის მაგალითი PHP- ზე (ევგენის მოთხოვნით):

$ გაგზავნა \u003d ""; თუ (ცარიელი ($ _ ფაილები ["ატვირთვა"] ["სახელი"]) || $ _Files ["ატვირთვა"] \u003d\u003d "არა") ($ გაგზავნა \u003d "თქვენ არ აირჩიეთ ფაილი") სხვაგან, თუ ($ _ "ატვირთვა"] ["ზომა"] \u003d\u003d 0 || $ _Files ["ატვირთვა"] ["ზომა"]\u003e 9437184) ($ გაგზავნა \u003d "ფაილის ზომა არ შეესაბამება სტანდარტებს (მაქსიმუმ 9 მბ) ") სხვა შემთხვევაში, თუ (" ატვირთვა "] [" ტიპი "]! \u003d" Image / JPEG ") && ($ _Files [" ატვირთვა "] [" ტიპი "]! \u003d" სურათი / pjpeg ") && ($ _Files ["ატვირთვა"] ["ტიპი"]! \u003d "Image / GIF") && ($ _Files ["ატვირთვა"] ["image / png")) ($ message \u003d "დასაშვებია JPG, GIF და PNG- ის გადმოტვირთვა ";)) სხვაგან, თუ (! არის _USOUPODED_FILE ($ _ ფაილები [" ატვირთვა "])) ($ გაგზავნა \u003d" რაღაც არასწორია. სცადეთ ფაილის გადმოტვირთვა. ") სხვაგან ($ ftype \u003d $ _Files [" ატვირთვა "] [" ტიპი "]; $ fname \u003d" newname_image ". ($ Ftype \u003d\u003d" სურათი / GIF "?" GIF ": Image / Png "? ) ($ გაგზავნა \u003d "წარმატებით დატვირთული";) სხვა ($ გაგზავნა \u003d "რაღაც არ წავიდა . შეეცადეთ ჩამოტვირთოთ ფაილი კვლავ. "))) გასასვლელი ($ გაგზავნა);

ინფორმაცია გადმოწერილი სურათის შესახებ შეიცავდეს $ _Files ["ატვირთვა"], რადგან Script ფაილი დაემატა შემდეგნაირად: Form.Append ("ატვირთვა", ფაილები); შესაბამისად, ყველაფერს, რაც საჭიროა PHP- ის პროგრამისგან, გადაამოწმებს, რომ ფაილი შეესაბამება მოსალოდნელ პარამეტრებს, ფაილის გადაცემას სასურველი საქაღალდე (მაგალითად, ფაილების საქაღალდეში) შემდეგ სახელით (Newname_Image- ის მაგალითში) და დაბრუნების პასუხად ბრაუზერში, რომელიც ჩემს მაგალითში უბრალოდ არის ნაჩვენები მომხმარებლის მზადყოფნაში (შეტყობინება) ბრძანება;

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

მე ვერ გამომიგზავნე მარტივი მოთხოვნა Servlet მეშვეობით jQuery. მაგრამ ამავე დროს, თუ ფორმით გამოგიგზავნით, ყველაფერი მუშაობს bang. ქვემოთ მოცემული ინდექსი.ჰტლ, საიდანაც მინდა მომხმარებლის შესვლა. Login.js, რომელშიც მოთხოვნა თავად, Serletstore.java თავად servlet თავად. და მთელი პროექტის სტრუქტურა.

login.js. მხოლოდ მცირე სამუშაო URL \u003d "http: // localhost: 8080 / testservlet / პოსტი", და ისინი "/ testservlet / post", "testservlet / post", "/ პოსტი," პოსტი "გამოიწვიოს შეცდომა 404.

ფუნქცია AddNewVoting () (VAR XHR \u003d ახალი XMLHTTPRequest () var body \u003d "name \u003d" + encodeuricomponent ("სახელი") + "და გვარი \u003d" + encodeuricomponent ("გვარი"); xhr.open ("პოსტი", " http: // localhost: 8080 / testservlet / post ", true) xhr.setrequestheader (" შინაარსი-ტიპი "," განცხადება / X-www-Form-Urlencoded ") XHR.Send (Body);); ფუნქცია AddNewvoting1 () (Var User \u003d ("Firstname": "Vlad") var jsonstring \u003d json.stringify (მომხმარებელი); var url \u003d "http: // localhost: 8080 / testservlet / პოსტი" $. : URL, Mide: "Post", მონაცემების: "განაცხადის / JSON", შეცდომა: ფუნქცია (შეტყობინება) (გაგზავნა (შეტყობინება); კონსოლი.ლოგი (JSonObject);), წარმატება: ფუნქცია (მონაცემები) (VAR jsonobject \u003d json.parse (მონაცემები); console.log (jsonobject);), სათაურები: ("მიღება": "განცხადება / JSON", "Accept-Language": "EN", "Cache-Control": " ასაკი \u003d 3600 "))););

მეორე ფუნქციის დარეკვისას აჩვენებს:

index.html

შესვლა ფორმა

Servettstore.java.

იმპორტირება javax.servlet.servletexception; იმპორტირება javax.servlet.annotation.webservlet; იმპორტირება javax.servlet.http.httpservlet; იმპორტირება javax.servlet.http.httpservletrequest; იმპორტირება javax.servlet.http.httpservletresponse; იმპორტის java.io.ioxception; იმპორტი java.io.printwriter; @Webservlet (სახელი \u003d "პოსტი", URLPatterns \u003d "/ პოსტი") საჯარო კლასის სერვერი ვრცელდება httpservlet (@ Loverride დაცული ბათილად doget (httpservletresponseSponse Resp) ისვრის servletexception, ioexception (printwriter მწერალი \u003d resp.getriter (); მწერალი. ბეჭდვა ("გამარჯობა");) @ LoveRide დაცული ბათილად dopost (httpservletrequest req, httpservletresponse resp) ისვრის servletexception, ioexception (super.dopost (req, resp);)

პროექტის სტრუქტურა.

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

რა არის AJAX ასინქრონული მოთხოვნა?

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

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

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

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

შექმნა ასინქრონული Ajax შეკითხვის (მიიღეთ მეთოდი)

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

ამისათვის თქვენ უნდა შექმნათ 2 ფაილი სერვერზე ერთ დირექტორია:

  1. მისასალმებელია. Html - HTML გვერდი, რომელიც გამოჩნდება მომხმარებლისთვის. იმავე გვერდზე, დააყენეთ სკრიპტი, რომელიც განახორციელებს ყველა საჭირო ქმედებას AJAX- ისთვის კლიენტის მხარეს.
  2. processing.Php - PHP ფაილი, რომელიც სერვერზე მოთხოვნის დამუშავებას და პასუხს ქმნის. მოდით დავიწყოთ განვითარება Welcome.html ფაილის ძირითადი სტრუქტურის შექმნისგან
AJAX- ის მაგალითი

AJAX- ის მაგალითი

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

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

    შექმენით ცვლადი, რომელიც შეიცავს XHR ობიექტის მაგალითს (XMLHTTPRequest).

    მოთხოვნის კონფიგურაცია ღია () მეთოდის გამოყენებით.

    მითითებულია შემდეგი პარამეტრების მითითება:

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

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

    გარდა ამისა, მზა საკუთრებაში არსებული ქონების ნომრის 4-ის სწორი ღირებულებით, შეგიძლიათ შეამოწმოთ სტატუსის ქონების ღირებულება. ეს ქონება განსაზღვრავს შეკითხვის სტატუსს. თუ ეს 200, მაშინ ყველაფერი კარგად არის. წინააღმდეგ შემთხვევაში, შეცდომა მოხდა (მაგალითად, 404 - URL ვერ მოიძებნა).

    ჩვენ გამოგიგზავნით მოთხოვნას სერვერზე გაგზავნის () მეთოდის გამოყენებით.

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

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

სკრიპტის ელემენტის შინაარსი:

// 2. შექმენით მოთხოვნა VAR მოთხოვნა \u003d ახალი XMLHTTPRequest (); // 3. მოთხოვნის დაკმაყოფილება. შეკითხვა ("მიიღეთ", "PROCESSION.PHP", TRUE); / 4. გამოწერა onReadyStateChange ღონისძიება და დამუშავება გამოყენებით ანონიმური ფუნქცია quission.Adeventlistener ("ReadyStateChange", ფუნქცია (// თუ შეკითხვა 4 სტატუსი და მოთხოვნის სტატუსი 200 (OK) თუ ((მოთხოვნა.მახალი \u003d\u003d 4) && (quarits.status \u003d\u003d 200)) (მაგალითად, XHR ობიექტის გაყვანა ConsoLe.Log ბრაუზერის კონსოლში; // და პასუხი (ტექსტი), რომელიც სერვერზე მოვიდა ფანჯარა (quant.responsetextt); // მიიღეთ ID \u003d მისასალმებელი ვარდისფერი \u003d document.getelementbyid ("მისასალმებელი"); ))) // 5. მოთხოვნის მოთხოვნის მოთხოვნის გაგზავნა.შეიძლება () სერვერი;

შედეგად, Welcome.html ფაილი ექნება შემდეგ კოდს:

AJAX- ის მაგალითი

AJAX- ის მაგალითი

სერვერზე (PHP- ის გამოყენებით):

  1. ჩვენ ვიღებთ მონაცემებს. თუ მონაცემები გაიგზავნება მეთოდით, შემდეგ გლობალური array $ _get ["სახელი"]. და თუ მონაცემები გადაცემულია ფოსტის გამოყენებით, შემდეგ გლობალური მასივიდან $ _post ["სახელი"].
  2. ამ მონაცემების გამოყენება, სერვერზე გარკვეული ქმედებების შესრულება. რის შედეგადაც ჩვენ პასუხი გვაქვს. გაიყვანოს ეს echo.

ქმნის ასინქრონული AJAX შეკითხვის (პოსტი მეთოდი)

ზემოთ მოყვანილი მაგალითის შეცვლა. ახლა Ajax შეკითხვა სერვერზე იქნება შესრულებული ღილაკზე დაჭერით. ის მიიღებს სახელს, რომელიც შევიდა მომხმარებლის შეყვანის ელემენტში და გააგზავნეთ სერვერზე პოსტ მეთოდით. სერვერის რეაგირების შემდეგ, შეცვალეთ მათ გვერდით DIV ელემენტის შინაარსი.

AJAX- ის მაგალითი

AJAX- ის მაგალითი



მსგავსი სტატიები