متدهای Get/Post (Get/Post)

در این بخش با متدهای Get/Post در jQuery آشنا می شوی. این متدها با استفاده از AJAX داده را بین مرورگر و سرور جابه جا می کنند. AJAX یعنی فرستادن و گرفتن داده بدون رفرش کل صفحه؛ مثل وقتی فقط یک چت در گوشی آپدیت می شود.

آشنایی با متدهای Get/Post در jQuery

در وب، درخواست های HTTP (HTTP Request) زبان صحبت بین مرورگر و سرور هستند. دو متد خیلی معروف آن GET و POST هستند. هر دو می توانند داده بگیرند؛ اما رفتار و کاربردشان فرق دارد.

• GET: فقط داده را از یک منبع می گیرد.
• POST: داده را برای پردازش به منبع می فرستد.

معمولاً از GET برای گرفتن اطلاعات ساده استفاده می کنیم. اما گاهی سرور پاسخ GET را کش (Cache) می کند. کش یعنی نگه داشتن یک نسخه آماده برای پاسخ های بعدی؛ مثل حافظه ی گوشی که عکس ها را نگه می دارد.

در عوض، متد POST هیچ وقت کش نمی شود و بیشتر وقت ها برای فرستادن فرم ها و داده های حساس به سرور استفاده می شود؛ مثل فرم ثبت نام یا فرم خرید.

نکته: برای مطالعه عمیق تر تفاوت این دو، می توانی بعداً به مرجع HTTP روش ها در W3Schools هم سر بزنی.

متد $.get() در jQuery

متد $.get() در jQuery برای درخواست داده با متد GET استفاده می شود. این متد داده را از سرور می گیرد و در تابعی که به آن می دهیم استفاده می کند.

ساختار کلی آن در منبع این طور نوشته شده است:

$.get(URL, callback);

پارامتر URL آدرس فایل روی سرور است. پارامتر callback هم تابعی است که وقتی درخواست موفق شد اجرا می شود.

مثال عملی متد $.get()

در مثال منبع، وقتی کاربر روی دکمه کلیک می کند، یک فایل ASP به نام demo_test.asp خوانده می شود. بعد متن برگردانده شده و وضعیت درخواست در یک پیام نمایشی نشان داده می شود.

$("button").click(function() {
  $.get("demo_test.asp", function(data, status) {
    alert("Data: " + data + "\nStatus: " + status);
  });
});

مشاهده در ادیتور

در این کد:

• "button" همه دکمه های صفحه را انتخاب می کند.
• روی کلیک دکمه، تابع $.get() اجرا می شود.
• data محتوای برگشتی از فایل demo_test.asp است.
• status وضعیت درخواست را نگه می دارد؛ مثلا "success".

گام های تمرین با $.get()

1. به لینک «مشاهده در ادیتور» بالا برو.
2. کد را اجرا کن و روی دکمه کلیک کن.
3. متن پیام را تغییر بده و دوباره تست کن.

نکته: در فایل ASP مثال، فقط یک متن ساده چاپ می شود. سرور می تواند هر متن یا داده دیگری هم برگرداند؛ مثل JSON یا HTML.

متد $.post() در jQuery

متد $.post() هم برای درخواست به سرور است؛ اما با متد POST. این متد معمولاً همراه با داده استفاده می شود؛ یعنی علاوه بر آدرس، یک شیء حاوی مقادیر هم می فرستیم.

ساختار کلی آن طبق منبع این طور است:

$.post(URL, data, callback);

در اینجا:

• URL: آدرس فایل پردازش کننده روی سرور است.
• data: داده ای است که باید همراه درخواست ارسال شود.
• callback: تابعی است که پس از موفقیت اجرا می شود.

مثال عملی متد $.post()

در مثال منبع، روی کلیک دکمه، نام و شهر کاربر به سرور فرستاده می شود. سپس سرور از روی این مقادیر یک متن پاسخ می سازد و برمی گرداند.

$("button").click(function() {
  $.post(
    "demo_test_post.asp",
    {
      name: "Donald Duck",
      city: "Duckburg"
    },
    function(data, status) {
      alert("Data: " + data + "\nStatus: " + status);
    }
  );
});

مشاهده در ادیتور

در این مثال:

• شیء { name: "Donald Duck", city: "Duckburg" } همراه درخواست ارسال می شود.
• سرور مقادیر name و city را می خواند.
• یک متن مثل یک نامه دوستانه می سازد و برمی گرداند.
• در تابع callback متن برگشتی و وضعیت در یک alert نمایش داده می شود.

گام های تمرین با $.post()

1. به لینک «مشاهده در ادیتور» مثال POST برو.
2. کد را اجرا کن و نتیجه پیام را ببین.
3. نام و شهر را عوض کن و دوباره تست کن.

نکته: در عمل، به جای نام های نمونه، معمولاً داده فرم های واقعی مثل فرم ثبت نام را می فرستیم.

هماهنگی متدهای Get/Post با بقیه AJAX در jQuery

متدهای Get/Post در jQuery کنار هم یک جعبه ابزار کامل AJAX می سازند. برای بارگذاری مستقیم محتوا داخل صفحه می توانی از تابع load در jQuery استفاده کنی.

اگر دوست داری همین صفحه را به عنوان مرجع نگه داری، لینک متدهای Get/Post در jQuery را ذخیره کن. همچنین می توانی قبل یا بعد از این درس، بخش مقدمه AJAX در jQuery را هم مرور کنی تا تصویر کلی تری بگیری.

جمع بندی سریع

• متدهای Get/Post در jQuery برای درخواست های AJAX استفاده می شوند.
• $.get() با متد GET داده را از سرور می گیرد.
• $.post() با متد POST داده را همراه درخواست ارسال می کند.
• در هر دو متد، تابع callback جواب و وضعیت درخواست را می دهد.
• برای بارگذاری مستقیم محتوا در صفحه، تابع load() در jQuery هم بسیار کاربردی است.