Django笔记3--GET、POST请求的数据交互

The_Caibe

已于 2023-02-20 14:38:41 修改

阅读量2.7k

点赞数

分类专栏：笔记文章标签： django python

于 2021-12-15 20:24:26 首次发布

本文链接：https://blog.csdn.net/Nty268/article/details/121957750

版权

笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

通过前面的学习，创建好了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请求可以高效地发送大量的复杂的数据，这些数据是打包好且不能直观发现的

The_Caibe

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
Django笔记3--GET、POST请求的数据交互

通过前面的学习，创建好了django项目“myweb”，以及项目应用“myapp”，并通过浏览器能访问不同视图。下面为客户端浏览器通过GET、POST请求与页面数据进行交互的笔记。一、GET请求1、编写index.html页面（templates/myapp/index.html）在index.html页面中添加一个修改操作来触发GET请求：在操作列内添加一个a标签：<table width="450px" border="1"> <tr> &lt
复制链接

扫一扫