get() से HTTP GET
get method एक HTTP GET request भेजता है। यह आमतौर पर server से data पढ़ने के लिए इस्तेमाल होता है।
In this page:
Syntax
$.get(url, data, function (response) {
// handle response
}, dataType);get() क्या है?
$.get() एक GET-style AJAX request बनाने का shorthand है, जो अक्सर server-side कुछ भी modify किए बिना server से data पढ़ने के लिए इस्तेमाल होता है।
उदाहरण: What is get()?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$(document).ajaxError(function(event, xhr, settings) {
$("#output").append($("<div>").text("Request failed: " + settings.url));
});
$("#runBtn").click(function() {
$("#output").empty();
$("#output").append($("<div>").text("Sending request..."));
$.get("data.php", function(data) {
$("#output").text(JSON.stringify(data));
});
});
$("#resetBtn").click(function() {
jQuery(document).off();
$("#output").empty();
});
</script>
</body>
</html>Query Parameters के साथ GET
GET requests URL में appended query parameters के रूप में data भेज सकती हैं, और jQuery pass किए गए plain object से उस query string को automatically बना सकता है।
उदाहरण: GET with Query Parameters
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$(document).ajaxError(function(event, xhr, settings) {
$("#output").append($("<div>").text("Request failed: " + settings.url));
});
$("#runBtn").click(function() {
$("#output").empty();
$("#output").append($("<div>").text("Sending request..."));
$.get("data.php", {category: "books", limit: 5}, function(data) {
$("#output").text(JSON.stringify(data));
});
});
$("#resetBtn").click(function() {
jQuery(document).off();
$("#output").empty();
});
</script>
</body>
</html>GET Success Callback
success callback server द्वारा return किया गया data receive करता है, जिसे आप फिर page को jQuery से update करने के लिए इस्तेमाल कर सकते हैं -- कोई list populate करना, कुछ भरना।
उदाहरण: GET Success Callback
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<section id="demo">
<ul id="list"></ul>
</section>
<div id="output"></div>
<script>
var original = $("#demo").html();
$(document).ajaxError(function(event, xhr, settings) {
$("#output").append($("<div>").text("Request failed: " + settings.url));
});
$("#runBtn").click(function() {
$("#output").empty();
$("#output").append($("<div>").text("Sending request..."));
$.get("data.php", function(data) {
$("#list").append("<li>" + data.message + "</li>");
});
});
$("#resetBtn").click(function() {
$("#demo").html(original);
jQuery(document).off();
$("#output").empty();
});
</script>
</body>
</html>GET Error Handling
एक GET request network issues या किसी server error की वजह से fail हो सकती है, और request पर .fail() chain करना आपको उस case को cleanly handle करने देता है बजाय इसे unhandled छोड़ने के।
उदाहरण: GET Error Handling
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#runBtn").click(function() {
$("#output").empty();
$("#output").append($("<div>").text("Sending request..."));
$.get("data.php").done(function(data) {
$("#output").append($("<div>").text(JSON.stringify(data)));
}).fail(function() {
$("#output").append($("<div>").text("Request failed"));
});
});
$("#resetBtn").click(function() {
jQuery(document).off();
$("#output").empty();
});
</script>
</body>
</html>एक छोटा GET Project
get() method simple read-only requests के लिए एक अच्छा choice है, जैसे items की एक list fetch करना या status check करना, क्योंकि यह code को $.ajax() से shorter रखता है।
उदाहरण: Small GET Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="resetBtn">Reset</button>
<section id="demo">
<button id="checkStatus">Check Status</button>
</section>
<div id="output"></div>
<script>
var original = $("#demo").html();
function init() {
$("#checkStatus").on("click", function() {
$.get("data.php", function(data) {
$("#output").append($("<div>").text("Status: " + data.status));
});
});
}
init();
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
init();
});
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
const data = $.get("data.php")लिखना औरdataको response की तरह इस्तेमाल करना, जबकि यह एक jqXHR object है और असली data callback में आता है।"data.php?name=" + nameजैसे हाथ से query string बनाना बिना encoding के, जबकि{ name: name }जैसा एक object pass करना jQuery को इसे सही से encode करने देता है।- यह उम्मीद करना कि
$.get()किसी दूसरे domain की file के लिए काम करेगा, जबकि browser की same-origin policy इसे CORS के बिना block कर देती है।
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: