1. Tổng quan.
HTTP Methods (Phương thức HTTP) là các phương thức hoạt động được sử dụng trong giao thức HTTP (Hypertext Transfer Protocol) để quy định loại yêu cầu hoặc hành động mà một máy chủ web hoặc ứng dụng web nên thực hiện khi nhận được một yêu cầu từ một máy khách (client). Hai phương thức HTTP quan trọng và phổ biến là POST và GET:
- GET:
- Mục đích chính: Phương thức GET được sử dụng để yêu cầu dữ liệu từ máy chủ. Nó được sử dụng khi người dùng muốn truy xuất dữ liệu từ máy chủ, ví dụ như truy cập trang web, xem sản phẩm, hoặc tìm kiếm thông tin.
- Dữ liệu truyền đi: Thông thường, dữ liệu được truyền đi qua URL (Uniform Resource Locator) trong phần query string (sau dấu ?) và có thể được hiển thị trong thanh địa chỉ trình duyệt.
- Các đặc điểm:
- Phương thức GET không thay đổi trạng thái của máy chủ hoặc dữ liệu trên máy chủ. Nó được coi là idempotent, có nghĩa là nhiều yêu cầu GET cùng một dữ liệu sẽ không thay đổi dữ liệu đó.
- Dữ liệu được truyền đi qua GET có giới hạn về kích thước, vì nó nằm trong URL.
- GET thường được sử dụng để truy cập dữ liệu công khai và không nên được sử dụng để truyền thông tin nhạy cảm như mật khẩu.
- POST:
- Mục đích chính: Phương thức POST được sử dụng để gửi dữ liệu từ máy khách đến máy chủ để tạo hoặc cập nhật thông tin. Nó thường được sử dụng trong biểu mẫu web khi người dùng điền vào các trường và gửi thông tin đến máy chủ.
- Dữ liệu truyền đi: Dữ liệu được gửi bằng phương thức POST được đính kèm trong phần body của yêu cầu HTTP, không hiển thị trên URL. Do đó, POST cho phép truyền đi dữ liệu lớn hơn và bảo mật hơn so với GET.
- Các đặc điểm:
- Phương thức POST thường sử dụng để tạo, cập nhật, hoặc xóa dữ liệu trên máy chủ. Nó có thể thay đổi trạng thái của máy chủ hoặc dữ liệu trên máy chủ.
- POST không phụ thuộc vào giới hạn kích thước dữ liệu như GET, cho phép truyền dữ liệu lớn hơn.
- POST thường được sử dụng để gửi dữ liệu nhạy cảm như mật khẩu và thông tin cá nhân.
Như vậy GET và POST là hai phương thức HTTP quan trọng với mục đích và cách sử dụng khác nhau. GET được sử dụng để truy cập dữ liệu từ máy chủ và truyền dữ liệu qua URL, trong khi POST được sử dụng để gửi dữ liệu đến máy chủ và truyền dữ liệu trong phần body của yêu cầu HTTP.
2. Thực hành.
Xây dựng một ứng dụng web đơn giản bằng Flask để hiển thị một trang chào đón và xử lý một biểu mẫu đăng nhập.
Hãy tạo một folder và các file có cấu trúc như dưới.
../myapp/
├── html_method.py
└── templates
├── base.html
├── home.html
└── login.html
1 directory, 4 files
Thêm đoạn code HTML trong file login.html
.
- Đoạn code này định nghĩa một form HTML đơn giản có một ô nhập liệu (input) để người dùng nhập tên và một nút gửi (submit) để gửi biểu mẫu.
action="/login"
: Đây là thuộc tính action của form, chỉ định rằng khi biểu mẫu được gửi, nó sẽ gửi yêu cầu đến đường dẫn/login
.method="post"
: Đây là phương thức HTTP được sử dụng khi biểu mẫu được gửi. Trong trường hợp này, nó sử dụng phương thức POST để gửi dữ liệu.
{% extends "base.html" %}
{% block title %} Home Page {% endblock %}
{% block content %}
<h2>This is Home Pages</h2>
<div style="margin-left: 50px;">
<form action="/login" method="post">
<label for="name">Name</label>
<input type="text" name="name" id="name"></input>
<button style="background-color: rgb(155, 19, 132); color: white;" type="submit">Login</button>
</form>
</div>
{% endblock %}
Với file home.html
.
{% extends "base.html" %}
{% block title %} Home Page {% endblock %}
{% block content %}
<h2>This is Home Pages</h2>
{% endblock %}
Với file base.html
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %} {% endblock %}</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<h1>My website</h1>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
{% block content %} {% endblock %}
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</html>
Với file html_method.py
.
- Đoạn code Python sử dụng Flask để xây dựng một ứng dụng web.
@app.route('/')
: Đoạn code này đánh dấu một hàmhello_world
là một route cho đường dẫn gốc (/
). Khi người dùng truy cập trang chủ, hàm này trả về trang web được render từ templatehome.html
.@app.route('/login', methods=["POST", "GET"])
: Đoạn code này đánh dấu một hàmlogin
là một route cho đường dẫn/login
. Nó cũng xác định rằng route này sẽ xử lý cả yêu cầu POST và GET.- Trong hàm
login
, kiểm tra nếu yêu cầu là POST (tức là biểu mẫu đã được gửi đi), nó sẽ lấy giá trị được gửi từ trường “name” trong biểu mẫu (bằngrequest.form["name"]
). Nếu giá trị này tồn tại, nó sẽ thực hiện chuyển hướng đến routehello_user
với tên người dùng. - Trong hàm
hello_user
, nó sẽ trả về một trang web chào đón người dùng với tên được truyền vào thông qua đường dẫn.
from flask import Flask, redirect, url_for, render_template, request
app = Flask(__name__)
@app.route('/')
def hello_world():
return render_template("home.html")
@app.route('/login', methods=["POST", "GET"])
def login():
if request.method == "POST":
user_name = request.form["name"]
if user_name:
return redirect(url_for("hello_user", name=user_name))
return render_template('login.html')
@app.route('/user/<name>')
def hello_user(name):
return f"<h1>Hello {name}!</h1>"
if __name__ == "__main__":
app.run(debug=True, host='0.0.0.0', port=5000)
Khi bạn chạy ứng dụng và truy cập trang chủ (/login
), bạn sẽ thấy biểu mẫu đăng nhập. Khi bạn điền tên vào biểu mẫu và nhấn nút “Login”, biểu mẫu sẽ được gửi đi với phương thức POST đến /login
. Khi đó, hàm login
sẽ kiểm tra tên và chuyển hướng đến trang chào đón người dùng.