این آموزش برای شما توضیح می دهد ، چگونه می توانید داده های فرم را روی کنترلر با استفاده از درخواست 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() ریست کردیم.
