Laravel وجافا سكربت

يمكنك القيام بذلك عن طريق استخدام AJAX في Laravel، حيث يتيح لك AJAX تحميل وإرسال البيانات بطريقة ديناميكية دون الحاجة إلى إعادة تحميل الصفحة بأكملها.

وعند النقر على الزر لإضافة مدخلات، باستطاعتك استخدام جافا سكربت لإرسال طلب AJAX إلى الخادم الذي يستخدم Laravel.

وبمجرد استلام الطلب، سيقوم Laravel بجلب البيانات المطلوبة من قاعدة البيانات باستخدام controller، ومن ثم سيرسل البيانات المستلمة إلى الصفحة بشكل JSON.

وباستخدام جافا سكربت بالإمكان تحليل البيانات المستلمة من Laravel وإنشاء صف جديد للمدخلات المضافة بناءً على هذه البيانات. بعد ذلك، يمكنك استخدام الجافا سكربت لتحديث الصفحة وعرض المدخلات الجديدة.

إليك بعض الخطوات الأساسية التي يمكن اتباعها لتحقيق ذلك:

1. إنشاء زر لإضافة مدخلات وتعيين معرفًا له.
2. إنشاء ملف JavaScript للقيام بمهام إضافة المدخلات.
3. إضافة كود JavaScript الذي يستخدم AJAX لإرسال طلب إلى controller في Laravel.
4. في controller Laravel، استخدمي الطريقة المناسبة لجلب البيانات من قاعدة البيانات.
5. استخدمي JSON لإرسال البيانات المطلوبة إلى ملف JavaScript.
6. في ملف JavaScript، استخدمي البيانات المستلمة لإنشاء صف جديد للمدخلات.
7. تحديث الصفحة لعرض المدخلات الجديدة.

وكنصيحة الأفضل استخدام مكتبات مثل  Axios لتسهيل استخدام AJAX وإرسال الطلبات إلى controller في Laravel.

وإليك مثال باستخدام Axios.

1- بعد تثبيت المكتبة من الأمر التالي:

npm install axios

2- سيتعين عليك إنشاء زر HTML على الصفحة الخاصة بك باستخدام معرف فريد له، وهذا الزر سيقوم بتنفيذ الطلب AJAX عند النقر عليه.

3- إنشاء ملف JavaScript جديد وتعيينه للزر HTML الخاص بك.

4- استدعِ مكتبة axios داخل ملف JavaScript الخاص بك.

import axios from 'axios';

5- استخدمي axios لإرسال الطلب AJAX إلى controller في Laravel، ويمكنك استخدام المثال التالي لإرسال طلب GET لجلب البيانات من controller:

axios.get('/get-data')
  .then(function (response) {
    // استخدم البيانات المستلمة لإنشاء صف جديد للمدخلات.
  })
  .catch(function (error) {
    console.log(error);
  });

حيث /get-data هو عنوان URL للطلب AJAX الذي يمكن تغييره بما يناسب متطلباتك.

6- في controller Laravel، استخدمي الطريقة المناسبة لجلب البيانات من قاعدة البيانات وإرجاعها كـ JSON.

public function getData()
{
    $data = // جلب البيانات من قاعدة البيانات
    return response()->json($data);
}

 عند استلام البيانات من controller، يمكنك استخدامها داخل دالة .then() للتحكم في عرض الصفحة وإضافة المدخلات الجديدة.

7- تحديث الصفحة لعرض المدخلات الجديدة، ويمكن استخدام Vue أو React لإنشاء تطبيق أكثر ديناميكية.