【Django】前后端数据交互
  TEZNKK3IfmPf 2023年11月12日 46 0

1 从前端界面提取数据

django将数据从前端传输到后端,前端界面需要设置以下几点:

  1. <form>标签中action属性应设置为该表单将传递到的url地址,method属性设置为post;
  2. 后端会根据name属性提取数据,因此每个输入标签的name属性应当经过考量后设置;
  3. 表单应该有提交按钮,且type属性设置为"submit";
  4. 由于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)
【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月12日 0

暂无评论

推荐阅读
TEZNKK3IfmPf