ارسال فرم AJAX با AngularJS

ارسال فرم AJAX با AngularJS

[fa type=”download”] دانلود 


 

 

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

توجه داشته باشید که این پست از وب سایت scotch.io ترجمه شده است، و سعی شده است که نوشته های نویسنده به درستی ترجمه شود.

امروز قصد داریم به فرم ساده ای که از PHP برای ارسال و تبدیل آن به Angular استفاده می شود نگاهی بیندازیم. استفاده از Angular برای فرم ها (forms) یکی از لحظات جذاب برای من بود.

ما نگاهی به پردازش یک فرم با just plain jQuery می اندازیم. کار مورد نیاز در درجه اول برای این کار جاوا اسکریپت خواهد بود. ما فرم را ارسال خواهیم کرد، خطاها را نمایش می دهیم، کلاس های خطا را اظافه می کنیم و پیام را در جاوا اسکریپت مخفی و نمایش می دهیم.

بعد از آن، از Anuglar استفاده می کنیم. بخش عمده ای از کار که قبلا لازم بود کنار گذاشته می شود و تعداد زیادی از چیزها قبلا انجام می دادیم (نمایش خطاها، اظافه کردن کلاس ها، مخفی و نمایش پیام ها) بسیار ساده خواهد شد. بیایید کار را شروع کنیم.

 

نمونه فرم ما

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

  • روش قدیمی: فرم AJAX با jQuery و PHP
  • روش جدید: فرم AJAX با AngularJS و PHP

بیایید نگاهی به فرمی که خواهیم ساخت نگاهی بیندازیم.

submitting-forms-with-angular

 

 

الزامات فرم

  • پردازش فرم بدون تازه سازی (refresh) صفحه
  • وارد کردن نام و نام مستعار
  • نمایش خطاها اگر وجود داشته باشد
  • روشن کردن ورودی ها با رنگ قرمز اگر خطایی رخ دهد
  • نمایش پیغام موفقیت، اگر همه چیز به درستی انجام شود

ساختار فایل ها

ما فقط به دو فایل برای نمایش دادن نیاز داریم.

  • index.html
  • process.php

 

پردازش فرم

بیایید برای پردازش فرم ما، پی اچ پی را راه اندازی کنیم. این کار بسیار سبک خواهد بود و از POST برای دریافت داده استفاده می کنیم.

 

پردازی فرم: این برای ما مهم نخواهد بود. می توانید از دیگر زبان ها برنامه نویسی هم برای پردازی فرم خود استفاده کنید.

 

این اسکریپت پردازش فرم بسیار ساده است. ما فقط بررسی می کنیم که آیا داده ای وجود دارد یا نه. اگر وجود داشت،کاری را انجام نده. ولی اگر وجود نداشت، یک پیام خطا به آرایه ی errors$ اضافه کن. برای بازگشت اطلاعات ما به یک فراخوانی AJAX، ما echo و json_encode می کنیم. این تمام چیزی است که با PHP باید برای پردازش فرم خود استفاده کنیم. این هم برای jQuery AJAX یا Angular استفاده خواهد شد.

 

نمایش فرم

بیایید فرم خود را برای نمایش با HTML درست کنیم.

 

حال فرم خود را ایجاد کردیم، ما همچنین از Bootstrap استفاده کرده ایم تا فرم ابتدایی بنظر نرسد. با استفاده از سینتکس Bootstrap، محلی را در زیر هر فیلد ورودی تعریف می کنیم تا پیام های خطا در آن نمایش داده شود.

submitting-forms-with-angular (1)

 

ارسال فرم با jQuery

حال بیایید فرایند ارسال فرم را jQuery انجام دهیم. ما تمام کدها را در تگ خالی <script> قرار می دهیم.

در اینجا کدهای زیادی را مشاهده می کنید. ما کدهایی داریم که متغییرها را از فرم دریافت می کنند، آن را با استفاده از AJAX به فرم ما ارسال می کنند، بررسی می کنند که آیا خطایی وجود دارد و پیام با موفقیت انجام شد را نمایش می دهند. در بالای همه آنها، هر دفعه که فرم ما ارسال شد، می خواهیم خطاهای قبلی را پاک کنیم.

حال اگر خطایی رخ دهد، خروجی بصورت زیر است:

submitting-error

یا اگر یک ارسال موفقیت آمیز وجود، خروجی بصورت زیر است:

submit-success

خــوب! حالا بیایید در همین فرم، ارسال را با استفاده از Angular انجام دهیم. به یاد داشته باشید، ما نمی خواهیم هر گونه تغییری در رابطه با پردازش PHP و توابعی که وظیفه ی نمایش پیام ها موفقیت و خطاها را انجام می دهند را اعمال کنیم.

 

ارسال فرم با Angular 

حال می خواهیم برنامه Angular را درست بعد از تگ <script> که قبلا از آن استفاده کرده ایم را، راه اندازی کنیم. بنابراین فقط تمام چیزهای درون آن را پاک کنید تا روش جدید را شروع کنیم.

 

راه اندازی یک برنامه Angular

مراحل راه اندازی برنامه با AngularJS بصورت زیر است:

  1. بارگذاری angular
  2. تنظیم یک ماژول
  3. تنظیم کنترل کننده (controller)
  4. درخواست ماژول و کنترلر در HTML
  5. تنظیم متغییرها دو طرفه محدود
  6. تنظیم خطاها و پیام ها

 

شاید زیاد به نظر برسد، اما در آخر، ما از کدها به مراتب کمتر استفاده خواهیم کرد و بسیار هم واضح خواهد بود. همچنین برای فرم های بزرگتر با هر تعداد ورودی آسان خواهد بود.

 

ماژول ها و کنترلرها Angular

بیایید Angular را راه اندازی کنیم و ماژول و کنترلر خود را ایجاد کنیم.

ما حالا پایه و اساس برنامه Angular خود را داریم. ما Angular را بارگذاری کردیم و یک ماژول و کنترلر را ایجاد کردیم و آن را در سایتمان اعمال کردیم.

در ادامه خواهیم دید که چطور اتصال دو طرفه کار می کند.

 

اتصال دو طرفه دادها

این یکی از ایده های اصلی Angular و یکی از قویترین آنهاست. در مستندات Angular: اتصال به پایگاه داده در برنامه های وب، بین داده ها و model و view بصورت خودکار هماهنگ سازی می شود. به این معنی که در مرحله ای که ما باید اطلاعات را از فرم با استفاده از ()input[name=name]').val')$ دریافت کنیم مورد نیاز نمی باشد.

ما اطلاعات را به یک متغییر اتصال می دهیم، و هر زمان که در جاوا اسکریپت یا view تغییر کرد، آن را در هر دو تغییر دهد.

برای نشان دادن اتصال به پایگاه داده، ما ورودی های فرم بطور خودکار در یک متغییر formData پر می کنیم. بیایید نگاهی به کنترلر Angular بیندازیم که در صفحه اعمال کردیم. ما به scope$ و http$ انتقال داده ایم.

scope$: چسب بین کنترلر برنامه و view است. در واقع متغیرها با استفاده از scope$ به controller و view انتقال می یابد. برای تعریف دقیق تر، مستندات را مطالعه کنید.

http$: خدمات Angular می باشد که کمک می کند به درخواست POST ما. برای اطلاعات بیشتر مستندات را مطالعه کنید.

 

گرفتن متغییرها با استفاده از اتصال به پایگاه داده

بسیار خوب! به اندازه کافی بحث کردیم. بیایید این اطلاعات را در فرم خود اعمال کنیم. این روش با کارهایی که در بالا انجام دادیم راحت تر است. ما یک خطی را برای controller و یک خط برای view اضافه می کنیم.

حال ما شی formData را تنظیم کرده ایم. بیایید آن را با ورودی های فرممان پر کنیم، قبل از این که به صراحت هر فیلد را فراخوانی کنیم. ما از یک ng-modal برای اتصال یک ورودی خاص به یک متغییر استفاده خواهیم کرد.

حال، Angular می داند که هر ورودی در formData محدود شده است. همانطور که در حال تایپ هر ورودی هستید، مشاهده می کنید که شی formData شروع به پر شدن می کند. جالب نیست؟

 

پردازش فرم

در فرم قدیمی،ما مجبور به استفاده از jQuery برای ارسال فرممان با استفاده از ()form').submit')$ بودیم. حال ما از قابلیت Angular بنام ng-submit استفاده می کنیم. برای این کار، ما یک تابع کنترلر برای پردازش فرم ایجاد می کنیم، و به فرممان می گویم که از آن تابع کنترلر استفاده کند.

حال فرم ما می داند که برای استفاده از تابع controller باید ابتدا فرم ارسال شود. حال که آن را در جایش قرار دادیم، بیایید فرم را با http$ پردازش کنیم.

سینتکس پردازش فرم خیلی شبیه به روش اصلی است که انجام دادیم. مزیبت این کار این است که، لازم نیست بطور دستی داده ها را دریافت کنیم، یا تزریق کنیم، مخفی کنیم، یا کلاسی اظافه کنیم که خطاها و پیام ها را نمایش دهد.

این برای فرم ماست! هیچ کدام از آنها کلاسی را اظافه یا حذف نمی کنند. ما نیازی نداریم که هر بار فرم را ارسال می کنیم مجبور شویم خطاها را پاک کنیم. ما فقط باید به متغیرها متصل شویم و view بقیه کارها را انجام می دهد. این فوق العاده است که controller برای داده هاست و view برای نمایش آنهاست.

jQuery POST در مقابل Angular POST بعضی مواقع شاید متوجه می شوید که POST شما داده ها را در سرور نمایش نمی دهد. این بخاطر این است که راه و روش jQuery و Angular در مرتب و ارسال داده ها متفاوت است. این از زبان برنامه نویسی سرور می آید و توانایی آن درک داده های Angular است.

کد بالا برای سرور PHP است و jQuery نیاز به تابع param.$ دارد.البته راه هایی برای انجام این کار بدون jQuery وجود دارد ولی این تنها دلیلی است که از jQuery در این مثال استفاده شده است، و فقط بخاطر راحتی آن است.

 

پاک کننده سینتکس

این مثال داده ها را به عنوان رشته ارسال می کند و header های شما را تنظیم می کند. اگر شما نیازی به انجام این نوع از کارها ندارید، و تنها تمیزترین http POST$ ممکن را می خواهید داشته باشید، پس از روش خلاصه نویسی استفاده می کنیم:

قطعا واضح و بسیار ساده تر از روش بالا است.

 

نمایش خطاها و پیام ها در View

ما از دستور دهنده ی ng-show و ng-class برای رسیدگی به view استفاده می کنیم. استفاده از براکت های دوتایی باعث می شود متغیرها ما در هر جایی که می خواهیم نمایش داده شوند.

ng-show: عنصری را بر اساس اینکه اگر متغیر وجود دارد نمایش یا مخفی می کند. مستندات

ng-class: کلاسی را بر اساس اینکه اگر متغیر وجود دارد اضافه یا مخفی می کند. مستندات

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

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