بخش دوم معرفی متدهای ایجکس در jQuery

با قسمت دوم از سری مقالات معرفی متدهای ایجکس در jQuery در خدمت شما هستیم. در این بخش قصد آموزش متد $.post و $.get در جی کوئری را داریم.

متد $.post() در جی کوئری

بعضی اوقات نیاز به فراخوانی محتوای بازگشتی از سرور و قرار دادن آن در یک یا چند المان را نداریم. بلکه نیاز داریم که داده ها را دریافت و بعد در مورد انجام عملیات روی داده تصمیم گیری کنیم. برای همین از متد $.post و $.get استفاده می کنیم.

این متد ها کار یکسانی انجام می دهند (ارسال درخواست به سرور) . همچنین سینتکس و پارامترهای یکسانی دارند.

تنها تفاوت آنها در متد ارسال درخواست از طریق HTTP به سمت سرور است همین.

خب اینجا نیازی نیست که تفاوت دو متد POST و GET را یادآوری کنیم چرا که در مقاله متدهای get و post کامل توضیح دادیم.

متد post در صورتی که عملیات ما ممکن است تغییراتی در وضعیت سمت سرور انجام دهد و نتایج مختلفی برگشت دهد,استفاده می شود در غیر اینصورت از متد GET‌ استفاده می کنیم.

سینتکس استفاده از متد $.post() در جی کوئری بصورت زیر است :

$.post(url[, data][, callback][, type])

1	$.post(url[, data][, callback][, type])

Url : رشته ای از آدرس URL منبع که قصد ارسال درخواست به آن را دارید
Data : یک رشته اختیاری که می تواند در فرمت query string یا یک آبجکت باشد و به عنوان بخشی از درخواست post ارسال می شود.
Callback : یک تابع بازگشتی که بعد از انجام دخواست موفقت آمیز اجرا می شود. داخل این تابع مقدار this دارای یک آبجکت است که تنظیمات ایجکس برگشت می دهد.
Type : یک رشته اختیاری که نحوه تفسیر بدنه پاسخ را مشخص می کند. مقادیر قابل قبول html, text, json, script و jsonp هستند.

همچنین می تواند رشته ای از مقادیر چندگانه که با فاصله از هم جدا شده, باشد. در این صورت, جی کوئری مقدار ها را به همدیگر تبدیل می کند.

به طور مثال, اگر پاسخ ما متنی باشد و می خواهیم بصورت XML تفسیر شود می توانیم بنوسیم “text xml” . اگر این پارامتر حذف شود, متن بدنه پاسخ بدون هیچ گونه ارزیابی یا تفسیری به تابه بازگشتی پاس داده می شود و جی کوئری بر اساس حدس بهترین فرمت را انتخاب می کند.

حالا که با متد $.post()‌ آشنا شدیم و پارامترها را شناختیم, شروع به نوشتن کدها می کنیم.

فرض کنید یک فرم برای پر کردن داریم. هر بار که focus از روی فرم برداشته می شود, می خواهیم که اطلاعات فیلد به سمت سرور برای اعتبارسنجی ارسال شود.

قصد داریم مطمین شویم که سرور اطلاعات را در فرمت JSONارسال می کند.

یک مورد استفاده معمولی از این روش برای اعتبارسنجی نام کاربری انتخاب شده که قبلا توسط فرد دیگری ثبت نشده باشد. (بررسی نام کاربری یکتا در PHP)

برای پیاده سازی این قابلیت ما از متد $.post() در جی کوئری بصورت زیر استفاده می کنیم.

$('input').blur(function() {
      var data = {};
      data[this.name] = this.value;

      $.post(
         '/user',
         data,
         function(responseText) {
            if (responseText.status === 'error') {
               $('#notification-bar').html('<p>' + responseText.message + '<p>');
            }
         }
      );
   });

$('input').blur(function() {

var data = {};

data[this.name] = this.value;

$.post(

'/user',

data,

function(responseText) {

if (responseText.status === 'error') {

$('#notification-bar').html('<p>' + responseText.message + '<p>');

}

);

});

در این کد jquery ما یک درخواست POST را به آدرس URL نسبی “/user” ارسال می کنیم.

همچنین مقدار data را برای ارسال نام و مقدار فیلدی که focus آن از دست داده شد بهره می بریم.

درنهایت, ما از تابع بازگشتی برای بررسی مقدار status آبجکت JSON برگشت داده شده که error است, بهره بردیم و متن پیام داخل message را به کاربر نمایش دادیم.

مقدار آبجکت JSON برگشت داده شده ما بصورت زیر است :

{
  "status": "error",
  "message": "Username already in use"
}

{

"status": "error",

"message": "Username already in use"

}

متد $.get() در جی کوئری

متد $.get() برای ارسال درخواست GET از طریق اجکس در jQuery استفاده می شود.

این متد یک درخواست GET را برای ارسال به سرور با URL مشخص شده و داده های پاس داده شده ایجاد می کند.

همچنین می تواند یک تابع بازگشتی را هنگام اتمام عملیات اجرا کند.

سینتکس متد $.get() در جی کوئری بصورت زیر است.

$.get(url[, data][, callback][, type])

1	$.get(url[, data][, callback][, type])

این پارامترها مشابه متد $.post() هستند بنابراین آن ها را اینجا تکرار نمی کنیم.

تابع $.get() برای وضعیتی که سرور همیشه یک نتیجه یکسان را هنگام دادن مجموعه از پارامترها برگشت میدهد, قابل استفاده است.

همچنین برای منابعی که قصد دارید کابران بتوانند آنها را به اشتراک بگذارند, مناسب است. برای مثال. درخواست GET برای سرویس های حمل و نقل (مثلا اطلاعات پرواز) که افراد برای تاریخ و زمانی که نتیجه یکسان را می دهد, جستجو می کنند.

جمع بندی

در دو بخش از سری مقاله آموزشی معرفی متدهای اجکس در jQuery , در مورد چندتا از متدهای پر استفاده ajax صحبت کردیم.

همانطور که دیدید کار با این متدها برای ارسال درخواست های AJAX بسیار راحت است.در حالت ساده آنها, امکان انجام عملیات مختلف حتی در یک خط نیز امکان پذیر است.

می توانید داکیومنت متدهای کوتاه AJAX در جی کوئری را برای اطلاعات بیشتر و متدهای دیگر مطالعه کنید.

از آنجایی که در مورد بقیه متدها چیزی ننوشتیم, می توانید برای افزایش اطلاعات خود داکیومنت را از سایت رسمی مطالعه کنید.

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

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

موفق و پیروز باشید