Django + jQuery+ ajax 三角形测试计算的动态显示(及部分讲解)

项目功能: 输入三个边长,可实时得到结果,查看是否为三角形。
首页:
Django + jQuery+ ajax 三角形测试计算的动态显示(及部分讲解)
HTML代码:
这里我用的div,from的坑有点多,{% csrf_token %} 是必须要写的,不写会报错

<div style="padding-left: 190px;padding: 3em 5em;background: #F2F2F2;">
      	 	{% csrf_token %}
		   <li class="form_li">
		       <input type="text" placeholder="边长1" name="side1" class="side1"><br><br>
		   </li>
		   <li class="form_li">
		       <input type="text" placeholder="边长2" name="side2" class="side2"><br><br>
		   </li>
		   <li class="form_li">
		       <input type="text" placeholder="边长3" name="side3" class="side3"><br><br>
		   </li>
</div>
<div id="results" class="form_li">
		<input type="text" placeholder="测试结果" name="name4" class="results" style="color: black;"
         	disabled="disabled"><br><br>
</div>

jQuery+ajax部分:(可复制粘贴部分)
$(document).ready(function () {
function refresh() { 这里写ajax要执行的部分 }

<script>
    $(document).ready(function () {
        function refresh() {
            $.ajax({
                url: 'http://127.0.0.1:8000/triangle/result_test/',
                type: 'GET',
                data: {
                    'side1': $('.side1').val(),
                    'side2': $('.side2').val(),
                    'side3': $('.side3').val(),
                },
                success: function (context) {
                    $('.results').val(context)
                }
            })
        }
        setInterval(refresh, 1000)  #动态刷新设置
    })

</script>

views.py部分:(可复制粘贴部分)
result函数是个计算过程代码,triangles和result_test是views主体

def triangles(request):
    return render(request,'index.html',{})

def result_test(request):
    info = request.GET
    side1,side2,side3 = info['side1'],info['side2'],info['side3']
    context = {'result2':result(int(side1),int(side2),int(side3))}
    print(context)
    return HttpResponse(context['result2'])

def result(a=0,b=0,c=0):
    a1, a3 = min(a, b, c), max(a, b, c)
    a2 = sum([a, b, c]) - a1 - a3
    if a1+a2 <= a3:
        return '{}+{}的和必须要大于{}哦!'.format(a1,a2,a3)
    elif a3-a2 >= a1:
        return '{}+{}的差值必须要小于{}哦!'.format(a3,a2,a1)
    elif a==b and b==c and a==c:
        return '确认成功,这是个等边三角形!'
    elif a==b or b==c or a == c:
        # print(a**2,b**2,c**2)
        if a**2+b**2 == c**2 or b**2+c**2 == a**2 or a**2+c**2 == b**2:
            return '确认成功,这是个等腰直角三角形!'
        return '确认成功,这是个等腰三角形!'
    else:
        # print( a1 ** 2 , a2 ** 2 ,a3 ** 2)
        if a1 ** 2 + a2 ** 2 == a3 ** 2:
            return '确认成功,这是个直角三角形!'
        return '确认成功,这是个毫无特点的三角形!'

urls.py:(可复制粘贴部分)

from django.urls import path
from . import views

urlpatterns = [
    path('/', views.triangles),
    path('/result_test/',views.result_test,name='result_test'),
]

结果:
Django + jQuery+ ajax 三角形测试计算的动态显示(及部分讲解)