متد ajax
درخواستهای پیشرفته با $.ajax() و تنظیمات کامل
متد $.ajax()
متد $.ajax() مادرِ همه متدهای AJAX در jQuery است؛ load، get و post هم در واقع از روی همین ساخته شدهاند. با $.ajax() کنترل کامل روی همه جزئیات درخواست دارید:
$.ajax({
url: "api/data.php", // آدرس درخواست
type: "POST", // متد HTTP (GET، POST، PUT، DELETE)
data: { id: 5 }, // داده ارسالی
dataType: "json", // نوع داده پاسخ
success: function(data) { ... }, // هنگام موفقیت
error: function(xhr) { ... }, // هنگام خطا
complete: function() { ... } // همیشه (موفق یا ناموفق)
});
تنظیمات مهم
| تنظیم | توضیح |
|---|---|
url | آدرس درخواست (اجباری) |
type | متد HTTP: GET، POST، PUT، DELETE |
data | داده ارسالی (شیء یا رشته) |
dataType | نوع پاسخ مورد انتظار: json، text، html، xml |
timeout | حداکثر زمان انتظار (میلیثانیه) |
headers | هدرهای سفارشی |
async | غیرهمزمان بودن (پیشفرض true) |
مثال کامل
$.ajax({
url: "api/products.php",
type: "GET",
data: { category: "books", sort: "price" },
dataType: "json",
timeout: 5000,
success: function(products) {
var html = "";
$.each(products, function(i, product) {
html += "<div class='card'>" +
"<h3>" + product.title + "</h3>" +
"<span>" + product.price + " تومان</span>" +
"</div>";
});
$("#products").html(html);
},
error: function(xhr, status, error) {
if (xhr.status === 404) {
$("#products").html("<p>محصولی یافت نشد</p>");
} else {
$("#products").html("<p>خطا: " + error + "</p>");
}
},
complete: function() {
$("#loader").hide();
}
});
ارسال فرم کامل با serialize
متد serialize() همه فیلدهای فرم را خودکار به رشته query تبدیل میکند:
// بهجای گرفتن تکتک فیلدها:
$("#myForm").submit(function(e) {
e.preventDefault();
$.ajax({
url: "api/register.php",
type: "POST",
data: $(this).serialize(), // همه فیلدها با یک خط!
dataType: "json",
success: function(response) {
alert(response.message);
}
});
});
ارسال JSON واقعی
$.ajax({
url: "api/save.php",
type: "POST",
data: JSON.stringify({ name: "علی", age: 25 }),
contentType: "application/json", // نوع محتوا JSON است
success: function(response) {
console.log("ذخیره شد");
}
});
کد وضعیت HTTP
| کد | معنی |
|---|---|
| 200 | موفق ✅ |
| 201 | ساخته شد (مثلاً رکورد جدید) |
| 400 | درخواست نامعتبر |
| 401 | احراز هویت نشده |
| 403 | دسترسی غیرمجاز |
| 404 | پیدا نشد |
| 500 | خطای سرور |
برای پروژههای جدید، APIهای مدرن با
fetch() جاوااسکریپت خالص هم قابل استفادهاند؛ اما $.ajax() همچنان در میلیونها پروژه موجود فعال است و مدیریت خطای سادهتری دارد.جمعبندی
$.ajax()کاملترین متد AJAX با همه تنظیمات- تنظیمات کلیدی: url، type، data، dataType، success، error
serialize()فرم کامل را با یک خط آماده ارسال میکند- کدهای وضعیت HTTP را بشناسید تا خطاها را بهتر مدیریت کنید
این مبحث بخشی از دوره آموزش کامل jQuery است.