提交表单并获得响应而无需刷新页面

时间:2018-04-09 19:49:29

标签: javascript django

我正在制作这个简单的BMR计算器应用程序问题是当我提交时我不想去任何其他页面我想在同一页面显示结果而不必去另一个页面。

在我的views.py

def bmrvalue(age, height, weight, gender):
    if gender == 'm':
        BMR = (10 * weight) + (6.25 * height) - (5 * age) + 5
    else:
        BMR = (10 * weight) + (6.25 * height) - (5 * age) - 161
    return BMR 


def MyBmr(request):
    if request.method == "POST":
        form = BmrForm(request.POST)
        if form.is_valid():
            age    = form.cleaned_data['age']
            height = form.cleaned_data['height']
            weight = form.cleaned_data['weight']
            gender = form.cleaned_data['gender']
            mybmr  = bmrvalue(age,height,weight,gender)

            return render (request, 'resultes.html', {'bmr':mybmr })
    else:
        form = BmrForm()

    return render (request, 'home.html', {'form': form})

关于如何实现这一目标的任何想法?

1 个答案:

答案 0 :(得分:1)

此处所需的前端代码(放在HTML中)通知我说除了Web套接字之外需要的其他方法就是这样做:

<script>
function calculateResultsAndPost(){
const gender = document.getElementById('gender')
const weight = document.getElementById('weight')
const height = document.getElementById('height')
const age = document.getElementById('age')
const BMR = (10 * weight ) + (6.25 * height) - (5 * age ) + gender.isChecked ? 5 : - 161
// if you really need this on the server
fetch('/my-python-api-endpoint/bmr', {
method: 'POST',
body: {body:
     {
       BMR: BMR,
       otherData: otherData,
       weight: weight,
       gender: gender.isChecked,
       age: age
     }
})

}
</script>

这里的逻辑需要转移到JavaScript,包括所有数学,似乎没有理由在这里进行服务器端交互,但是如果你需要它,那些请求需要发生而不是使用

在不使页面完全刷新的情况下将数据传递到后端的唯一方法是通过JavaScript(无论是新的WebSocket(),XMLHttpRequest()/ fetch())。如果你提交一个带有动作和方法的表单,它将刷新页面,没有if和s或buts关于这个(你可以非常hacky并将其置于iFrame中并进行iFrame刷新)。

需要后端Django代码:

urls.py     来自django.urls导入路径

from . import views

app_name = 'bmr'
urlpatterns = [
    path('/bmr', views.IndexView.as_view(), name='index'),
]

views.py。所有这些都是模糊的近似值

from django.shortcuts import get_object_or_404, render
from django.http import HttpResponseRedirect, JsonResponse
from django.urls import reverse
from django.views import generic

from .models import User


class IndexView(generic.ListView):

    def post(self, request, *args, **kwargs):
        """Accepts XMLHttpRequests"""
        user = User.create(processRequest(request.body))
        return JsonResponse(user.toJSON())
    # or more simply:
def post(self, request, *args, **kwargs):
    user = User.create(processRequest(request.body))
    return JsonResponse(user.toJSON())

来自Django文档:

  

HttpRequest.body¶原始HTTP请求主体作为字节字符串。这是   用于以不同于传统HTML的方式处理数据   形式:二进制图像,XML有效负载等。用于处理常规   表单数据,使用HttpRequest.POST。

     

您还可以使用类似文件的界面从HttpRequest中读取。看到   HttpRequest.read()。