通过前面的学习,创建好了django项目“myweb”,以及项目应用“myapp”,并通过浏览器能访问不同视图。
下面为客户端浏览器通过GET、POST请求与页面数据进行交互的笔记。
一、GET请求:由a标签的href属性触发
1、编写index.html页面 触发GET请求
(编辑文件:templates/myapp/index.html)
在index.html页面中添加一个修改操作(a标签)来触发GET请求。
在操作列内添加一个a标签:
<table width="450px" border="1">
<tr>
<td>ID</td><td>编号</td><td>书名</td><td>价格</td><td>生产日期</td><td>操作</td>
</tr>
{% for val in book%}
<tr>
<td>{{val.id}}</td>
<td>{{val.bid}}</td>
<td>{{val.bname}}</td>
<td>{{val.bprice}}</td>
<td>{{val.bpub_time}}</td>
<td><a href="/myapp/edit/?id={{val.id}}">-修改- </a><a href="/myapp/delete/{{val.id}}">-删除- </a></td>
</tr>
{% endfor%}
</table>
a标签的href属性指向路由:/myapp/edit/?id={{val.id}},即可访问服务器路由并触发GET请求。
具体解释为:当a标签被点击时,请求访问myapp下的edit页面,并通过GET请求的方式向服务器发送当前行数据对应的id数据,当然只保留为 href=“/myapp/edit/” 也是一种常见的 不带数据的 get请求方式。
在index.html页面显示效果如下:
通过唯一的id,服务器可以返回该行的数据,并显示到前端以进行修改。
注:其中
book的数据类型为:<QuerySet [<comment: comment object>, <comment: comment object>, …]>
相当于[{‘value’: 98, ‘name’: ‘一个’}, {‘value’: 82, ‘name’: ‘我们’},…]
如果要将该数据渲染到< script >标签中,应加safe标签转为json数据: 非json–>|safe–>json
var book_lis= {{ book|safe }};
2、配置请求的路由 调用对应的处理函数
(编辑文件:myapp/urls.py)
服务器接收到请求后,通过请求的路径,进入不同路由来调用其对应操作函数。
在myapp文件中的urls.py里,添加edit路由配置:url(r’^edit’, edit):
from django.conf.urls import url
from .views import * # 引入视图
# myapp路由
urlpatterns = [
url(r'^index/', index),
url(r'^delete/(\d+)', delete),
url(r'^add', add),
url(r'^test/', test),
url(r'^edit', edit),
]
url(r’^edit’, edit),即路由访问’edit‘,调用对应的edit函数操作。
3、配置响应get请求的视图函数
(编辑文件:myapp/views.py)
GET请求根据路由进入到相应的视图函数后,视图函数会正式处理请求,包括接收请求数据、返回结果页面等。
编写路由调用的edit函数:
首先接收GET请求发送的id值,通过id值向数据库查询对应的数据,再将查询到的数据渲染到edit.html页面后 render返回到客户端。
视图views.py添加代码如下:
def edit(request):
if request.method == 'GET':
id = request.GET.get('id') # 接收GET请求传递的id
book = Books.objects.get(id=id) # 在Books表中查找该id对应的数据
return render(request, 'myapp/edit.html', {'book': book}) # render返回编辑页面
其中返回的edit.html的渲染代码内容如下:
(项目文件/templates/myapp/edit.html)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改图书信息</title>
</head>
<body>
<form action="/myapp/edit/" method="post">
<input type="hidden" name="id" value="{{book.id}}"><br>
编号:<input type="text" name="bid" value="{{book.bid}}"><br>
书名:<input type="text" name="bname" value="{{book.bname}}"><br>
价格:<input type="text" name="bprice" value="{{book.bprice}}"><br>
生产日期:<input type="text" name="bpub_time" value="{{book.bpub_time}}"><br>
<input type="submit" value="提交"><br>
</form>
</body>
</html>
这里渲染时注意,要对数据的唯一标识(主键),进行隐藏,防止胡乱修改主键造成主键冲突,
即设置input标签的type属性: type=“hidden”
最后edit函数return返回渲染数据后的edit.html页面到前端显示。
到这里,通过GET请求进行页面数据交互就完成了。
此时,客户端浏览器点击index.html页面上《西游记》的 修改按钮,页面跳转到了《西游记》对应的数据页面。
二、POST请求:由form表单实现
在修改功能中,通过GET请求获取到了要修改对象的数据,并显示到edit.html页面。
那么如果要将修改后的数据提交到数据库中,就可以使用POST请求实现。
1、编写edit.html页面 触发post请求
(编辑文件:templates/myapp/edit.html)
仍然是前面的edit.html代码,无需修改。
通过form标签来将所有input标签里的输入值以post请求的方式发送给服务器:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改图书信息</title>
</head>
<body>
<form action="/myapp/edit/" method="post">
<input type="hidden" name="id" value="{{book.id}}"><br>
编号:<input type="text" name="bid" value="{{book.bid}}"><br>
书名:<input type="text" name="bname" value="{{book.bname}}"><br>
价格:<input type="text" name="bprice" value="{{book.bprice}}"><br>
生产日期:<input type="text" name="bpub_time" value="{{book.bpub_time}}"><br>
<input type="submit" value="提交"><br>
</form>
</body>
</html>
在该页面中,用form表单包含了修改信息,并通过POST的方式向服务器下的/myapp/edit/提交了要修改的数据,
当按下form表单下的”提交“按钮(input type=“submit”)时,即可触发该POST请求。
修改input标签内的数据:
2、配置路由 调用对应的处理函数
(编辑文件:myapp/urls.py)
get请求和post请求在路由上是没有区别的,都是进入到对应视图函数,交由视图函数来区分。
所以无需再配置新的路由。
3、配置响应post请求的视图函数
(编辑文件:myapp/views.py)
当路由再次调用视图下的edit函数时,
在edit函数内,可以通过函数接收的request参数的method属性值来判断该请求的请求方式。
如果为post请求,可接收对应name的input标签里的数据,并将数据更新到数据库:
def edit(request):
if request.method == 'GET':
# GET请求
id = request.GET.get('id') # 接收GET请求传递的id
book = Books.objects.get(id=id) # 在Books表中查找该id对应的数据
return render(request, 'myapp/edit.html', {'book': book}) # render返回编辑页面
elif request.method == 'POST':
# POST请求,获取POST数据
id = request.POST.get('id') # 接收!页面隐藏!的id <input> name='id'
bid = request.POST.get('bid') # 接收 name='bid'的input标签数据
bname = request.POST.get('bname') # 接收 name='bname'的input标签数据
bprice = request.POST.get('bprice') # 接收 name='bprice'的input标签数据
bpub_time = request.POST.get('bpub_time') # 接收 name='bpub_time'的input标签数据
bpub_time = datetime.strptime(bpub_time, "%Y年%m月%d日") # 转换日期格式,传入的字符串'xx年xx月xx日'-->日期格式xx-xx-xx
# print(id,bid,bname,bprice,bpub_time)
# 通过过滤出id的方式,将POST请求的数据更新到数据表中
Books.objects.filter(id=id).update(bid=bid, bname=bname, bprice=bprice, bpub_time=bpub_time)
return HttpResponseRedirect('/myapp/index')
通过一系列操作(见注释),就可以将POST请求提交的数据更新到数据库内对应的数据表中了,
更新完成后,将客户端浏览器页面从修改页面edit.html重新定向(显示)为数据修改后的index.html页面。
点击提交修改后:
数据修改成功!
至此,POST请求交互数据完成!
总结
get请求和post请求都是基础的数据请求方式,
get请求可以很便捷地发送一些简单的数据,这些数据是可以在浏览器上直观看到的
post请求可以高效地发送大量的复杂的数据,这些数据是打包好且不能直观发现的