যেক্যুয়েরী এর load() মেথড ব্যবহার করে সার্ভার থেকে প্রাপ্ত অর্থাৎ ফেরত পাথান তথ্য গুলো ওয়েব পেজে প্রদর্শন করা বা ব্যবহার করা যায়।
যেক্যুয়েরী load() মেথড একটি সাধারণ অথচ বেশ কার্যকরি একটি অ্যাজাক্স মেথড। load() মেথড ওয়েব সার্ভার থেকে data বা তথ্য লোড করে এবং নির্দেশ করে দেয়া এইচটিএমএল এলিমেন্টের ভেতর এই তথ্য বা data স্থাপন করে।
নিচে যেক্যুয়েরী load() মেথড বাবহারের সিনট্যাক্স দেখুন।
$(selector).load(URL,data,callback);
যে URL বা লিংক আমরা লোড করতে চাই তা ওপরের সিনট্যাক্সের “URL” প্যারামিটার এ দিতে হবে। এখানে data প্যারামিটারটি ঐচ্ছিক বা optional, এটি কোন রিকোয়েস্ট এর সাথে পাঠানোর জন্য querystring key/value নির্ধারণ করে দেয়। এখানে উল্লেখিত callback প্যারামিটারটিও ঐচ্ছিক বা optional, load() মেথড সম্পূর্ণ হবার পর যে ফাংশন কার্যকর (execute) হবে এটি সেই ফাংশনের নাম।
নিচে একটি উদাহরণ দেখুন, যেখানে কিছু যেক্যুয়েরী কোড রয়েছে। এখানে load() মেথড ব্যবহার করা হয়েছে।
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").load("demo_test.txt #p1"); }); }); </script> </head> <body> <div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div> <button>Get External Content</button> </body> </html>
উদাহরণটি "demo_test.txt" এর কনটেন্ট নির্দেশিত একটি <div> এলিমেন্টের ভেতর লোড করবে। URL প্যারামিটারে যেক্যুয়েরী সিলেক্টরও যোগ করা যায়। এখানে উদাহরণটিতে "demo_test.txt" থেকে id="p1" নির্দেশিত এলিমেন্টের কনটেন্ট নির্ধারিত <div> এলিমেন্টের ভেতর লোড করে।
ঐচ্ছিক অর্থাৎ optional, callback প্যারামিটার একটি callback ফাংশন নির্দেশ করে যখন load() মেথডটি সম্পূর্ণ হয়। এই callback ফাংশন একাধিক প্যারামিটার ধারণ করতে পারে। যেমন -
নিচে একটি উদাহরণ দেখুন, যেখানে load() মেথড সম্পূর্ণ হবার পর একটি অ্যালার্ট বক্স প্রদর্শন করবে। যদি যেক্যুয়েরী মেথড সফল হয় তাহলে এটি "External content loaded successfully!" বার্তাটি প্রদর্শন করে। আর যদি ব্যর্থ হয় তবে error বার্তা প্রদর্শন করবে। দেখাবে।
$("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); }); });
শেয়ার করুন
