前端提交数据

必备知识点

前端form表单中action属性，不写默认是当前路由地址

前端form表单中的method属性，不写默认是GET请求

前端页面

templates\register.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>注册页面</title>

    <style>

        fieldset {

            width: 300px;

        }

        legend {

            text-align: center;

        }

    </style>

</head>

<body>

<form action="">

    <fieldset>

        <legend>请输入用户名以及密码</legend>

        <label for="username">账号：</label>

        <input id="username" name="username" type="text" placeholder="在此处输入用户名">

        <br>

        <label for="password">密码：</label>

        <input id="password" name="password" type="password">

        <br>

        <input type="submit" value="提交">

        </fieldset>

</form>

</body>

</html>

后端页面

# views.py

from django.shortcuts import render

def register(request):

    return render(request, 'register.html')


# views.py

from django.contrib import admin

from django.urls import path

from app import views

urlpatterns = [

    path('admin/', admin.site.urls),

    path('register/', views.register, name='register'),  # name='register' 表示别名

]

get提交

当form表单不填写method，直接提交时get方法，没有错误，后台可以拿到数据

post提交

当form表单提交方式为method=post时，报错如下

解决方案，注释掉下面这个配置

# 将settings.py文件中的配置注释掉，在后面的学习中我们会逐步的解决掉这个问题

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',

]

后端获取数据

request的属性以及方法

request.method

获取发起请求的请求方式

	一般是GET或者POST 基于表单的method方法

get请求携带的数据是由大小限制的

post请求携带的请求参数没有限制

request.POST

获取用户输入的请求数据，但不包含文件

返回的是:大写字符串

前端页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>注册页面</title>

    <style>

        fieldset {

            width: 300px;

        }

        legend {

            text-align: center;

        }

    </style>

</head>

<body>

<form action="" method="post">

    <fieldset>

        <legend>请输入用户名以及密码</legend>

        <label for="username">账号：</label>

        <input id="username" name="username" type="text" placeholder="在此处输入用户名">

        <br>

        <label for="password">密码：</label>

        <input id="password" name="password" type="password">

        <br>

        爱好：

        <input name="hobby" id="kill" type="checkbox" value="kill">

        <label for="kill">抢人头</label>

        <input name="hobby" id="fish" type="checkbox" value="fish">

        <label for="fish">摸鱼</label>

        <input name="hobby" id="cut-class" type="checkbox" value="cut-class">

        <label for="cut-class">逃课</label>

        <br>

        <input id="hobby" type="submit" value="提交">

    </fieldset>

</form>

</body>

</html>

后端页面

# register

def register(request):

    print('request.POST', request.POST)

    print('request.GET', request.GET)

    return render(request, 'register.html')

# 当以get方式提交的时候

# request.POST <QueryDict: {}>

# request.GET <QueryDict: {'username': ['小满'], 'password': ['123'], 'hobby': ['kill', 'fish', 'cut-class']}>

# 当以post方式提交的时候

# request.POST <QueryDict: {'username': ['小满'], 'password': ['123'], 'hobby': ['kill', 'fish', 'cut-class']}>

# request.GET <QueryDict: {}>

获取值

def register(request):

    query_dict = request.POST if request.POST else request.GET  # 三元运算符 哪一个有值从哪一个里面去取

    username = query_dict.get('username')  # 获取单个值

    password = query_dict.get('password')  # 获取单个值

    hobby = query_dict.getlist('hobby')    # 获取多个值，一般是用于接收form表单的多选框数据

    print(username, password, hobby)  # 小满 123 ['抢人头', '摸鱼', '逃课']

    return render(request, 'register.html')

优化后的写法，可以这样但不建议

def register(request):

    query_dict = request.POST if request.POST else request.GET

    username, password, hobby = query_dict.values()  # 修改了这里

    print(username, password, hobby)  # 小满 11223344 逃课

    return render(request, 'register.html')

验证值

注册成功之后，跳转到登录页面

后端

# views.py

from django.shortcuts import redirect, HttpResponse, render

def login(request):

    username = request.POST.get('username')

    password = request.POST.get('password')

    if username == "小满" and password == '123':

        print(username, password)

        return render(request, 'login.html', {'username': username})

    else:

        return HttpResponse('对不起，账号或者密码错误~')

def register(request):

    if request.method == 'POST':

        response = login(request)

        if response.status_code == 200:

            return response

    return render(request, 'register.html')


# urls.py

from django.contrib import admin

from django.urls import path

from app import views

urlpatterns = [

    path('admin/', admin.site.urls),

    path('login/', views.login),

    path('register/', views.register, name='register'),  # name='register' 表示别名

前端

<!-- register.html -->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>注册页面</title>

    <style>

        fieldset {

            width: 300px;

        }

        legend {

            text-align: center;

        }

    </style>

</head>

<body>

<form action="" method="post">

    <fieldset>

        <legend>请输入用户名以及密码</legend>

        <label for="username">账号：</label>

        <input id="username" name="username" type="text" placeholder="在此处输入用户名">

        <br>

        <label for="password">密码：</label>

        <input id="password" name="password" type="password">

        <br>

        爱好：

        <input name="hobby" id="kill" type="checkbox" value="抢人头">

        <label for="kill">抢人头</label>

        <input name="hobby" id="fish" type="checkbox" value="摸鱼">

        <label for="fish">摸鱼</label>

        <input name="hobby" id="cut-class" type="checkbox" value="逃课">

        <label for="cut-class">逃课</label>

        <br>

        <input id="hobby" type="submit" value="提交">

    </fieldset>

</form>

</body>

</html>


<!-- login.html -->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>欢迎进入主界面</title>

</head>

<body>

    <p>{{ username}}，恭喜您登录成功！</p>

</body>

</html>

测试阶段

正确的用户名以及密码为：小满、123

当我输入了错误的用户名或者密码时

对不起，账号或者密码错误~

当我输入了正确的用户名和密码

小满，恭喜您登录成功！

4-request对象的更多相关文章

  1. request 对象和 response 对象

    Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象.和代表响应的response对象 HttpServletResponse HttpServletR ...

  2. JSP内置对象之request对象【学习笔记】

    request对象是JSP中重要的对象,每个request对象封装着一次用户的请求,并且所有的请求参数都被封装在request对象中,因此request对象是获取请求参数的重要途径. 一.获取请求头与 ...

  3. request对象和response对象

    Request 和 Response 对象起到了服务器与客户机之间的信息传递作用.Request 对象用于接收客户端浏览器提交的数据,而 Response 对象的功能则是将服务器端的数据发送到客户端浏 ...

  4. 重温Servlet学习笔记--request对象

    request和response是一对搭档,一个负责请求一个负责响应,都是Servlet.service()方法的参数,response的知识点前面梳理过了,这里只说一下request,在客户端发出每 ...

  5. 通过Request对象对cookie的设置、获取

    <html> <head></head> <body> <% request.setCharacterEncoding("UTF-8&q ...

  6. JSP基础——属性保存范围和request对象

    JSP属性保存范围 JSP中提供了四种属性保存范围,分别为page,request,session及application. 1.page范围,指设置的属性只在当前页面有效.通过pageContext ...

  7. request对象详解

    先来了解一下Request的主要方法: setAttribute(String name,Object):设置名字为name的request的参数值getAttribute(String name): ...

  8. Volley（二）—— 基本Request对象 & RequestQueue&请求取消

    详细解读Volley(一)—— 基本Request对象 & RequestQueue&请求取消 Volley它非常适合去进行数据量不大,但通信频繁的网络操作,而对于大数据量的网络操作, ...

  9. Request 对象

    Request 对象用于检索从浏览器向服务器发送的请求中的信息. 1.使用Request对象的Browser属性,可以访问HttpBrowserCapabilities属性获得当前正在使用哪种类型的浏 ...

  10. 在SpringMVC中获取request对象

    1.注解法 @Autowired private  HttpServletRequest request; 2. 在web.xml中配置一个监听 <listener> <listen ...

随机推荐

  1. [转帖]HTTP与HTTPS超文本传输协议的区别是什么

    https://www.likecs.com/show-308649882.html 随着越来越多的网站使用HTTPS加密,现在HTTPS的使用已经成了硬性要求了.虽然说https是http的安全版, ...

  2. ToneGenerator Init failed Crash 崩溃

    需求需要在扫码时产生一个短促的提示音, 搜了下像这样实现.测试时发现多次扫码后,会触发程序崩溃问题. 异常如下 java.lang.RuntimeException: Init failed at a ...

  3. csv用Excel打开出现乱码

    CSV用Excel打开出现乱码 今天出现一个问题 使用wps打开不会出现乱码.但使用 excel 打开的时候会出现乱码. 其实在我们把文件流转成文件的时候需要在bolb 对象前加上unicode标识, ...

  4. 消息队列RabbitMQ教程

    RabbitMQ教程 翻译自RabbitMQ Tutorials. 0. 准备 前期准备 1. Hello World 最简入门教程 2. 工作队列 竞争消费者模式 3. 发布/订阅 同时发送消息给多 ...

  5. Unity2019使用Gradle命令行(编译)出安卓包

    在我所经历的项目组中有这几种方法来生成APK 直接在Unity生成APK,可以接入SDK 使用Unity导出Android Studio工程手动生成APK 使用Unity导出Android Studi ...

  6. WebAssembly入门笔记[3]：利用Table传递引用

    在<WebAssembly入门笔记[2]>中,我们介绍了如何利用Memory在作为宿主的JavaScript应用和wasm模块之间传递数据,但是Momory面向单纯二进制字节的读写在使用起 ...

  7. C/C++ 反汇编：多维数组与指针

    反汇编即把目标二进制机器码转为汇编代码的过程,该技术常用于软件破解.外挂技术.病毒分析.逆向工程.软件汉化等领域,学习和理解反汇编对软件调试.系统漏洞挖掘.内核原理及理解高级语言代码都有相当大的帮助, ...

  8. 最好的个人博客评论区实现方案推荐：waline

    我的博客一直没有一个好看的评论区,自己做又不会..没错,我是个前端渣渣.调研了一下,一开始想套用一些网上的静态模板,但是改造成本还是挺大的,后来接触到了Waline,简单了解了以下,我就知道了,它就是 ...

  9. axios请求失败，获取接口返回错误信息

    一般vue项目都会对axios进行封装,后台统一规范默认让服务器对所有请求都返回成功,然后在成功的对象里面包装一层对象result,里面也包含code,msg,result信息,前端拿这个result ...

  10. 5个前端开源项目带你在Web上体验Windows

    本文来分享五个 yyds 的开源项目,这些项目把 Windows 带到了 Web 平台上.让我们一起感受这些项目带来的回忆和创新,重温 Windows 93.98.XP 和 7 的经典界面,甚至探索现 ...