هل سبق لك أن احتجت إلى تحديث حقل نموذج تلقائيًا بناءً على قيمة حقل آخر؟ على سبيل المثال، تحديد دولة وجعل القائمة المنسدلة للولايات / المقاطعات تتعبئة تلقائيًا؟ في هذا البرنامج التعليمي، سنقوم بشرح كيفية تنفيذ هذه الوظيفة الشائعة باستخدام AJAX.

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

أولاً، دعونا ننشئ بنية النموذج الأساسية:

<form id="productForm">
   <div class="form-group">
       <label for="productSelect">اختر المنتج:</label>
       <select id="productSelect" name="product">
           <option value="">اختر منتج...</option>
           <option value="1">القطعة الممتازة</option>
           <option value="2">القطعة الأساسية</option>
           <option value="3">القطعة الرائعة</option>
       </select>
   </div>
   
   <div class="form-group">
       <label for="priceField">السعر:</label>
       <input type="text" id="priceField" name="price" readonly>
   </div>
</form>

هكذا سنتعامل مع التحديث باستخدام AJAX:

document.addEventListener('DOMContentLoaded', function() {
   const productSelect = document.getElementById('productSelect');
   const priceField = document.getElementById('priceField');
   
   productSelect.addEventListener('change', function() {
       const selectedProduct = this.value;
       
       if (!selectedProduct) {
           priceField.value = '';
           return;
       }
       
       // Make the AJAX request
       fetch('/api/get-price', {
           method: 'POST',
           headers: {
               'Content-Type': 'application/json',
           },
           body: JSON.stringify({
               productId: selectedProduct
           })
       })
       .then(response => response.json())
       .then(data => {
           priceField.value = data.price;
       })
       .catch(error => {
           console.error('Error fetching price:', error);
           priceField.value = 'خطأ في تحميل السعر';
       });
   });
});

هنا مثال على كيفية معالجة الخادم في PHP:

<?php
header('Content-Type: application/json');
// Get the POST data
$data = json_decode(file_get_contents('php://input'), true);
$productId = $data['productId'];
// In a real application, you would fetch this from a database
$prices = [
   1 => 99.99,
   2 => 49.99,
   3 => 149.99
];
$response = [
   'price' => isset($prices[$productId]) ? $prices[$productId] : null
];
echo json_encode($response);
?>

لقد قمنا بتنفيذ معالجة الأخطاء بشكل صحيح على جانبي العميل والخادم. يظهر حقل السعر حالات التحميل ورسائل الأخطاء عند الحاجة. النموذج لا يزال يعمل بدون JavaScript، على الرغم من أنه سيتطلب إعادة تحميل الصفحة. يتحقق الخادم من صحة معرف المنتج قبل إرجاع السعر.

عند تنفيذ هذه الميزة، يرجى مراعاة هذه النقاط الأمنية:

• تحقق دائمًا من صحة مدخلات المستخدم على جانبي العميل والخادم
• استخدم رموز CSRF لطلبات POST
• تطهير البيانات قبل عرضها للمستخدم
• تنفيذ ضوابط الوصول المناسبة على نقطة النهاية لواجهة برمجة التطبيقات

لجعل تحديثات AJAX الخاصة بك أكثر كفاءة:

• ارجع طلبات AJAX إذا كان يمكن تغيير الحقل بسرعة
• قم بتخزين الاستجابات للقيم المطلوبة بشكل متكرر
• فكر في استخدام مؤشر تحميل للاتصالات الأبطأ

الكود أعلاه يستخدم واجهة برمجة التطبيقات Fetch، التي تعمل في جميع المتصفحات الحديثة. بالنسبة للمتصفحات القديمة، قد ترغب في استخدام polyfill أو التبديل إلى XMLHttpRequest:

function makeRequest(url, data, callback) {
   const xhr = new XMLHttpRequest();
   xhr.open('POST', url, true);
   xhr.setRequestHeader('Content-Type', 'application/json');
   
   xhr.onreadystatechange = function() {
       if (xhr.readyState === 4) {
           if (xhr.status === 200) {
               callback(null, JSON.parse(xhr.responseText));
           } else {
               callback(new Error('فشل الطلب'));
           }
       }
   };
   
   xhr.send(JSON.stringify(data));
}

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

تذكر أن تختبر بشكل شامل عبر متصفحات مختلفة وظروف الشبكة، ودائمًا أولوية تجربة المستخدم عن طريق تقديم ردود فعل مناسبة أثناء حالات التحميل والخطأ.