Cách gửi dữ liệu bằng URL trong HTML

Giả sử chúng ta muốn chuyển một biến có tên là name chứa giá trị Jim đến một trang nhất định, chẳng hạn, _______22_______ bên trong thư mục /sample. Để vượt qua điều này, chúng tôi nối chuỗi ?name=Jim sau liên kết đến trang đích. Chúng tôi minh họa điều này bằng cách sử dụng thẻ neo bên dưới

					
					To Bridge 
					
				

Văn bản sau URL ?name=Jim được gọi là chuỗi truy vấn

Dữ liệu được truyền qua URL có thể được truy xuất trong trang đích bằng cách sử dụng siêu toàn cầu

Dưới đây là một liên kết ví dụ được nối với chuỗi truy vấn ?name=Jim. Nếu bạn nhấp vào nó, chuỗi truy vấn ?name=Jim sẽ được tìm thấy ở cuối URL

Tên "Jim" được in trên trang được lấy từ URL bằng cách sử dụng

Có thể truyền hai hoặc nhiều cặp biến/giá trị bằng cách tách chúng bằng ký tự dấu và (

Dữ liệu cũng có thể được chuyển qua URL đến các trang trong các trang web bên ngoài. Điều này thường thấy rõ ở các blog/trang web thực hiện tiếp thị liên kết cho các trang web lưu trữ và thương mại điện tử khác nhau. Ví dụ: nếu bạn nhấp vào một sản phẩm được liệt kê trong trang web liên kết của Amazon, nó sẽ dẫn bạn đến trang của sản phẩm đó trong trang web của Amazon với URL chứa một số tham số (và giá trị tương ứng) như

					
					To Bridge 
					
				

					
					To Bridge 
					
				

					
					To Bridge 
					
				

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.

Thí dụ

https://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. vị trí. 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 chỉ định trong 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

Làm cách nào để chuyển dữ liệu qua URL trong HTML?

Làm cách nào để chuyển giá trị đầu vào từ trang HTML này sang trang khác?

Làm cách nào để chuyển tham số bằng URL trong JavaScript?