ربط الداتابيس مع جافاسكربت عن طريق flask python

بتاريخ 19 دقائق مضت قال زمزم بنت يوسف:

ما هي المشكلة؟

اعتقد ان المشكلة لديكى فى جزء الحفظ فى قاعدة البيانات فلقد قمتى بالخطأ فى ترتيب ادخال البيانات .

cur.execute("INSERT INTO products (ProductName, ExpiryDate, Ingredient) VALUES (%s, %s, %s)", (product_name, ingredient, date_value))

لاحظى انكى يجب ادخال اسم المنتج ثم تاريخ الانتهاء ثم المكونات . ولكنى قد قمتى بالتبديل بين التاريخ والمكونات.

لذلك استبدلى السطر لديكى بهذا السطر .

        cur.execute("INSERT INTO products (ProductName, ExpiryDate, Ingredient) VALUES (%s, %s, %s)", (product_name,date_value ,ingredient))

واذا لم يحل المشكلة فاعقتد ان المشكلة لديكى فى قاعدة البيانات وللتاكد اكثر يجب ارسال رسالة الخطأ التى تظهر فى منفذ الاوامر لديكى 

وعليكم السلام ورحمة الله وبركاته .

ان ال HTTP response status code 500 تعنى انه يوجد خطأ فى الخادم اى انه حدث مشكلة لديك فى تنفيذ الكود على الخادم .

لذلك تاكد من ارسال البيانات بشكل صحيح و ان تكون الشيفرة الخاصة بحفظ البيانات صحيحة . 

واذا ما زالت المشكلة موجوده فيجب توفير الكود الخاص بحفظ البيانات لنرى اين توجد المشكلة ونستطيع ان نساعدك

هناك مشكلة بالخادم الخاص بـ flask بسبب خطأ 500، هل يظهر خطأ معين في التيرمنال (منفذ الأوامر) الخاص بالخادم؟

وهل الخادم يعمل بشكل صحيح؟ أي قبل إرسال البيانات هل يظهر خطأ معين أم يعمل بشكل سليم؟

أيضًا تأكدي من استيراد مكتبات Flask الصحيحة:

from flask import Flask, request, jsonify

وتعريف نقطة النهاية POST:

@app.route("/save_data", methods=["POST"])
def save_data():
    # ...

ثم تحليل بيانات JSON من طلب POST:

data = request.get_json()

ثم التفاعل مع قاعدة البيانات لحفظ البيانات وإرجاع استجابة مناسبة:

return jsonify({"message": "Data saved successfully"})

وتأكدي من أنكِ ترسلين طلب POST بدلاً من طلب GET.

بتاريخ 14 دقائق مضت قال Mustafa Suleiman:

هناك مشكلة بالخادم الخاص بـ flask بسبب خطأ 500، هل يظهر خطأ معين في التيرمنال (منفذ الأوامر) الخاص بالخادم؟

وهل الخادم يعمل بشكل صحيح؟ أي قبل إرسال البيانات هل يظهر خطأ معين أم يعمل بشكل سليم؟

أيضًا تأكدي من استيراد مكتبات Flask الصحيحة:

from flask import Flask, request, jsonify

وتعريف نقطة النهاية POST:

@app.route("/save_data", methods=["POST"])
def save_data():
    # ...

ثم تحليل بيانات JSON من طلب POST:

data = request.get_json()

ثم التفاعل مع قاعدة البيانات لحفظ البيانات وإرجاع استجابة مناسبة:

return jsonify({"message": "Data saved successfully"})

وتأكدي من أنكِ ترسلين طلب POST بدلاً من طلب GET.

عملت هذه الخطوات
هذا الكود للبايثون:

@app.route('/save_data', methods=['POST'])
def save_data():
    try:
        data = request.get_json()
        product_name = data['productName']
        ingredient = data['ingredient']
        date_value = data['date']

        cur = mysql.connection.cursor()
        cur.execute("INSERT INTO products (ProductName, ExpiryDate, Ingredient) VALUES (%s, %s, %s)", (product_name, ingredient, date_value))
        mysql.connection.commit()
        cur.close()
        return jsonify({"message": "Data saved successfully"}), 200
    except Exception as e:
        print("Exception:", e)
        return jsonify({"error": str(e)}), 500

وهذا الكود للجافاسكربت:

async function confirmSave() {

    if (confirm("Are you sure you want to save the data?")) {

        const productName = prompt("Please enter the name of the product:");

        if (productName !== null && productName.trim() !== "") {

            await saveData(productName);

        } else {

            alert("Product name cannot be empty.");

        }

    }

}



async function saveData(productName) {

    const containers = document.querySelectorAll('.container');

    let ingredient = '';

    let date = '';

    let algrency = '';



    containers.forEach((container, index) => {

        const textBox = container.querySelector('.text-box');

        const value = textBox.value.trim();

        switch(index) {

            case 0:

                ingredient = value;

                break;

            case 1:

                date = value;

                break;

            case 2:

                algrency = value;

                break;

        }

    });

    // Prepare data to send

    const postData = {

        productName: productName,

        ingredient: ingredient,

        date: date,

    };



    try {

        const response = await fetch('/save_data', {

            method: 'POST',

            headers: {

                'Content-Type': 'application/json'

            },

            body: JSON.stringify(postData)

        });



        if (!response.ok) {

            throw new Error('Network response was not ok');

        }



        const responseData = await response.json();

        console.log(responseData.message); // Log the response message

    } catch (error) {

        console.error('Error:', error);

    }



    console.log("Product Name:", productName);

    console.log("Ingredient:", ingredient);

    console.log("date:", date);

    console.log("Algrency:", algrency);

}

ما هي المشكلة؟

بتاريخ 13 دقائق مضت قال محمد_عاطف:

اعتقد ان المشكلة لديكى فى جزء الحفظ فى قاعدة البيانات فلقد قمتى بالخطأ فى ترتيب ادخال البيانات .

cur.execute("INSERT INTO products (ProductName, ExpiryDate, Ingredient) VALUES (%s, %s, %s)", (product_name, ingredient, date_value))

لاحظى انكى يجب ادخال اسم المنتج ثم تاريخ الانتهاء ثم المكونات . ولكنى قد قمتى بالتبديل بين التاريخ والمكونات.

لذلك استبدلى السطر لديكى بهذا السطر .

        cur.execute("INSERT INTO products (ProductName, ExpiryDate, Ingredient) VALUES (%s, %s, %s)", (product_name,date_value ,ingredient))

واذا لم يحل المشكلة فاعقتد ان المشكلة لديكى فى قاعدة البيانات وللتاكد اكثر يجب ارسال رسالة الخطأ التى تظهر فى منفذ الاوامر لديكى 

أيوا صح، شكرا جزاك الله خيرا