با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش jQuery ، را دنبال می کنند. ما به تازگی وارد فصل جدیدی از دوره jQuery تحت عنوان AJAX در jQuery ، شده ایم. و تاکنون در اولین بخش این فصل، با اصطلاحات و مفاهیم اولیه ی ابزار AJAX ، آشنا شده ایم. در ادامه ی فصل، در این بخش به موضوع کار با تابع بارگزاری در jQuery یا کار با تابع ()load در jQuery ، می پردازیم.
اگر از کاربرانی هستید که آشنایی چندانی با مباحث AJAX ندارید. در بخش قبلی این فصل، ما بطور خلاصه مفاهیم پایه و اولیه AJAX، را در موضوع مقدمه ای بر AJAX در jQuery ، ارائه کردیم.
در ادامه این فصل ، در این بخش به مبحث کار با تابع بارگزاری یا ()load در jQuery ، می پردازیم.
کار با تابع بارگزاری یا ()load در jQuery ، بسیار ساده است اما یک ابزار AJAX بسیار قوی است.
تابع ()load در jQuery، برای برگرداندن اطلاعات از server و قرار دادن آن در یک عنصر html، استفاده می شود.
ساختار:
1 | $(selector).load(URL,data,callback); |
تشریح ساختار:
کد html که برای مثال های این بخش استفاده خواهیم کرد:
1 2 | <h2>jQuery and AJAX is FUN!!!</h2> <p id="p1">This is some text in a paragraph.</p> |
مثال زیر چگونگی load ، محتوای فایل “demo_test.txt” و قرار دادن نتایج داخل عنصر <div>
، را نشان می دهد:
1 | $("#div1").load("demo_test.txt"); |
همچنین ممکن است، انتخابگر جی کوئری را به پارامتر URL اضافه کنید.
در مثال زیر، عنصری که عنوان id آن ، “p1” است. از فایل “demo_test.txt” ، برگردانده شده و در عنصر <div>
، قرار می گیرد.
1 | $("#div1").load("demo_test.txt #p1"); |
پارامتر callback ، نیز می تواند شامل موارد زیر باشد:
مثال: در این مثال بعد از اینکه تابع ()load ، بطور کامل اجرا شود. یک پیغام ظاهر می شود. حال اگر فرآیند، موفقیت آمیز، بوده باشد، پیغام “External content loaded successfully!” ظاهر می شود. در غیر یک این صورت پیغام error ، ظاهر می شود.
1 2 3 4 5 6 7 8 | $("button").click(function(){ $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){ if(statusTxt == "success") alert("External content loaded successfully!"); if(statusTxt == "error") alert("Error: " + xhr.status + ": " + xhr.statusText); }); }); |
پس از آشنایی با مفاهیم اولیه ی AJAX ، در ادامه این فصل ، در این بخش به موضوع کار با تابع بارگزاری یا ()load در jQuery ، پرداختیم. تابع ()load ، از توابع ساده اما بسیار قوی و کارآمد در AJAX، است. امیدواریم که مطالب این بخش نیز، مورد توجه و رضایت شما قرار گرفته باشد.