load() से Content Load करना
In this page:
$(selector).load(url, data, function (response, status, xhr) {
// callback
});load() क्या है?
load() jQuery का shorthand AJAX method है -- यह किसी URL से HTML fetch करता है और इसे सीधे एक चुने हुए element में insert कर देता है, request और DOM insertion दोनों को एक step में combine करते हुए।
उदाहरण: What is load()?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="content"></div>
<script>
$("#content").load("data.php");
</script>
</body>
</html>Callback के साथ Load
load() को pass किया गया एक callback function loading खत्म होने के बाद चलता है, response text, status, और XHR object receive करते हुए। यह एक confirmation दिखाने के लिए उपयोगी है।
उदाहरण: Load with a Callback
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="content"></div>
<script>
$("#content").load("data.php", function(response, status, xhr) {
console.log("Load status:", status);
});
</script>
</body>
</html>अलग-अलग Elements में Load करना
आप किसी भी element को load() की destination बना सकते हैं, जो page के सिर्फ एक section को refresh करना आसान बनाता है -- जैसे comments list या sidebar -- पूरे page को नहीं।
उदाहरण: Load into Different Elements
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="sidebar"></div>
<div id="comments"></div>
<script>
$("#comments").load("data.php");
</script>
</body>
</html>Load और Status दिखाना
load() को एक status message के साथ combine करना -- call से पहले 'Loading...' दिखाना, फिर callback में इसे clear करना -- user को content आने पर simple, immediate feedback देता है।
उदाहरण: Load and Show Status
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="content">Loading...</div>
<script>
$("#content").load("data.php", function() {
console.log("Load complete");
});
</script>
</body>
</html>एक छोटा load() Project
load() method तब उपयोगी है जब page के किसी एक हिस्से को fresh content चाहिए, जैसे एक live comment count या किसी दूसरी file से included snippet, जबकि बाकी page वैसा ही रहता है।
उदाहरण: Small load() Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<span id="commentCount">Loading...</span>
<script>
$("#commentCount").load("data.php");
</script>
</body>
</html>.load()को गलत चीज़ पर इस्तेमाल करना, जैसे$.load("page.html"), जबकि यह एक element method है जिसे एक target चाहिए जैसे$("#content").load("page.html")।.load()के तुरंत बाद loaded content पढ़ने वाला code चलाना बजाय इसके callback के अंदर, ताकि नए elements अभी exist ही न करें।"page.html #box"जैसे trailing selector के साथ एक URL pass करना लेकिन space भूल जाना, जो jQuery को सिर्फ उस fragment को load करने के बजाय एक गलत URL request करवा देता है।
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: