Cách truyền biến trong HTML

Với mục đích này, một biểu mẫu được tạo có các giá trị sẽ được truyền tự động và trong trang đích, một tập lệnh sẽ truy xuất các giá trị đã gửi

Chúng ta đã thấy cách tạo biểu mẫu, chúng tôi sẽ trình bày chi tiết ở đây cách trích xuất dữ liệu được truyền

1] Hiểu định dạng tham số của URL

Ba ký hiệu được sử dụng để xác định một chuỗi tham số cần truyền

  ?   concatenates the URL and the string of parameters.
  &   separates multiple parameters.
  =   assigns a value to the variable.

Ví dụ

//www.xul.fr/demo.html?login="me"&password="1234"

Trong ví dụ này, chúng tôi có hai tham số, đăng nhập và mật khẩu, được gán giá trị "tôi" và "1234"

2] Các giá trị được gửi từ biểu mẫu đến máy chủ

Bạn không phải làm gì để gửi các giá trị. tất cả các biến và giá trị trong một biểu mẫu được gửi tự động cung cấp hành động của biểu mẫu là một trang để tải

Thuộc tính "tên" của mỗi mục biểu mẫu sẽ cung cấp tên của biến và thuộc tính "giá trị" giá trị của nó

...various widgets...

Xem tại nguồn của biểu mẫu ở dưới cùng

Phương thức GET nối thêm dữ liệu vào URL, trong khi phương thức POST sẽ truyền dữ liệu trực tiếp

Gửi dữ liệu không có biểu mẫu

Để chuyển tham số sang trang khác hoặc tập lệnh mà không hiển thị biểu mẫu [nhưng có thẻ biểu mẫu], chúng tôi sử dụng trường "ẩn"

Hình thức vô hình này sẽ chuyển sang trang khác. html tham số. tên biến đổi = 12345

3] Trích xuất dữ liệu nhận được từ URL trong trang

Địa điểm. thuộc tính tìm kiếm chứa chuỗi tham số, nó vẫn được phân tích

Đây là mã hoàn chỉnh để xử lý dữ liệu được gửi

Giải trình

1. địa điểm. tìm kiếm là thuộc tính chứa danh sách các tham số
2. substring[1] bỏ qua ?
3. split["&"] tách chuỗi và trả về một mảng có các phần tử là tham số
4. mảng này được gán cho biến "tham số". Bây giờ chúng ta có thể truy cập các phần tử riêng lẻ bằng cách đăng ký mảng. Tham số [0] là phần tử đầu tiên
5. chúng ta phải chia lại tham số thành một mảng nhỏ khác chứa tên của biến và giá trị
6. trong ví dụ này, chúng tôi chỉ cần giá trị, vì vậy chúng tôi đăng ký mảng nhỏ cho mục thứ hai, temp[1]
7. hàm unescape chuyển đổi các ký tự đặc biệt
8. chúng tôi đã gán biến l với giá trị đăng nhập và biến p với mật khẩu
9. thông tin đăng nhập được ghi vào trường nhật ký nhờ phương thức getElementById
10. và mật khẩu vào trường pass

4] Cập nhật trang với dữ liệu nhận được

Trong ví dụ này, tôi cho rằng chúng ta muốn ghi dữ liệu vào trang được tải với các tham số.
Biến đăng nhập đã được gán trong đoạn mã trước.
Hai trường đã được xác định trong trang.

Các trường được xác định bởi thuộc tính id. Để điền dữ liệu vào chúng, chúng ta phải sử dụng phương thức getElementById[""] của DOM và thuộc tính innerHTML

Tôi đang cố gắng xây dựng một cổng dịch vụ nơi chúng tôi cần hiển thị các URL động trên màn hình. Đối với điều này, chúng tôi đang sử dụng iframe và từ tập lệnh máy chủ và máy khách, chúng tôi đang gọi URL theo biến. Tuy nhiên, khi chúng tôi đặt biến trong Mẫu HTML trong khung nội tuyến hoặc tập lệnh tôi. e. src="URL" thì nó không hoạt động. Xem ảnh chụp nhanh bên dưới với ba trường hợp sử dụng -

1. DIV - Trong biến này đang hoạt động tốt

2. khung nội tuyến với biến URL trong SRC - Điều này không hoạt động

3. khung nội tuyến với URL được mã hóa cứng trong SRC - Điều này đang hoạt động tốt

Câu hỏi của tôi là ở điểm thứ 2 tôi. e. cách chuyển URL dưới dạng biến hoặc một phần của URL dưới dạng biến

Đính kèm ảnh chụp kết quả để hiểu rõ hơn

Một mẹo hay mà tôi đã phát hiện ra gần đây là bạn có thể "chuyển" giá trị từ HTML nội tuyến sang CSS bằng cách có một cái gì đó như thế này

RED

div { background-color: var[--main-color]; }

Tôi đã sử dụng dấu ngoặc kép khi nói chuyển vì chúng tôi không thực sự chuyển biến đó. Chúng tôi chỉ xác định một kiểu nội tuyến cho thành phần đó và chúng tôi sẽ để tầng CSS làm phần còn lại

Trong một số trường hợp, điều này thật tuyệt vì chúng ta có thể xác định các thuộc tính cho một số thành phần HTML như chúng ta đã làm với một số thứ như thuộc tính React

Tất nhiên, chúng ta cũng có thể thêm vào. phần tử gốc một giá trị mặc định cho CSS var

Dưới đây bạn có đầy đủ codepen đang hoạt động

Xem giá trị của Pen
CSS Var pass của JS Craft [@js-craft]
trên CodePen.

Nói về các biến CSS, trước đây tôi đã viết một bài viết chuyên sâu hơn về chúng mà bạn có thể đọc tại đây

Tôi hy vọng bạn thích bài viết này và nếu bạn muốn nhận thêm các bài viết về React và phát triển giao diện người dùng, bạn luôn có thể đăng ký danh sách email của tôi

Bạn có thể đặt biến trong HTML không?

Làm cách nào để chuyển tham số trong URL HTML?

Làm cách nào để chuyển giá trị biến trong href trong HTML?