استفاده از AJAX در JQuery

📌 1. تعریف کلی تابع $.ajax()

$.ajax({
  url: 'example.php',        // آدرس فایل یا API
  type: 'GET',               // یا 'POST', 'PUT', 'DELETE'
  data: { id: 123 },         // داده‌های ارسالی
  dataType: 'json',          // نوع داده‌ای که انتظار دارید
  success: function(response) {
    console.log(response);   // موفقیت
  },
  error: function(xhr, status, error) {
    console.log(error);      // خطا
  },
  complete: function(xhr, status) {
    console.log('Done');     // همیشه اجرا می‌شود
  }
});

📌 2. پارامترهای مهم $.ajax()

📌 3. انواع متدهای Ajax در jQuery

برای راحتی بیشتر، jQuery چند متد ساده‌تر از $.ajax() نیز فراهم کرده است:

✅ $.get()

$.get('data.php', { id: 1 }, function(response) {
  console.log(response);
});

✅ $.post()

$.post('save.php', { name: 'Ali' }, function(response) {
  console.log(response);
});

✅ $.getJSON()

$.getJSON('data.json', function(data) {
  console.log(data);
});

📌 4. ارسال فرم با Ajax

$('#myForm').submit(function(e) {
  e.preventDefault();
  $.ajax({
    url: 'submit.php',
    type: 'POST',
    data: $(this).serialize(),
    success: function(response) {
      alert('Form submitted!');
    }
  });
});

📌 5. استفاده از beforeSend برای نمایش لودر

$.ajax({
  url: 'data.php',
  beforeSend: function() {
    $('#loader').show();
  },
  success: function(data) {
    $('#content').html(data);
  },
  complete: function() {
    $('#loader').hide();
  }
});

📌 6. کنترل خطاها با error

$.ajax({
  url: 'invalid.php',
  error: function(xhr, status, error) {
    alert("خطا: " + xhr.status + " - " + error);
  }
});

📌 7. نمونه استفاده با JSON و POST

$.ajax({
  url: 'api/user',
  type: 'POST',
  contentType: 'application/json',
  data: JSON.stringify({ name: 'Ali', age: 30 }),
  success: function(res) {
    console.log(res);
  }
});

📌 8. دریافت داده از API خارجی

$.ajax({
  url: 'https://api.example.com/users',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    console.log(data);
  }
});

📌 9. تنظیمات پیش‌فرض با $.ajaxSetup()

$.ajaxSetup({
  type: 'POST',
  dataType: 'json',
  timeout: 5000
});

📌 نتیجه‌گیری

تابع $.ajax() در jQuery بسیار انعطاف‌پذیر و قدرتمند است و به شما اجازه می‌دهد تا تعاملات پیچیده‌ای بین مرورگر و سرور ایجاد کنید. استفاده از متدهای ساده‌تر مانند $.get() و $.post() برای درخواست‌های ساده بسیار مناسب است، اما در مواقعی که نیاز به کنترل بیشتر دارید، $.ajax() بهترین انتخاب است.