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

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

بتاريخ منذ ساعة مضت قال 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)

عند إستخدام 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')
  }
})

بتاريخ 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

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

العفو منك , 

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

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

العفو منك , 

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

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

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

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

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

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

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

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

console.log(total)

بتاريخ 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)

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

return JsonResponse({'data': context})

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

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

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

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

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

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

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

api/users 

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

users 

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

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

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

users?format=json

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

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

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

api/users 

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

users 

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

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

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

users?format=json

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

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

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

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

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

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

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

بتاريخ On 15‏/8‏/2022 at 00:45 قال Zx Zx2:

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

users?format=json

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

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

بتاريخ 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)

بتاريخ 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 

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

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

نعم ممكن،

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

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

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

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