كيف جلب قيمة من context في django مع Ajax؟

Abdulazeez Altamimi · 9 أغسطس 2022

لقد قمت بمنع الصفحة من التحديث عند ارسال form بوسطة Ajax

لكن بعض القيم في context لم تتغير لان الصفحة لم تقم بالتحديث

هل من طريقة لكي اجلب قيم موجودة في context وعرضها في html دون تحديث الصفحة؟

Haroun Taha · 9 أغسطس 2022

هل أرفقت الcontext المُراد تحديثه في دالة الviews لنرى هيكلية البيانات التي تريد تحديثها في صفحة الhtml.

Abdulazeez Altamimi · 10 أغسطس 2022

بتاريخ منذ ساعة مضت قال Haroun Taha:

هل أرفقت الcontext المُراد تحديثه في دالة الviews لنرى هيكلية البيانات التي تريد تحديثها في صفحة الhtml.

اخي الكريم هذه الدالة فيها حل لمعادلات رياضية تستقبل ادخال من المستخدم لحل المعادلات... الان جميع البيانات الموجود في context تعرض في html بدون تحديث الصفحة بأستخدام Ajax .. ما عدى total و total1 لانهما لا يعتمدان على ادخال واحد من المستخدم بل تقوم بجمع الادخالات التي قام المستخدم بأدخالها ...

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

و total , total1 لا يعتمدان على form بل تعتمد على الجمع الادخالات

يعرض لي الحل في حال قمت بتحديث الصفحة فقط

def tab_1(request):
    asphalt_singles = request.POST.get('asphalt_singles')

    membrane = request.POST.get('Membrane')
    sheathing = request.POST.get('Sheathing')
    Roof_Trusses = request.POST.get('RoofTrusses')
    poly_vapour_barrier = request.POST.get('Poly_Vapour_Barrier')
    insulation = request.POST.get('Insulation')
    me = request.POST.get('meemem')
    drywall = request.POST.get('Drywweqwe')
    # Floor
    Partition_Allowance = request.POST.get('Partition_Allowance')
    Tile_Flooring = request.POST.get('Tile_Flooring')
    Sheathing1 = request.POST.get('Sheathing1')
    Floor_Joist = request.POST.get('Floor_Joist')
    ME2 = request.POST.get('MeeE2')
    Drywall_Ceiling = request.POST.get('DrywallCeiling')


    id_s = request.session["id"]

    pk = Tall_Wall_Input_db.objects.get(id=id_s)
    date = datetime.now()
    try:
        asphalt_singles1 = float(asphalt_singles) * 20.9
        pk.asphalt_singles_input = float(asphalt_singles)
        pk.date_time = date
        pk.save()
        return HttpResponse(asphalt_singles1)
    except TypeError:
        asphalt_singles1 = pk.asphalt_singles_input * 20.9
    except ValueError:
        asphalt_singles1 = pk.asphalt_singles_input * 20.9

    try:
        membrane1 = float(membrane) * 20.9
        pk.membrane_input = float(membrane)
        pk.date_time = date
        pk.save()

        return HttpResponse(membrane1)
    except TypeError:
        membrane1 = pk.membrane_input * 20.9
    except ValueError:
        membrane1 = pk.membrane_input * 20.9
    try:
        pk.sheathing_input = float(sheathing)
        pk.date_time = date
        pk.save()
    except TypeError:
        sheathingw1 = pk.sheathing_input
    except ValueError:
        sheathingw1 = pk.sheathing_input
    try:
        roof_trusses1 = float(Roof_Trusses) * 20.9
        pk.roof_trusses_input = float(Roof_Trusses)
        pk.date_time = date
        pk.save()
        return HttpResponse(roof_trusses1)
    except TypeError:
        roof_trusses1 = pk.roof_trusses_input * 20.9
    except ValueError:
        roof_trusses1 = pk.roof_trusses_input * 20.9
    try:
        poly_vapour_barrier1 = float(poly_vapour_barrier) * 20.9
        pk.poly_vapour_barrier_input = float(poly_vapour_barrier)
        pk.date_time = date
        pk.save()
        return HttpResponse(poly_vapour_barrier1)
    except TypeError:
        poly_vapour_barrier1 = pk.poly_vapour_barrier_input * 20.9
    except ValueError:
        poly_vapour_barrier1 = pk.poly_vapour_barrier_input * 20.9
    try:
        pk.insulation_input = float(insulation)
        print(insulation)
        pk.date_time = date
        pk.save()
    except TypeError:
        insulation1 = 3 * 8 / 12
    except ValueError:
        insulation1 = 3 * 8 / 12
    try:
        me1 = float(me) * 20.9
        pk.me_input = float(me)
        pk.date_time = date
        pk.save()
        return HttpResponse(me1)
    except TypeError:
        me1 = pk.me_input * 20.9
    except ValueError:
        me1 = pk.me_input * 20.9
    try:
        drywall1 = float(drywall) * 20.9
        pk.drywall_input = float(drywall)
        pk.date_time = date
        pk.save()
        return HttpResponse(drywall1)
    except TypeError:
        drywall1 = pk.drywall_input * 20.9
    except ValueError:
        drywall1 = pk.drywall_input * 20.9

    try:
        total = pk.asphalt_singles_input + pk.membrane_input + pk.sheathing_input + pk.roof_trusses_input + pk.poly_vapour_barrier_input + pk.insulation_input + pk.me_input + pk.drywall_input
    except TypeError:
        total = 0
    try:
        total1 = float(asphalt_singles1) + float(membrane1) + 2.08 + float(roof_trusses1) + float(
            poly_vapour_barrier1) + 2.0 + float(me1) + float(drywall1)
        pk.total1 = total1
        pk.total1 = total1
        pk.save()
    except TypeError as f:
        total1 = 0
    # input value Roof
    asphalt_singles_input_value = pk.asphalt_singles_input
    membrane_input_value = pk.membrane_input
    sheathing_input_value = pk.sheathing_input
    roof_trusses_input_value = pk.roof_trusses_input
    poly_vapour_barrier_input_value = pk.poly_vapour_barrier_input
    insulation_input_value = pk.insulation_input
    me_input_value = pk.me_input
    drywall_input_value = pk.drywall_input
    # Floor
    try:
        Partition_Allowance1 = float(Partition_Allowance) * 20.9
        pk.Partition_Allowance_input = float(Partition_Allowance)
        pk.date_time = date
        pk.save()
        return HttpResponse(Partition_Allowance1)
    except TypeError:
        Partition_Allowance1 = pk.Partition_Allowance_input * 20.9
    except ValueError:
        Partition_Allowance1 = pk.Partition_Allowance_input * 20.9
    try:
        Tile_Flooring1 = float(Tile_Flooring) * 20.9
        pk.Tile_Flooring_input = float(Tile_Flooring)
        pk.date_time = date
        pk.save()
        return HttpResponse(Tile_Flooring1)
    except TypeError:
        Tile_Flooring1 = pk.Tile_Flooring_input * 20.9
    except ValueError:
        Tile_Flooring1 = pk.Tile_Flooring_input * 20.9
    try:
        s = float(Sheathing1) * 7
        pk.Sheathing1_input = float(Sheathing1)

        pk.date_time = date
        pk.save()
    except TypeError:
        sheathing2 = pk.Sheathing1_input
    except ValueError:
        sheathing2 = pk.Sheathing1_input
    try:
        Floor_Joist1 = float(Floor_Joist) * 20.9
        pk.Floor_Joist_input = float(Floor_Joist)
        pk.date_time = date
        pk.save()
        return HttpResponse(Floor_Joist1)
    except TypeError:
        Floor_Joist1 = pk.Floor_Joist_input * 20.9
    except ValueError:
        Floor_Joist1 = pk.Floor_Joist_input * 20.9
    try:
        ME22 = float(ME2) * 20.9
        pk.ME2_input = float(ME2)
        pk.date_time = date
        pk.save()
        return HttpResponse(ME22)
    except TypeError:
        ME22 = pk.ME2_input * 20.9
    except ValueError:
        ME22 = pk.ME2_input * 20.9
    try:
        Drywall_Ceiling1 = float(Drywall_Ceiling) * 20.9
        pk.Drywall_Ceiling_input = float(Drywall_Ceiling)
        pk.date_time = date
        pk.save()
        return HttpResponse(Drywall_Ceiling1)
    except TypeError:
        Drywall_Ceiling1 = pk.Drywall_Ceiling_input * 20.9
    except ValueError:
        Drywall_Ceiling1 = pk.Drywall_Ceiling_input * 20.9
        return HttpResponse(Drywall_Ceiling1)
    try:
        Total_Roof = pk.Partition_Allowance_input + pk.Tile_Flooring_input + pk.Sheathing1_input + pk.Floor_Joist_input + pk.ME2_input + pk.Drywall_Ceiling_input
    except TypeError:
        Total_Roof = 0
    try:
        s = 40 * (0.75 / 12)
        Total_Roof1 = Partition_Allowance1 + Tile_Flooring1 + s + Floor_Joist1 + ME22 + Drywall_Ceiling1
        pk.Total_Roof1 = Total_Roof1
        pk.Total_Roof1 = Total_Roof1
        print('Total_Roof1', Total_Roof1)
    except TypeError:
        Total_Roof1 = 0
    # __________________________________________________________
    Partition_Allowance_input_value = pk.Partition_Allowance_input
    Tile_Flooring_input_value = pk.Tile_Flooring_input
    Sheathing1_input_value = pk.Sheathing1_input
    Floor_Joist_input_value = pk.Floor_Joist_input
    ME2_input_value = pk.ME2_input
    Drywall_Ceiling_input_value = pk.Drywall_Ceiling_input
    context = {
        # Roof
        'asphalt_singles1': round(asphalt_singles1, 2),
        'membrane': round(membrane1, 2),
        'sheathing': round(40 * (0.625 / 12), 2),
        'roof_trusses': round(roof_trusses1, 2),
        'poly_vapour_barrier': round(poly_vapour_barrier1, 2),
        'insulation': 3 * 8 / 12,
        'me': round(me1, 2),
        'drywall': round(drywall1, 2),
        'total': round(total, 2),
        'total1': round(total1, 2),
        # In order to keep the value entered by the user
        'asphalt_singles_input_value': round(asphalt_singles_input_value, 2),
        'membrane_input_value': round(membrane_input_value, 2),
        'sheathing_input_value': round(sheathing_input_value, 2),
        'roof_trusses_input_value': round(roof_trusses_input_value, 2),
        'poly_vapour_barrier_input_value': round(poly_vapour_barrier_input_value, 2),
        'insulation_input_value': round(insulation_input_value, 2),
        'me_input_value': round(me_input_value, 2),
        'drywall_input_value': round(drywall_input_value, 2),
        # Floor
        'Partition_Allowance1': round(Partition_Allowance1, 2),
        'Tile_Flooring1': round(Tile_Flooring1, 2),
        'Sheathing2': round(40 * (0.75 / 12), 2),
        'Floor_Joist1': round(Floor_Joist1, 2),
        'ME22': round(ME22, 2),
        'Drywall_Ceiling1': round(Drywall_Ceiling1, 2),
        'Total_Roof': round(Total_Roof, 2),
        'Total_Roof12': round(Total_Roof1, 2),
        # In order to keep the value entered by the user
        'Partition_Allowance_input_value': Partition_Allowance_input_value,
        'Tile_Flooring_input_value': Tile_Flooring_input_value,
        'Sheathing1_input_value': Sheathing1_input_value,
        'Floor_Joist_input_value': Floor_Joist_input_value,
        'ME2_input_value': ME2_input_value,
        'Drywall_Ceiling_input_value': Drywall_Ceiling_input_value,
    }


    return render(request, 'db_math/tab1.html', context)

Haroun Taha · 10 أغسطس 2022

عند إستخدام Ajax request الدالة سوف تقوم بإرجاع Json Responce لعرض البيانات في صفحة الHtml ستقوم بإستدعاء :

from django.http import JsonResponse

عند الإنتهاء من تنفيذ الدالة tab_1 سنقم بإرجاع الcontext :

def tab_1(request):
  	...
    return JsonResponse({'data':context})

في ميثود الAjax داخل ال html :

$.ajax({
  url:'{% url 'your_url_to_function_tab_1' %}',
  type:'POST',
  data:{
  	//التي سوف تقوم بإرسالها  form البيانات من ال
	...
  },success:function(context){
	// سوف نقوم بطباعة البيانات context سوف تستقبل البيانات في الوسيط 
         let total = context.total
         console.log(total)
  },error:function(){
     	alert('No Completed')
  }
})

Abdulazeez Altamimi · 10 أغسطس 2022

بتاريخ 11 ساعات قال Haroun Taha:
عند إستخدام Ajax request الدالة سوف تقوم بإرجاع Json Responce لعرض البيانات في صفحة الHtml ستقوم بإستدعاء :
from django.http import JsonResponse
عند الإنتهاء من تنفيذ الدالة tab_1 سنقم بإرجاع الcontext :
def tab_1(request):
  	...
    return JsonResponse({'data':context})
في ميثود الAjax داخل ال html :
$.ajax({
  url:'{% url 'your_url_to_function_tab_1' %}',
  type:'POST',
  data:{
  	//التي سوف تقوم بإرسالها  form البيانات من ال
	...
  },success:function(context){
	// سوف نقوم بطباعة البيانات context سوف تستقبل البيانات في الوسيط 
         let total = context.total
         console.log(total)
  },error:function(){
     	alert('No Completed')
  }
})

شكرا لك اخي هارون تم الامر

لكن عندما ادخل قيمة في input و الضغط على زر Enter تظهر لي البيانات على شكل json

هل من طريقة لمنعها من الظهور ؟

تم التعديل في 10 أغسطس 2022 بواسطة Abdulazeez Altamimi

Haroun Taha · 11 أغسطس 2022

العفو منك ,

تأكد من عدم وجود دالة طباعة ()print داخل دالة (request)tab_1 لأنه بمجرد ظهرت البيانات على شكل json في سطر الأوامر هذا يدل أنه تم طباعة الكائن Json.

Abdulazeez Altamimi · 11 أغسطس 2022

بتاريخ 8 ساعات قال Haroun Taha:

العفو منك ,

تأكد من عدم وجود دالة طباعة ()print داخل دالة (request)tab_1 لأنه بمجرد ظهرت البيانات على شكل json في سطر الأوامر هذا يدل أنه تم طباعة الكائن Json.

اخي الكريم هذه تظهر في المتصفح وليس في سطر الاوامر

عند الضغط على enter في المتصفح يحولني الى هذه الصفحة

Wael Aljamal · 11 أغسطس 2022

بتاريخ 29 دقائق مضت قال Abdulazeez Altamimi:

اخي الكريم هذه تظهر في المتصفح وليس في سطر الاوامر

عند الضغط على enter في المتصفح يحولني الى هذه الصفحة

إذا يكون سببها console.log في شيفرة جافاسكربت

بتاريخ 23 ساعات قال Abdulazeez Altamimi:

console.log(total)

Abdulazeez Altamimi · 12 أغسطس 2022

بتاريخ On 12‏/8‏/2022 at 01:03 قال Wael Aljamal:

إذا يكون سببها console.log في شيفرة جافاسكربت

اخي وائل قمت بحذف جميع console.log من الجافاسكربت لكن المشكلة لم تنحل

هل هذه سبب المشكلة؟

if request.method == 'POST':
        return JsonResponse({'data': context})
elif request.method == 'GET':
        return render(request, 'db_math/tab1.html', context)

Wael Aljamal · 12 أغسطس 2022

بتاريخ الآن قال Abdulazeez Altamimi:

return JsonResponse({'data': context})

نعم، هذا يعيد رد عبارة عن بيانات فقط، إن لم تطلبه بشكل AJAX و تستقبله و تحشره في الصفحة (ضمن success في جيكويري مثلاً)، سيتم عرضه كنص فقط أي بدون HTML

Abdulazeez Altameemi · 13 أغسطس 2022

بتاريخ 15 ساعات قال Wael Aljamal:

نعم، هذا يعيد رد عبارة عن بيانات فقط، إن لم تطلبه بشكل AJAX و تستقبله و تحشره في الصفحة (ضمن success في جيكويري مثلاً)، سيتم عرضه كنص فقط أي بدون HTML

طيب اخي وائل كيف ممكن ان امنعه من ظهور البيانات على شكل json عند الضغط على enter في الادخال

Wael Aljamal · 13 أغسطس 2022

بتاريخ 11 ساعات قال Zx Zx2:

طيب اخي وائل كيف ممكن ان امنعه من ظهور البيانات على شكل json عند الضغط على enter في الادخال

لاحظ أن route يمكن عمله على شكلين، نخصص مجموعة مسارات تعيد json تكون لها بادئة باسم api مثلا

api/users

تعيد مصفوفة json بالمستخدمين، أما المسار

users

تعيد صفحة HTML فيها المستخدمين..

يمكن تطبيق الفكرة هذه،

و يمكن إرسال باراميتر مع الطلبية مثلا،

users?format=json

نفحصها في المتحكم و نقرر هل نعيد json أم html

Abdulazeez Altameemi · 14 أغسطس 2022

بتاريخ On 13‏/8‏/2022 at 17:03 قال Wael Aljamal:
لاحظ أن route يمكن عمله على شكلين، نخصص مجموعة مسارات تعيد json تكون لها بادئة باسم api مثلا
api/users 
تعيد مصفوفة json بالمستخدمين، أما المسار
users 
تعيد صفحة HTML فيها المستخدمين..

يمكن تطبيق الفكرة هذه،

و يمكن إرسال باراميتر مع الطلبية مثلا،
users?format=json
نفحصها في المتحكم و نقرر هل نعيد json أم html

عذرا اخي الكريم

لم افهم عليك جيداً

Wael Aljamal · 14 أغسطس 2022

بتاريخ 38 دقائق مضت قال Zx Zx2:

عذرا اخي الكريم

لم افهم عليك جيداً

حاول البحث عن restfull api أو web api

Abdulazeez Altamimi · 20 أغسطس 2022

بتاريخ On 15‏/8‏/2022 at 00:45 قال Zx Zx2:
و يمكن إرسال باراميتر مع الطلبية مثلا،
users?format=json
نفحصها في المتحكم و نقرر هل نعيد json أم html

اخي الكريم كيف يمكنني ان اطبق هذه الفكرة ؟

Wael Aljamal · 20 أغسطس 2022

بتاريخ 13 دقائق مضت قال Abdulazeez Altamimi:

اخي الكريم كيف يمكنني ان اطبق هذه الفكرة ؟

عند إرسال طلبية للخادم، تمرر في نهاية الرابط format=json أي أنك تريد إعادة JSON

domain.com/api/users?format=json

ثم نستخلص القيمة من Query String نم الطلبية

if request.method == 'POST':
  if request.query_params.get('json', None) == 'json'
    	return JsonResponse({'data': context})
  else
    	return render(request, 'db_math/tab1.html', context)

Abdulazeez Altamimi · 20 أغسطس 2022

بتاريخ 22 دقائق مضت قال Wael Aljamal:

domain.com/api/users?format=json

هل اضع باراميتر في الدالة على الشكل التالي

def tab_1(request, format)

و اقم بأنشاء مسارين الاول للhtml و الثاني للjson

path('dead-load/<str:json>', views.tab_1, name='tab1')

path('dead-load/<str:html>', views.tab_1, name='tab1')

ام يجب الاعتماد على restfull api

Wael Aljamal · 20 أغسطس 2022

بتاريخ 5 دقائق مضت قال Abdulazeez Altamimi:

هل اضع باراميتر في الدالة على الشكل التالي

نعم ممكن،

بتاريخ 5 دقائق مضت قال Abdulazeez Altamimi:

ام يجب الاعتماد على restfull api

restfull api حسب المشروع، إن كان كبير و يوجد العديد من المسارات التي تعيد بيانات JSON من الأفضل فصله.

أما في حال عدد حاالت قليل، يمكن عمل الخطوة السابقة

كيف جلب قيمة من context في django مع Ajax؟

السؤال

Abdulazeez Altamimi

17 أجوبة على هذا السؤال

Recommended Posts

Haroun Taha

Abdulazeez Altamimi

Haroun Taha

Abdulazeez Altamimi

Haroun Taha

Abdulazeez Altamimi

Wael Aljamal

Abdulazeez Altamimi

Wael Aljamal

Abdulazeez Altameemi

Wael Aljamal

Abdulazeez Altameemi

Wael Aljamal

Abdulazeez Altamimi

Wael Aljamal

Abdulazeez Altamimi

Wael Aljamal

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية