frontend2_s9_part2_fe_d48_form
frontend2_s9_part2_d48_form
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': ['这里可以写默认初始值']}>
同时项目目录中出现上传的文件
