前后台交互实例一：前台提交输入框、单选框、多选框。下拉菜单、文件 

HTML文件：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .show{
            display: block;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div style="background-color: lightskyblue;margin-right: 35%;margin-left: 35%;margin-top: 200px">
    <form action="/version/login/" method="POST" enctype="multipart/form-data">
        <p><input type="text"  name="username" placeholder="请输入用户名"></p>
        <p><input type="text"  name="password" placeholder="请输入用户名"></p>
        <p>性别选择</p>
        <p>
            男：<input type="radio" name="gender" value="1" />
            女：<input type="radio" name="gender" value="2" />
            中性：<input type="radio" name="gender" value="3" />
        </p>
        <p>爱好</p>
        <p>
            上网：<input type="checkbox" name="favor" value="11"/>
            看书：<input type="checkbox" name="favor" value="22"/>
            撩妹：<input type="checkbox" name="favor" value="33"/>
        </p>
        <p>
            <select name="city">
                <option value="sh">上海</option>
                <option value="bj">背景</option>
                <option value="tj">天机</option>
            </select>
        </p>
        <p>
            <select name="city1" multiple>
                <option value="sh">上海</option>
                <option value="bj">背景</option>
                <option value="tj">天机</option>
            </select>
        </p>
        <p><input type="file" name="fafafa" /></p>
        <p><input  id="i1" type="submit" value="提交" placeholder="请输入用户名"></p>
    </form>
        <div id="i2" >
        <p>用户名：{{ msg.0 }}</p>
        <p>密码：{{ msg.1 }}</p>
        <p>性别：{{ msg.2 }}</p>
        <p>爱好：{{ msg.3 }}</p>
        <p>城市1：{{ msg.4 }}</p>
        <p>城市2：{{ msg.5 }}</p>
        <p>文件名：{{ msg.6 }}</p>
            </div>
        </div>
<script>
    document.getElementById('i1').onclick(function () {
        document.getElementById('i2').classList.add(".show")
    })
</script>
</body>
</html>

　　

后台view代码
# -*- coding: utf-8 -*-
from __future__ import unicode_literals

from django.shortcuts import render
from django.shortcuts import redirect

# Create your views here.
def login(request):
    data=[]
    print "2222222222222222222",request.method
    if request.method == "GET":
        return render(request,"login1.html")
    elif request.method == "POST":
        u = request.POST.get('username')
        p = request.POST.get('password')
        data.append(u)
        data.append(p)
        #radio
        radio=request.POST.get('gender')
        print radio
        data.append(radio)
        favor=request.POST.getlist('favor')
        print favor
        data.append(favor)
        city = request.POST.get('city')
        print city
        data.append(city)
        city1 = request.POST.getlist('city1')
        print city1
        data.append(city1)
        obj=request.FILES.get('fafafa')
        print obj,type(obj),obj.name
        data.append(obj.name)
        import os
        file_path=os.path.join('upload',obj.name)
        f= open(file_path,mode="wb")
        for i in obj.chunks():
            f.write(i)
        f.close()
        # if u == "zq" and p =="qwe":
        #     return redirect("/index/")
        # else:
        return render(request,"login1.html",{"msg":data})
    else:
        return redirect("/index/")

　　

 

posted @ 2018-04-29 16:27  梦中琴歌  阅读(1808)  评论(0)    收藏  举报