文章目录
- 1 从前端界面提取数据
- 2 传递数据到前端并显示
1 从前端界面提取数据
django将数据从前端传输到后端，前端界面需要设置以下几点：
- <form>标签中action属性应设置为该表单将传递到的url地址，method属性设置为post；
- 后端会根据name属性提取数据，因此每个输入标签的name属性应当经过考量后设置；
- 表单应该有提交按钮，且type属性设置为"submit"；
- 由于django有一定的安全验证机制，因此在form表单的最后应当设置{% csrf_token %}；
{# 前端页面表单部分 #}
<form action="/message_form/" method="post" class="smart-green"><h1>留言信息<span>请留下你的信息.</span></h1><label><span>姓名 :</span>{# 后端会根据name属性提取数据 #}<input id="name" type="text" name="name" value="{{ message.name }}" class="error" placeholder="请输入您的姓名"/><div class="error-msg"></div></label><label><span>邮箱 :</span><input id="email" type="email" value="{{ message.email }}" name="email" placeholder="请输入邮箱地址"/><div class="error-msg"></div></label><label><span>联系地址 :</span><input id="address" type="text" value="{{ message.address }}" name="address" placeholder="请输入联系地址"/><div class="error-msg"></div></label><label><span>留言 :</span><textarea id="message" name="message" placeholder="请输入你的建议">{{ message.message }}</textarea><div class="error-msg"></div></label><div class="success-msg"></div><label><span> </span><input type="submit" class="button" value="提交"/></label>{# 安全验证机制 #}{% csrf_token %}
</form>
后端接收数据时，为了使用同一个函数既处理get操作，又处理post操作，所以需要加上if判断访问该url的方式；获取数据时使用request.POST.get()函数。
# 后端逻辑部分
def message_form(request):if request.method == "POST":# 若访问该url的方式为“POST”，即提交表单时，执行以下操作message = Message()message.name = request.POST.get("name", "")message.email = request.POST.get("email", "")message.address = request.POST.get("address", "")message.message = request.POST.get("message", "")message.save()return render(request, "message_form.html")
2 传递数据到前端并显示
django将数据从后端获取并显示在前端时，每一个input标签的value显示后端数据，下面代码的{{ message.name }}是django前端模板的使用方式，意为显示后端传递的message数据对象的name属性。
{# 前端页面表单部分 #}
<form action="/message_form/" method="post" class="smart-green"><h1>留言信息<span>请留下你的信息.</span></h1><label><span>姓名 :</span>{# 后端会根据name属性提取数据,value属性接收后端传来的数据并显示 #}<input id="name" type="text" name="name" value="{{ message.name }}" class="error" placeholder="请输入您的姓名"/><div class="error-msg"></div></label><label><span>邮箱 :</span><input id="email" type="email" value="{{ message.email }}" name="email" placeholder="请输入邮箱地址"/><div class="error-msg"></div></label><label><span>联系地址 :</span><input id="address" type="text" value="{{ message.address }}" name="address" placeholder="请输入联系地址"/><div class="error-msg"></div></label><label><span>留言 :</span><textarea id="message" name="message" placeholder="请输入你的建议">{{ message.message }}</textarea><div class="error-msg"></div></label><div class="success-msg"></div><label><span> </span><input type="submit" class="button" value="提交"/></label>{# 安全验证机制 #}{% csrf_token %}
</form>
从后端传递数据到前端，一般采用字典格式，通过render()函数直接传递即可，字典的key就是前端input标签的value属性中可以引用的数据。
# 后端逻辑部分
def message_form(request):if request.method == "POST":# 若访问该url的方式为“POST”，即提交表单时，执行以下操作message = Message()message.name = request.POST.get("name", "")message.email = request.POST.get("email", "")message.address = request.POST.get("address", "")message.message = request.POST.get("message", "")message.save()return render(request, "message_form.html", {"message": message})if request.method == "GET":# 若访问该url的方式为“GET”，即正常访问网页时，执行以下操作var_dict = {}all_messages = Message.objects.all()if all_messages:message = all_messages[0]var_dict = {"message": message}# 后端数据以字典形式传递return render(request, "message_form.html", var_dict)
