نحوه ارسال داده های فرم با استفاده از ajax با jquery validation در لاراول 7

 این آموزش برای شما توضیح می دهد ، چگونه می توانید داده های فرم را روی کنترلر با استفاده از درخواست ajax با jquery validation سمت client در لاراول ارسال کنید.

در این آموزش لاراول می توانید فرم را با استفاده از jQuery ajax و بدون reload کل صفحه submit کنید. هنگام submit یک ajax form در لارول ،  csrf token را در ارسال درخواست اضافه می کنید.

 ارسال فرم دیتای لاراول Ajax با Validation

مراحل زیر را دنبال کنید و به راحتی داده های فرم را در laravel controller با jQuery validation ارسال کنید:

  • Install Laravel Fresh Setup
  • Configure .env file
  • Create One Model and Migration
  • Make Route
  • Generate Controller by Command
  • Create Blade View
  • Start Development Server

مرحله اول : نصب و راه اندازیLaravel 

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

composer create-project --prefer-dist laravel/laravel blog

مرحله دوم : پیکربندی فایل .env

بعد به دایرکتوری root پروژه بروید ، فایل .env را پیدا کنید و اطلاعات دیتابیس را راه اندازی کنید:


 DB_CONNECTION=mysql 
 DB_HOST=127.0.0.1 
 DB_PORT=3306 
 DB_DATABASE=here your database name here
 DB_USERNAME=here database username here
 DB_PASSWORD=here database password here

مرحله سوم : ایجاد Model و Migration

در این مرحله یک model و migration name Contact ایجاد خواهیم کرد. از دستور زیر استفاده کنید و آن را ایجاد کنید:

php artisan make:model Contact -m

در این دستور -m فایل migration ایجاد شده است.

سپس، به app/database/migrations بروید و فایل contact migration را باز کنید و کد زیر را در اینجا قرار دهید:

پس از ایجاد فایل migration و فیلدها از اجرای دستور زیر برای ایجاد جدول در Database استفاده می کنیم:

php artisan migrate

مرحله چهارم: ایجاد Route

دو route ایجاد کنید یکی برای نمایش فرم و دومی برای ارسال داده به سرور:


Route::get('ajax-form-submit', 'FormController@index');
Route::post('save-form', 'FormController@store');

مرحله پنجم: ایجاد Controller با دستور

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

php artisan make:controller FormController

مرحله بعدی ایجاد دو متد داخل کنترلر است. اولی متد index برای نمایش contact form و دومی متد store برای ذخیره داده در دیتابیس mysql است. 

مرحله ششم: ایجاد Blade View

در این مرحله یک فایل blade به نام ajax-form.blade.php ایجاد می کنیم.

دراین ajax form‌ ما یک jquery submit handler پیاده سازی خواهیم کرد. ابتدا با استفاده از jquery validation فرم را اعتبارسنجی می کنیم و دوم اینکه یک فرم ajax را با استفاده از submit handler ارسال می کنیم. 

قبل از ارسال فرم آن را اعتبارسنجی می کنیم. اعتبار سنجی مانند شماره موبایل که جز اعداد شامل هیچ کارکتر دیگری نباشد. نام آن فقط ۵۰ کارکتر باشد. ایمیل شامل آدرس معتبر و طول آن حداکثر ۵۰ کارکتر باشد. در laravel ajax متد post را با csrf token استفاده خواهیم کرد.
بعد از اینکه فرم با موفقیت ارسال شد، با متد javascript form reset فرم دیتا را ریست خواهیم کرد.

مرحله هفتم: پیاده سازی سرور

در این مرحله از دستور php artisan serve برای راه اندازی سرور لوکال استفاده خواهیم کرد:


php artisan serve
If you want to run the project diffrent port so use this below command 
php artisan serve --port=8080  

اکنون ما آماده اجرای مثال خود هستیم. دستور زیر را اجرا کنید:

http://127.0.0.1:8000/ajax-form-submit

نتیجه

در این مثال از laravel jquery ajax form submission ، ما موفق به ایجاد فرم ajax و متد ها شدیم.ajax form submits handler را پیاده سازی کردیم.فرم ارسال laravel ajax  به controller بدون reload صفحه را انجام دادیم. و فرم دیتا را با متد javascript form reset() ریست کردیم.