জেকুয়েরি load() মেথড
সংজ্ঞা এবং ব্যবহার
load() মেথডটি সার্ভার থেকে ডেটা লোড করে এবং একটি নির্দিষ্ট এলিমেন্টের মধ্যে রাখে।
নোট: জেকুয়েরির ইভেন্ট মেথডেও একটি load() মেথড রয়েছে। তাই কোন মেথডটি কল করা হয় সেটি তার প্যারামিটারের উপর নির্ভর করে।
সিনট্যাক্স ও ব্যাখ্যা
$(selector).load(url,data,function(response,status,xhr))
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে load() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
url |
আবশ্যক। আপনি যেই URL রিকোয়েস্ট করবেন সেটিকে নির্দেশ করে। |
data |
ঐচ্ছিক। সার্ভার থেকে রিকোয়েস্টের মাধ্যমে রিটার্নকৃত ডেটা সরবারহ করে। |
function(response,status,xhr) |
ঐচ্ছিক। load() মেথডটি পুর্ন হলে নির্দিষ্ট কলব্যাক ফাংশন রান করবে।অতিরিক্ত প্যারামিটারসমূহ:
|
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test1").load("demo_test.txt");
});
});
</script>
</head>
<body>
<div id="test1"><p>জেকুয়েরি অ্যাজাক্সের মাধ্যমে এই টেক্সটকে পরিবর্তন হতে দেই</p></div>
<button>এক্সটার্নাল কন্টেন্ট</button>
</body>
</html>
ফলাফল
উদাহরণ
অ্যাজাক্স রিকোয়েস্ট তৈরি করা এবং রিকোয়েস্টের মাধ্যমে ডেটা সেন্ড করা
কিভাবে অ্যাজাক্স রিকোয়েস্টের মাধ্যমে ডেটা প্যারামিটার ব্যবহার করে ডেটা পাঠানো হয় (এই উদাহরনটি আমাদের (অ্যাজাক্স টিউটোরিয়াল পেজে দেওয়াআছে)।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").keyup(function(){
txt = $("input").val();
$("span").load("demo_ajax_gethint.php", {suggest: txt});
});
});
</script>
</head>
<body>
<p>নিচের ইনপুট ফিল্ডে একটি নাম লিখিঃ</p>
নাম:
<input type="text">
<p>পরামর্শঃ <span></span></p>
</body>
</html>
ফলাফল
অ্যাজাক্স রিকোয়েস্ট তৈরি করা এবং একটি কলব্যাক ফাংশন ব্যবহার করা
কিভাবে অ্যাজাক্স রিকোয়েস্ট থেকে ডেটা রেজাল্টের সাথে ফাংশন প্যারামিটার ব্যবহার করতে হয়।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").load("demo_cd_catalog.xml",function(response, status){
if (status == "success"){
$("div").html("<ol></ol>");
$(response).find("artist").each(function(){
var item_text = $(this).text();
$('<li></li>').html(item_text).appendTo('ol');
});
alert("এখানে " + $(response).find("cd").size() + " CD রয়েছে।")
}
});
});
});
</script>
</head>
<body>
<p>আর্টিষ্ট</p>
<div></div>
<button>সিডি'র বিবরণী</button>
<p>এই উদাহরণে <a href="demo_cd_catalog.xml" target="_blank">demo_cd_catalog</a> এই এক্সএমএল ফাইলটি ব্যবহার করা হয়েছে</p>
</body>
</html>
ফলাফল
একটি এরর সহ একটি অ্যাজাক্স রিকোয়েস্ট তৈরি
কিভাবে একটি এরর সহ একটি অ্যাজাক্স রিকোয়েস্ট তৈরি করা হয় (XMLHttpRequest প্যারামিটার ব্যবহার করে)
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").load("wrongname.",function(response, status, xhr){
if (status == "success"){
$("div").html("<ol></ol>");
$(response).find("artist").each(function(){
var item_text = $(this).text();
$('<li></li>').html(item_text).appendTo('ol');
});
} else {
$("div").html("একটি এঁরর হয়েছেঃ <br>" + xhr.status + " " + xhr.statusText)
}
});
});
});
</script>
</head>
<body>
<p>আর্টিষ্ট</p>
<div></div>
<button>সিডির বিবরণি</button>
<p>এই উদাহরণে <a href="demo_cd_catalog.xml" target="_blank">demo_cd_catalog</a>এই এক্সএমএল ফাইলটি ব্যবহার করা হয়েছে</p>
</body>
</html>
ফলাফল