jQuery و PHP: آموزش مقدماتی کار با Ajax

jQuery و PHP: آموزش مقدماتی کار با Ajax

یکی از قدرتمندترین قابلیت های jQuery ارتباط پشت صحنه ی آن با سرور است. شما می توانید به سادگی فراخوانی هایی را از پایگاه داده بدون ریفرش یا بارگذاری دوباره ی صفحه انجام دهید.

jQuery و PHP: آموزش مقدماتی کار با Ajax

ما این کار را توسط چیزی به عنوان Ajax انجام خواهیم داد.

ما در این آموزش قصد بررسی تاریخچه ی Ajax را نداریم و فقط قرار است مقدمات و نحوه ی استفاده از آن در صفحات وب برای ارتباط با سرور را بیان کنیم.

Ajax به گونه ای طراحی شده که استفاده از آن زیاد ساده نیست. اما امروزه با وجود jQuery دیگر چنین جمله ای صحیح نیست. jQuery کتابخانه ایست که یک API بسیار ساده را برای استفاده در اختیار شما قرار می دهد و در کمترین زمان ممکن خود را در حال ارتباط با سرور از طریق صفحه ی وب خود خواهید یافت. اجازه بدهید کار را آغاز کنیم:

تنظیم اولیه

اجازه بدهید همه چیز را ساده نگه داریم. فرض کنیم وب سایتی با یک فرم تماس با ما داریم که کاربر و مخاطب سایت توسط آن به مدیر سایت ایمیل ارسال می کند.

با استفاده از Ajax قادر خواهیم بود خیلی سریع و بدون رفتن به صفحه ای دیگر کاربر را از موفقیت یا عدم موفقیت ارسال ایمیل خود آگاه سازیم.

زیبایی استفاده از Ajax و jQuery نیز در همین است و ما قادر خواهیم بود بدون نیاز به بارگزاری دوباره ی صفحه اطلاعات را در اختیار کاربر قرار دهیم.

خب، کار را با کد HTML ساده که یک فرم ارسال ایمیل است آغاز می کنیم:

و همچنین کد جاوااسکریپت:

حال اگر کدهای بالا را پیاده سازی کنید، با کلیک بر روی دکمه ی ارسال، یک پیام hello را خواهید دید. همچنین متوجه بارگزاری دوباره ی صفحه خواهید شد.

اگر به میله ی آدرس نگاه کنید آدرس وب خود به علاوه ی یک # را خواهید دید. اما این علامت # از کجا آمده؟

اگر به خطی که در آن form قرار گرفته نگاه کنید، ویژگی action را خواهید دید که به عنوان آدرس مقصد فرم استفاده می شود و ما مقدار آن را # داده ایم.

استفاده از # را به این خاطر انجام داده ایم که قصد استفاده از Ajax را داریم و نمی خواهیم فرم، ما را به صفحه ی دیگری ببرد.

پس بارگذاری دوباره ی صفحه به چه علت اتفاق افتاد؟ این موضوع را نیز می توانیم با کمی تغییر در کد جاوا اسکریپت و حذف عملیات پیش فرض فرم هندل کنیم:

دریافت داده

ما می توانیم داده های فرم را خیلی راحت توسط تابع serialize جی کوئری دریافت کنیم. خطوط زیر را به کد جاوااسکریپت خود بیفزایید:

حال با کلیک بر روی دکمه ی ارسال متوجه موضوع خواهید شد.

و حالا Ajax

حال که داده های مدنظر را در قالب مناسبی در اختیار داریم، وقت استفاده ی از آن ها رسیده.

API مربوط به Ajax جی کوئری بسیار ساده است. ابتدا کد زیر را ببینید و بعد در مورد بخش های آن توضیح خواهیم داد:

چه اتفاقی رخ داد؟

ما تابع مربوط به Ajax جی کوئری را فراخوانی کردیم و در حال ارسال تعدادی پارامتر هستیم که البته تعداد بسیار دیگری پارامتر نیز قابل ارسال خواهد بود اما موارد زیر، حداقل داده های پایه ی مورد نیاز محسوب می شوند.

type: نوع درخواست ما که در این مثال ما POST را مدنظر داریم.

url: آدرسی که قصد ارسال درخواست را به آن داریم. در این مثال ما آدرس مدنظر خود را وارد کرده ایم.

data: داده ای که قصد ارسال آن را داریم. در این مثال کوئری پارامترهایی که قبلا آن را تنظیم کرده ایم شامل جزئیات فرم را خواهیم فرستاد.

success: چه کنیم اگر بازگشت متد POST موفقیت آمیز بود. آن را کامل شرح خواهیم داد.

حال اگر بر روی دکمه ی ارسال کلیک کنید با ارور ۴۰۴ مواجه خواهید شد چرا که هنوز موارد مورد نظر در صفحه ی url را ننوشته ایم.

سمت سرور

در صفحه ای که آدرس مشخص شده در url می باشد کد ساده ی زیر را قرار دهید:

حال اگر بر روی دکمه ی ارسال کلیک کنید داده های موجود در متد POST برای شما به صورت زیر به نمایش در خواهد آمد:

 

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

چیزی که ما از صفحه ی مقصد به صفحه ی ابتدایی ارسال کردیم به خصیصه ی success می رود و ما نیز توسط دستورات مشخص شده آن را در خروجی مرورگر به نمایش می گذاریم:

انواع داده ای

قبل از اینکه جلوتر برویم اجازه بدهید نگاهی به انواع داده ای مورد استفاده بیندازیم.

هنگامی که داده ای را از PHP به جاوااسکریپت ارسال می کنیم، به عنوان رشته ارسال می شود. این موضوع ما را برای واکشی داده تا حدودی دچار مشکل خواهد کرد.

بدین منظور می بایست داده ی خود را با ساختار json ارسال کنیم که مخفف JavaScript Object Notation می باشد و یک متد ساده برای ارسال داده محسوب می شود.

کد نوشته شده را به صورت زیر تغییر دهید:

حال خروجی زیر را هنگام کلیک بر روی دکمه ی ارسال دریافت خواهید کرد:

همچنین می بایست در بخش Ajax نیز تغییراتی ایجاد کنیم:

حال ما نوع json را در خصیصه ی dataType قرار دادیم تا متوجه نوع آن بشود.

حال خروجی به صورت زیر خواهد بود:

پیاده سازی عملیات سمت سرور

حال که همه چیز آماده است باید کدهای خود در سمت سرور را کامل کنیم:

حال هنگامی که بر روی دکمه ی ارسال کلیک شود می بایست چند اتفاق رخ بدهد.

ابتدا در کنسول مرورگر پیام true دریافت می شود و همچنین ایمیلی را دریافت خواهید کرد.

خیلی ساده بود نه؟

به همین سادگی توانستیم با پر کردن یک فرم، بدون بارگذاری صفحه، ایمیلی را به آدرس مشخص شده ارسال کنیم و پیام نتیجه را نیز به کاربر نمایش دهیم.

اگر ذهن خلاقی داشته باشید هم اکنون احتمالا ایده های فراوانی برای استفاده از Ajax به ذهن شما رسیده که می توانید تمامی آن ها را در وب سایت خود پیاده کنید.

پاسخ بهتر

برای اینکه پاسخ نتیجه ی اجرا را به صورت مناسب تری به کاربر نمایش دهیم می توانیم عملیات زیر را انجام دهیم:

$.ajax({

می توانید نتیجه را خودتان بررسی کنید.

امیدوارم که از این آموزش لذت و بهره ی کافی را برده باشید.

مطالب مشابه
ارسال دیدگاه جدید
شما میتوانید نظر و پیشنهاد خود راجب سایت و مطلب را برای ما ارسال کنید.

Time limit is exhausted. Please reload CAPTCHA.

دیدگاهی ارسال نشده است!