យើងបានគ្របដណ្តប់លើមេកានិចជាមូលដ្ឋាននៃវិធីសាស្ត្រ jQuery $.ajax() ។ ឥឡូវនេះវាជាការល្អក្នុងការពិចារណាករណីពីការអនុវត្តជាក់ស្តែង៖ របៀប និងពីកន្លែងដែលអ្នកអាចទទួលបានទិន្នន័យសម្រាប់ការបញ្ជូនជាមួយសំណើរបស់ Ajax ។

ការទទួលទិន្នន័យពីទម្រង់។

មានវិធីជាច្រើនដើម្បីទទួលបានទិន្នន័យពីវាលទម្រង់៖

ជ្រើសរើសវាលនីមួយៗដាច់ដោយឡែក ដោយទទួលបានតម្លៃរបស់វា។ ទោះជាយ៉ាងណាក៏ដោយនេះមិនងាយស្រួលទេនៅពេលដែលមានវាលជាច្រើន។

ប្រើវិធីសាស្ត្រ serialize()

ប្រើវិធីសាស្ត្រ serializeArray()

ចូរយើងរស់នៅលើពីរចុងក្រោយ និងមិនច្រើនអំពីរបៀបទទួលបានទិន្នន័យ ( អ្វីគ្រប់យ៉ាងគឺសាមញ្ញនៅទីនេះ) ប៉ុន្តែអំពីរបៀបដំណើរការពួកវានៅផ្នែកខាងម៉ាស៊ីនមេ។ ជាឧទាហរណ៍ ចូរយកទម្រង់នេះ៖

HTML ( ឯកសារ index.html)

ឈ្មោះពេញ៖
អ៊ីមែល៖
ភេទ៖ ប្រុស ស្រី
ទទួលសំបុត្រ៖
បាទ
ទេ

ហើយសូមសរសេរកូដ JS នេះ។

jQuery( ឯកសារ script.js)

$(function())($("#my_form").on("submit", function(e)(e.preventDefault(); var $that = $(this), fData = $that.serialize(); // តម្រៀបទិន្នន័យ // ឬ // fData = $ that.serializeArray(); $.ajax(( url: $that.attr("action") // យកផ្លូវទៅកាន់អ្នកដោះស្រាយពីគុណលក្ខណៈប្រភេទសកម្មភាព៖ $that.attr("method"), // វិធីសាស្ត្រផ្ទេរ - យកចេញពីទិន្នន័យគុណលក្ខណៈ method: (form_data: fData), dataType: "json", success: function(json)( // ប្រសិនបើការស្នើសុំត្រូវបានបញ្ចប់ដោយជោគជ័យ។ .. if(json)( $that.replaceWith(json); // ជំនួសទម្រង់ដោយទិន្នន័យដែលទទួលបានក្នុងការឆ្លើយតប ) ));

ឥឡូវ​នេះ​សូម​សរសេរ​អ្នក​ដោះស្រាយ​តាម​វិធី​មួយ​ដើម្បី​មើល​ឃើញ​ច្បាស់​ពី​ភាព​ខុស​គ្នា​រវាង​វិធីសាស្ត្រ serialize() និង serializeArray()

កម្មវិធីដោះស្រាយ PHP ( ឯកសារ handler.php)

Robert Sheckly

វាចាំបាច់ បន្ថែមពីលើការបញ្ជាក់អាសយដ្ឋានឯកសារថ្មី - serverAddr ="http://zykov/data.xml" ដែលត្រូវជំនួសក្នុងមុខងារ

handleStateChange()

resp=xmlHttp.responseText;

resp=xmlHttp.responseXML.getElementsByTagName("name").firstChild.data;

បន្ទាប់មកជំនួសឱ្យសារ

ម៉ាស៊ីនមេបានផ្ញើ៖ សួស្តីអតិថិជន!

សារមួយនឹងលេចឡើង

ម៉ាស៊ីនមេដាក់ជូនដោយ៖ Robert Sheckly

AJAX គឺជាក្រុមនៃបច្ចេកវិទ្យាដែលត្រូវបានប្រើក្នុងការអភិវឌ្ឍន៍គេហទំព័រដើម្បីបង្កើតកម្មវិធីអន្តរកម្ម។ AJAX អនុញ្ញាតឱ្យអ្នកផ្ទេរទិន្នន័យពីម៉ាស៊ីនមេដោយមិនចាំបាច់ផ្ទុកទំព័រឡើងវិញ។ វិធីនេះអ្នកអាចទទួលបានលទ្ធផលគួរឱ្យចាប់អារម្មណ៍ខ្លាំងណាស់។ ហើយបណ្ណាល័យ jQuery ជួយសម្រួលយ៉ាងខ្លាំងដល់ការអនុវត្ត AJAX ដោយប្រើវិធីសាស្រ្តដែលភ្ជាប់មកជាមួយ។

ដើម្បីអនុវត្តបច្ចេកវិទ្យា សូមប្រើវិធីសាស្ត្រ $.ajax ឬ jQuery.ajax៖

$.ajax(properties) ឬ $.ajax(url [, properties])

ប៉ារ៉ាម៉ែត្រទីពីរត្រូវបានបន្ថែមនៅក្នុងកំណែ 1.5 នៃ jQuery ។

url - អាសយដ្ឋាននៃទំព័រដែលបានស្នើសុំ;

លក្ខណៈសម្បត្តិ - ស្នើសុំលក្ខណៈសម្បត្តិ។

សម្រាប់បញ្ជីជម្រើសពេញលេញ សូមមើលឯកសារ jQuery ។

នៅក្នុងមេរៀននេះ យើងប្រើប៉ារ៉ាម៉ែត្រជាច្រើនដែលប្រើជាទូទៅបំផុត។

ជោគជ័យ (មុខងារ) - មុខងារនេះត្រូវបានហៅបន្ទាប់ពីសំណើបានបញ្ចប់ដោយជោគជ័យ។ មុខងារទទួលបានពី 1 ទៅ 3 ប៉ារ៉ាម៉ែត្រ (អាស្រ័យលើកំណែបណ្ណាល័យដែលបានប្រើ) ។ ប៉ុន្តែប៉ារ៉ាម៉ែត្រទីមួយតែងតែផ្ទុកទិន្នន័យដែលបានត្រឡប់ពីម៉ាស៊ីនមេ។

ទិន្នន័យ (វត្ថុ / ខ្សែអក្សរ) - ទិន្នន័យអ្នកប្រើប្រាស់ដែលត្រូវបានបញ្ជូនទៅទំព័រដែលបានស្នើសុំ។

ប្រភេទទិន្នន័យ (ខ្សែអក្សរ) - តម្លៃដែលអាចធ្វើបាន៖ xml, json, script ឬ html ។ ការពិពណ៌នាអំពីប្រភេទនៃទិន្នន័យដែលរំពឹងទុកនៅក្នុងការឆ្លើយតបរបស់ម៉ាស៊ីនមេ។

ប្រភេទ (ខ្សែអក្សរ) - ប្រភេទសំណើ។ តម្លៃដែលអាចធ្វើបាន៖ GET ឬ POST។ លំនាំដើម៖ ទទួល។

url (ខ្សែអក្សរ) - URL សម្រាប់សំណើ។

ឧទាហរណ៍ ១

ការផ្ទេរអត្ថបទងាយស្រួល។

$.ajax(( url: "response.php?action=sample1", ជោគជ័យ៖ មុខងារ(ទិន្នន័យ)( $(.results").html(data); ) ));

មានធាតុ .result div សម្រាប់ការឆ្លើយតប។

យើងកំពុងរង់ចាំចម្លើយ

ម៉ាស៊ីនមេគ្រាន់តែត្រឡប់ខ្សែអក្សរ៖

អេកូ "ឧទាហរណ៍ 1 - ការផ្ទេរបានបញ្ចប់ដោយជោគជ័យ";

ឧទាហរណ៍ ២

យើងបញ្ជូនទិន្នន័យអ្នកប្រើប្រាស់ទៅស្គ្រីប PHP ។

$.ajax(( type: "POST", url: "response.php?action=sample2", data: "name=Andrew&nickname=Aramis", ជោគជ័យ៖ function(data)($(.results").html( ទិន្នន័យ);

ម៉ាស៊ីនមេត្រឡប់ខ្សែអក្សរជាមួយនឹងទិន្នន័យបញ្ជូនដែលបានបញ្ចូលទៅក្នុងវា៖

Echo "ឧទាហរណ៍ 2 - ការផ្ទេរបានបញ្ចប់ដោយជោគជ័យ។ ប៉ារ៉ាម៉ែត្រ៖ name = " . $_POST["ឈ្មោះ"] ។ ", សម្មតិនាម = " ។ $_POST["ឈ្មោះហៅក្រៅ"];

ឧទាហរណ៍ ៣

ឆ្លងកាត់ និងប្រតិបត្តិកូដ JavaScript

$.ajax((ប្រភេទទិន្នន័យ៖ "ស្គ្រីប", url: "response.php?action=sample3", ))

ម៉ាស៊ីនមេប្រតិបត្តិកូដ៖

Echo "$(.results").html("ឧទាហរណ៍ 3 - ការប្រតិបត្តិ JavaScript");";

ឧទាហរណ៍ 4

យើងប្រើ XML ។ ឧទាហរណ៍អាចត្រូវបានប្រើដើម្បីធ្វើការជាមួយ XML ខាងក្រៅឧទាហរណ៍ RSS feed ។

$.ajax(( dataType: "xml", url: "response.php?action=sample4", ជោគជ័យ: function(xmldata)( $(."results").html(""); $(xmldata).ស្វែងរក ("item").each(function())($(" ").html($(this).text()).appendTo(.results"); ) ));

ម៉ាស៊ីនមេគួរតែត្រឡប់លេខកូដ XML៖

បឋមកថា("ប្រភេទមាតិកា៖ កម្មវិធី/xml; សំណុំតួអក្សរ = UTF-8");