Nhận thông số truy vấn JavaScript
Tham số URL (còn được gọi là tham số chuỗi truy vấn hoặc biến URL) được sử dụng để gửi một lượng nhỏ dữ liệu từ trang này sang trang khác hoặc từ máy khách đến máy chủ thông qua một URL. Chúng có thể chứa tất cả các loại thông tin hữu ích, chẳng hạn như truy vấn tìm kiếm, giới thiệu liên kết, thông tin sản phẩm, tùy chọn người dùng, v.v. Show
Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách phân tích và thao tác các tham số URL bằng JavaScript Nhận thông số URLTrong các trình duyệt hiện đại, điều này đã trở nên dễ dàng hơn rất nhiều nhờ vào giao diện URLSearchParams. Điều này xác định một loạt các phương thức tiện ích để làm việc với chuỗi truy vấn của một URL Giả sử rằng URL của chúng tôi là 0, chúng tôi có thể lấy chuỗi truy vấn bằng cách sử dụng 1
Sau đó, chúng tôi có thể phân tích cú pháp các tham số của chuỗi truy vấn bằng cách sử dụng 2
Sau đó, chúng tôi gọi bất kỳ phương thức nào của nó trên kết quả Ví dụ: 3 sẽ trả về giá trị đầu tiên được liên kết với tham số tìm kiếm đã cho
Các phương pháp hữu ích khácKiểm tra sự hiện diện của một tham sốBạn có thể sử dụng 4 để kiểm tra xem một tham số nào đó có tồn tại hay không________số 8Nhận tất cả các giá trị của tham sốBạn có thể sử dụng 5 để trả về tất cả các giá trị được liên kết với một tham số cụ thể 0Lặp lại các tham số 2 cũng cung cấp một số phương thức lặp 7 quen thuộc, cho phép bạn lặp qua các khóa, giá trị và mục nhập của nó 3Hỗ trợ trình duyệtTại thời điểm viết bài, nó được hỗ trợ trong tất cả các trình duyệt chính Có sẵn một polyfill nếu bạn phải hỗ trợ các trình duyệt cũ như Internet Explorer. Hoặc, bạn có thể làm theo phần còn lại của hướng dẫn này và tìm hiểu cách cuộn của riêng bạn Cuộn chức năng phân tích chuỗi truy vấn của riêng bạnHãy ở lại với URL mà chúng tôi đã sử dụng trong phần trước 4Đây là một chức năng cung cấp cho bạn tất cả các tham số URL dưới dạng một đối tượng gọn gàng 5Bạn sẽ sớm thấy cách thức hoạt động của tính năng này, nhưng trước tiên, đây là một số ví dụ sử dụng 6Và đây là một bản demo để bạn chơi xung quanh Xem Bút rQGWpP của SitePoint (@SitePoint) trên CodePen Những điều cần biết trước khi sử dụng chức năng này
Nếu bạn chỉ muốn một chức năng mà bạn có thể đưa vào mã của mình, bạn đã hoàn thành ngay bây giờ. Nếu bạn muốn hiểu chức năng này hoạt động như thế nào, hãy đọc tiếp Phần sau đây giả sử bạn biết một số JavaScript, bao gồm hàm, đối tượng và mảng. Nếu bạn cần xem lại, hãy xem tài liệu tham khảo MDN JavaScript Cách chức năng hoạt độngNhìn chung, hàm lấy chuỗi truy vấn của URL (phần sau 2 và trước 3) và đưa ra dữ liệu trong một đối tượng gọn gàngĐầu tiên, dòng này cho biết, nếu chúng tôi đã chỉ định một URL, hãy lấy mọi thứ sau dấu chấm hỏi, nhưng nếu không, chỉ cần sử dụng URL của cửa sổ 2Tiếp theo, chúng tôi sẽ tạo một đối tượng để lưu trữ các tham số của chúng tôi 0Nếu chuỗi truy vấn tồn tại, chúng tôi sẽ bắt đầu phân tích cú pháp chuỗi đó. Trước tiên, chúng tôi phải đảm bảo loại bỏ phần bắt đầu từ 3, vì nó không phải là một phần của chuỗi truy vấn 1Bây giờ chúng ta có thể chia chuỗi truy vấn thành các phần cấu thành của nó 2Điều đó sẽ cho chúng ta một mảng trông như thế này 3Tiếp theo, chúng tôi sẽ lặp qua mảng này và chia từng mục thành một khóa và một giá trị, chúng tôi sẽ sớm đưa vào đối tượng của mình 4Hãy gán khóa và giá trị cho các biến riêng lẻ. Nếu không có giá trị tham số, chúng tôi sẽ đặt giá trị đó thành 5 để cho biết rằng tên tham số tồn tại. Vui lòng thay đổi điều này tùy thuộc vào trường hợp sử dụng của bạn 5Theo tùy chọn, bạn có thể đặt tất cả tên và giá trị tham số thành chữ thường. Bằng cách đó, bạn có thể tránh được tình huống ai đó gửi lưu lượng truy cập đến một URL có 6 thay vì 7 và tập lệnh của bạn bị hỏng. (Tôi đã thấy điều này xảy ra. ) Tuy nhiên, nếu chuỗi truy vấn của bạn cần phân biệt chữ hoa chữ thường, vui lòng bỏ qua phần này 6Tiếp theo, chúng ta cần xử lý các loại đầu vào khác nhau mà chúng ta có thể nhận được trong 8. Đây có thể là một mảng được lập chỉ mục, một mảng không được lập chỉ mục hoặc một chuỗi thông thườngNếu đó là một mảng được lập chỉ mục, chúng tôi muốn 9 tương ứng là một mảng, với giá trị được chèn vào đúng vị trí. Nếu đó là một mảng không được lập chỉ mục, chúng tôi muốn 9 tương ứng là một mảng với phần tử được đẩy vào nó. Nếu đó là một chuỗi, chúng tôi muốn tạo một thuộc tính thông thường trên đối tượng và gán 9 cho nó, trừ khi thuộc tính đó đã tồn tại, trong trường hợp đó, chúng tôi muốn chuyển đổi 9 hiện có thành một mảng và đẩy 9 sắp tới vào đóĐể minh họa điều này, đây là một số đầu vào mẫu, với đầu ra mà chúng ta mong đợi 7Và đây là mã để thực hiện chức năng 8Cuối cùng, chúng tôi trả về đối tượng của mình với các tham số và giá trị Nếu URL của bạn có bất kỳ ký tự đặc biệt nào được mã hóa như dấu cách (được mã hóa thành 04), bạn cũng có thể giải mã chúng để nhận giá trị ban đầu như thế này 9Chỉ cần cẩn thận không giải mã thứ gì đó đã được giải mã, nếu không, tập lệnh của bạn sẽ bị lỗi, đặc biệt nếu có liên quan đến phần trăm Dù sao, xin chúc mừng. Bây giờ bạn đã biết cách lấy tham số URL và hy vọng bạn đã học được một số thủ thuật khác trong quá trình thực hiện Phần kết luậnMã trong bài viết này hoạt động cho các trường hợp sử dụng phổ biến nhất mà bạn sẽ nhận được tham số truy vấn URL. Nếu bạn đang làm việc với bất kỳ trường hợp cạnh nào, chẳng hạn như dấu tách không phổ biến hoặc định dạng đặc biệt, thì hãy đảm bảo kiểm tra và điều chỉnh cho phù hợp Nếu bạn muốn làm nhiều hơn với URL, có sẵn các thư viện cụ thể, chẳng hạn như chuỗi truy vấn và URI trung gian. js. Nhưng vì về cơ bản nó là thao tác chuỗi, nên thường chỉ sử dụng JavaScript đơn giản. Cho dù bạn sử dụng mã của riêng mình hay sử dụng thư viện, hãy nhớ kiểm tra mọi thứ và đảm bảo rằng nó hoạt động cho các trường hợp sử dụng của bạn Nếu bạn thích chơi với chuỗi, hãy xem các bài đăng của chúng tôi về tách chuỗi thành chuỗi con, chuyển đổi chuỗi thành số và chuyển đổi số thành chuỗi và thứ tự. Để có thêm kiến thức chuyên sâu về JavaScript, hãy đọc cuốn sách JavaScript của chúng tôi. Tập làm Ninja, Phiên bản 2 Chia sẻ bài viết nàyYaphi Berhanu Yaphi Berhanu là một nhà phát triển web thích giúp mọi người nâng cao kỹ năng viết mã của họ. Anh ấy viết mẹo và thủ thuật tại http. //mã bước đơn giản. com. Theo ý kiến hoàn toàn không thiên vị của mình, anh ấy đề nghị kiểm tra nó Làm cách nào để tìm nạp tham số truy vấn trong JavaScript?get() . Điều này là để lấy giá trị của một tham số cụ thể. lấy hết(). Điều này là để lấy một mảng gồm tất cả các giá trị trong chuỗi truy vấn. cho mỗi(). Điều này là để lặp lại các tham số của chuỗi truy vấn. phím(). Điều này là để lặp lại các khóa của chuỗi truy vấn.
Tham số truy vấn JavaScript là gì?Tham số truy vấn là các chuỗi hài hước đó trong URL sau dấu chấm hỏi ( ? ) . Dưới đây là ví dụ về URL có tham số truy vấn. https. //www.
Làm cách nào để trích xuất chuỗi truy vấn trong JavaScript?Để làm việc với chuỗi truy vấn, bạn có thể sử dụng đối tượng URLSearchParams. . keys() trả về một trình vòng lặp lặp qua các khóa tham số values() trả về một iterator lặp qua các giá trị tham số Làm cách nào để kiểm tra xem tham số chuỗi truy vấn có tồn tại JavaScript không?Để kiểm tra xem một url có tham số truy vấn hay không, hãy gọi phương thức bao gồm () trên chuỗi, chuyển cho nó một dấu chấm hỏi làm tham số, e. g. str. bao gồm('? '). Nếu url chứa tham số truy vấn, phương thức bao gồm sẽ trả về true, nếu không thì trả về false |