frontend2_s9_part2_fe_d48_form

frontend2_s9_part2_d48_form

• fe1_s9_part2_d47
• s9_part2_fe_d48_form
  • form提交表单
  • django后端示例

fe1_s9_part2_d47

pycharm小技巧：
输入
li*4>a>{$}
按tab键自动补全可以看到多个列表自动生成

返回顶部

s9_part2_fe_d48_form

form提交表单

<form method="post" action="http://127.0.0.1:8000" enctype="multipart/form-data">
    <p>
        <lable for="u_text">username:</lable>
        <input type="text" name="username" placeholder='请输入用户名'>
        <!--value设置默认值，placeholder设置占位内容-->
    </p>
    <p>
        <lable for="p_text">username:</lable>
        <input type="password" id="p_text" name="password">
    </p>
    <!-- 单选框 -->
    <p>
        <lable for="gender1">男</lable> <!--这是一种label写法,另一种写法是用lable包起来-->
        <input id="gender1" type="radio" name="gender" value="0">
        <lable for="gender2">女</lable>
        <input id="gender2" type="radio" name="gender" value="1">
        <lable for="gender3">保密</lable>
        <input id=gneder3 type="radio" checked name="gender" value="2">
    </p>
    <!-- 复选框 -->
    <p>爱好：
        <input type="checkbox" name="hobby" value="basketball">篮球
        <input type="checkbox" name="hobby" value="football">足球
        <input type="checkbox" name="hobby" value="badminton">羽毛球
    </p>
    <!--日期-->
    <p>birthday
        <input name="birthday" type="date">

    </p>
    <!-- 下拉菜单之不分组的select -->
    <p>
        <select id="s1" name="province">
            <option value="beijing">北京</option>
            <option value="sichuan">四川</option>
            <option value="shanghai">上海</option>
        </select>

    </p>
    <p>
        <!-- 下拉菜单之分组的select -->

        <select id="s2" name="city">
            <optgroup label="北京"></optgroup>
            <option value="cp">昌平</option>
            <option value="hd">海淀</option>
            <option value="cy">朝阳</option>
            <optgroup label="四川"></optgroup>
            <option value="cd">成都</option>
            <option value="ls">乐山</option>
            <option value="my">绵阳</option>
        </select>
    </p>
    <!-- textarea -->
    <p>
        <textarea name="descrition" id="" cols="30" rows="10">这里可以写默认初始值</textarea>
    </p>

    <!-- 上传文件 -->
    <p>上传头像
        <input name="img" type="file">
    </p>
    <p>
        <input type="submit">
        <!--如果需要自定义按钮显示，可以加value属性<input type="submit" value="提交XXX"> -->
    </p>
</form>

返回顶部

pycharm小技巧：如果需要用一个标签把一段代码包围，可以依次点击code -> surround with
然后选emmet,在弹出来的框中输入标签名后回车

form表单提交数据的几个注意事项:
1.所有获取用户输入的标签都必须放在form表单里
2.action控制着往哪里提交
3.提交的数据为键值对，到后端才能区分，因此所有标签都有name属性表示键
4.必须有提交按钮
5.form默认为：method="get" enctype="application/x-www-form-urlencoded"。如果有上传文件，form的method="POST" enctype="multipart/form-data"

返回顶部

django后端示例

新建一个尚未项目：django-demo

django-admin startproject django-demo

在urls.py中添加代码后，运行项目：python manage.py runserver

from django.conf.urls import url
from django.contrib import admin

from django.shortcuts import HttpResponse
def upload_data(request):
    print("request data:", request.POST)
    if request.FILES:
        filename = request.FILES["img"].name
        with open(filename,'wb') as f:
            for chunk in request.FILES["img"].chunks():
                f.write(chunk)
            return HttpResponse("image uploaded!")

    return HttpResponse("data subbmited")

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^', upload_data),
]

返回顶部
为方便演示，注释掉 settings.py 中的 django.middleware.csrf.CsrfViewMiddleware
以避免csrf错误出现

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    #'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

返回顶部

点击网页的提交后，后端控制器中打印提交内容：

{'username': ['telecomadmin'],
'password': ['fasfafd'],
'gender': ['1'],
'hobby': ['basketball', 'football'],
'birthday': ['2018-10-20'],
'province': ['beijing'],
'city': ['cp'],
'descrition': ['这里可以写默认初始值']}>

同时项目目录中出现上传的文件

返回顶部