ajax() से Low-Level AJAX
In this page:
$.ajax({
url: "url",
type: "GET",
data: { key: "value" },
dataType: "json",
success: function (response) { /* ... */ },
error: function (xhr, status, error) { /* ... */ }
});1. ajax() क्या है?
$.ajax() वह low-level method है जिस पर हर jQuery AJAX shortcut ($.get, $.post, $.getJSON) असल में internally बना है। इसे सीधे इस्तेमाल करना हर configuration option पर पूरा control देता है।
उदाहरण: 1. What is ajax()?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$.ajax({url: "data.php", success: function(data) {
console.log(data);
}});
</script>
</body>
</html>2. GET Requests
GET तब इस्तेमाल करें जब आपको सिर्फ server से data पढ़ना हो, जैसे products की एक list या किसी user की profile fetch करना। Response success callback में आता है।
उदाहरण: 2. GET Requests
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$.ajax({url: "data.php", method: "GET", success: function(data) {
console.log(data);
}});
</script>
</body>
</html>3. POST Requests
POST तब इस्तेमाल करें जब आप server को data भेज रहे हों कुछ create या update करने के लिए, जैसे एक form submit करना या एक comment save करना। data option values रखता है।
उदाहरण: 3. POST Requests
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$.ajax({url: "data.php", method: "POST", data: {name: "Alice"}, success: function(response) {
console.log(response);
}});
</script>
</body>
</html>4. Request Options
ajax() method URL और data के अलावा भी कई configuration options accept करता है। timeout limit करता है कि कितनी देर wait करना है इससे पहले कि give up कर दिया जाए, dataType jQuery को बताता है।
उदाहरण: 4. Request Options
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$.ajax({
url: "data.php",
timeout: 5000,
dataType: "json",
success: function(data) { console.log(data); }
});
</script>
</body>
</html>5. Errors Handle करना
error callback तब fire होता है जब भी request fail हो जाती है — एक network problem, एक timeout, या एक server error status। यह jqXHR object receive करता है, एक status text।
उदाहरण: 5. Handling Errors
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$.ajax({
url: "data.php",
error: function(jqXHR, statusText, errorMsg) {
console.log(statusText, errorMsg);
}
});
</script>
</body>
</html>methodयाtypeset करना भूल जाना, ताकि request default रूप से GET हो जाए जबकि POST intended था।dataके साथ एक object भेजना लेकिन server JSON की उम्मीद करता है, जब इसके लिएcontentType: "application/json"औरJSON.stringify(...)चाहिए।dataType: "json"set करना जब server कुछ और return करता है, जोerrorcallback को trigger कर देता है भले ही request succeed हुई हो।
Chapter Quiz — Complete all 4 topics to unlock
0/4 topics done
Complete these topics first: