لوحة المتصدرين

لدي مشكلة بسيطة ، هو في وضع التطوير عندما أبعث request ل endpoint كل شيء تمام ولا توجد مشكلة ، ولكن في وضع production يتم ارجاع internal server error 500

كتاب جافا سكربت المتواجد في الاكادميه هل ينفع للمبتدين معا العلم توي مخلص مكتبة الجيكويري في دورة فهل ينفع قراءه اثناء اتمام الدورة اما انها كتب عميقه من الافضل قراءته بعد شروع في مشاريع كبيره وتقدم اكثر في المستوى

في مشروع django تختلف أوضاع exception حسب وضع DEBUG ، فإذا كان في الوضع True في الغالب أنك في التطوير لذلك قد يكون إقتناص الأخطاء أمر سهل وسلس ولكن في نفس الوقت قد يتم تجاهل الخطأ حسب request أما عندما يكون DEBUG في الوضع False فهذا في الأرجح أنك في وضع الإنتاج وهنا يتم التعامل مع جميع errors exceptions حتى وإن كانت data التي أرسلتها سليمة . لذلك قم بالتعامل مع جميع exceptions الممكنة .

إذا أرسل django رسالة الخطأ هذه ففي الغالب قد يكون لديك exception لم يتمّ التعامل معه، مما أدى إلى إيقاف السرفر، زوّدنا بصور الكود والخطأ لنستطيع مساعدتك بشكل أفضل.

Fetch هي واجهة برمجة تطبيقات لطلب Ajax حديثة مستندة إلى Promise ظهرت لأول مرة في عام 2015 وهي مدعومة في معظم المتصفحات. لم يتم بناؤه على XMLHttpRequest ويوفر تناسقًا أفضل مع بناء جملة أكثر إيجازًا. تعمل سلسلة Promise التالية بشكل مماثل : fetch("/url", { method: "GET" }) .then((res) => res.json()) .then((json) => console.log(json)) .catch((err) => console.error("error:", err)); أو يمكنك استخدام ascync / await : try { const res = await fetch("/url", { method: "GET" }), // انتظار الرد من سيرفر json = await res.json(); console.log(json); } catch (err) { console.error("error:", err); } AJAX هو الإسم المألوف لـ "JavaScript و XML غير المتزامنة" ، على الرغم من أن المطورين لم يحتاجوا إلى استخدام أساليب غير متزامنة أو JavaScript أو XML. نستخدم الآن المصطلح العام "Ajax" لأي عملية من جانب العميل تجلب البيانات من الخادم وتقوم بتحديث DOM دون الحاجة إلى تحديث صفحة كاملة. يتم دعم XMLHttpRequest من قبل جميع المتصفحات الرئيسية وأصبح معيارًا رسميًا للويب في عام 2006. مثال بسيط يجلب البيانات من نطاقك / الخدمة / نقطة النهاية ويعرض نتيجة JSON في وحدة التحكم كنص: const xhr = new XMLHttpRequest(); xhr.open("GET", "/service"); // عند تغير الحالة xhr.onreadystatechange = () => { // هل الإستعلام إكتمل ؟ if (xhr.readyState !== 4) return; if (xhr.status === 200) { // إكتمل بنجاح console.log(JSON.parse(xhr.responseText)); } else { // حدوث خطأ console.log("HTTP error", xhr.status, xhr.statusText); } }; // إرسال xhr.send(); أهم مميزات fetch : التحكم في cach التحكم في cors التحكم في Credential التحكم في redirect Data Streams الدعم الكلي لجانب الخادم أهم مميزات XHR: تدعم Timeout دعم Abort : يمكن إلغاء طلب أثناء الرحلة عن طريق تشغيل أسلوب إحباط XMLHttpRequest (). يمكن إرفاق معالج إحباط إذا لزم الأمر تدعم جميع المتصفحات وهذه مقالة على ajax

بعض الميزات التي توضح الفرق بين الطريقتين: من أجل fetch: لا يوجد بها طريقة مضمنة للتعامل مع الوثائق. لا توجد طريقة لكي نضع مؤقت. لا يمكن تعديل نوع المحتوى في ترويسة الاستجابة. إذا كان طول المحتوى متوافر و لكن مخفي فإنه من غير الممكن معرفة طول جسم الاستجابة. سوف تقوم باستدعاء ال handler المسؤول عن إجهاض الإشارة حتى لو أن الطلب قد تم بنجاح. لا يوجد مؤشر للتقدم في عملية رفع الملفات. من أجل XHR: لا يوجد طريقة لعدم إرسال ال cookies بشكل قياسي. لا يمكنها أن تعيد أغراض من FormData. لا تحتوي على مكافئ لنمط no-cors الموجود في fetch. دائماً تتبع إعادة التوجيه redirect.

تحتاج إلى إستخدام تقنية Ajax و هي عبارة عن وسيلة لجلب البيانات من الخادم دون الحاجة لإعادة تحميل الصفحة: اعرف أكثر عن Ajax مثال بإستخدام jQuery و لغة php: $(function() { $('#myBtn').on('click', function(){ var id= $('#myInput').val(); if(id != '') { $.ajax({ url:"fetch.php", method:"POST", data:{id:id}, dataType:"JSON", success:function(data) { console.log(data); // data is available do what u want here } }) } else { alert("Please enter a valid id"); } }); }); هنا يتم التسمع على حدث الضغط على الزر المطلوب، و معالجة الحدث بجلب ماتم إدخاله من طرف المستخدم، التحقق من الإدخال و التأكد من أنه ليس فارغ و إلا عرض رسالة تشير للمستخدم بضرورة إدخال id. إرسال طلب ajax للخادم في حالة تحقق الشرط يشمل ال id الذي تم إدخاله، معالجة الطلب في الملف fetch.php و إرجاع البيانات التي ستُصبح متاحة في حال نجاح الطلب و هو ما يتم عرضه بداخل success. ملف الخادم حسب اللغة التي تريد إستخدامها هنا في المثال نستخدم php لذلك الملف سيكون مشابه لـ: <?php //fetch.php if(isset($_POST["id"])) { $connect = mysqli_connect("localhost", "root", "", "testing"); // الإتصال بقاعدة البيانات $query = "SELECT * FROM tbl_name WHERE id = '".$_POST["id"]."'"; // بناء الإستعلام $result = mysqli_query($connect, $query); // تنفيذ الإستعلام while($row = mysqli_fetch_array($result)) // إنشاء مصفوفة حسب البيانات التي نريد إرجاعها { $data["column1"] = $row["column1"]; $data["column2"] = $row["column2"]; $data["column3"] = $row["column3"]; // ... // ... // ... } echo json_encode($data); } ?> طريقة العرض في الصفحة تعتمد عليك، يتم ذلك من خلال دالة المعالجة success حيث تستهدف العناصر في الصفحة من خلال تحديدها عن طريق المُعرف أو أي محدد ثم تحقن بداخلها البيانات التي جُلبت، بفرض أنه جلبنا الحقل name و بداخل الصفحة هناك عُنصر مثلا h3 و يحمل المُعرف nameEl فنُحدد العُنصر عن طريقه ثم بإستخدام التابع text نضع القيمة بداخله بهذا الشكل: $('#nameEl').text(data.name);

fetch تحتوي على ميزات اضافية عن XHR واهمها : تستطيع استخدام الـ Cache API مع كل من ال request و الـ response. تمكنك من طلب no-cors requests من مواقع لا تدعم الـ CORS. يمكنك ارسال response بشكل بث "Streaming responses" ليست متوفرة بعد في المتصفحات.

شكرا لك حلت المشكلة وحلها كان event.preventDefault

يمكن حل المشكلة بإضافة الخاصية dir بالقيمة auto إلى العنصر الحاول على الرسالة بعد جلبها من قاعدة البيانات، مثلًا لو كانت الرسالة تُعرض ضمن عنصر p نضيف الخاصية كالتالي: <p dir="auto"> ^^^^^^^^^^ <!-- الرسالة --> </p>