متد 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() همچنان در میلیون‌ها پروژه موجود فعال است و مدیریت خطای ساده‌تری دارد.

جمع‌بندی

این مبحث بخشی از دوره آموزش کامل jQuery است.

ابزارهای مرتبط