Cách chuyển chuỗi truy vấn trong URL bằng JavaScript

Question

Có thể thêm, cập nhật hoặc xóa các tham số truy vấn tìm kiếm bằng cách sử dụng Javascript URL và URLSearchParams objects.

Nội dung chính Show

1. Truy xuất giá trị chuỗi truy vấn bằng URLSearchParams
2. Cụm từ thông dụng trong JavaScript
3. Hàm JavaScript đơn giản để lấy Đối tượng giá trị tham số truy vấn
4. Cách jQuery để nhận các giá trị chuỗi truy vấn từ các tham số URL
Làm cách nào để nhận URL hiện tại bằng chuỗi truy vấn trong JavaScript?
Làm cách nào chúng tôi có thể chuyển tham số truy vấn trong URL?
Làm cách nào để chuyển tham số URL trong JavaScript?
Làm cách nào để đặt chuỗi truy vấn trong JavaScript?

Để biết cách nhận tham số truy vấn bằng cách sử dụng URL và URLSearchParams, refer the tutorial Get URL Parameters with Javascript.

Chỉnh sửa/Cập nhật thông số

Giá trị của tham số có thể được cập nhật bằng phương thức set() của đối tượng URLSearchParams.

Sau khi đặt giá trị mới, bạn có thể nhận chuỗi truy vấn mới bằng phương thức toString() . Chuỗi truy vấn này có thể được đặt làm giá trị mới của thuộc tính tìm kiếm của URL object.

Sau đó, url mới cuối cùng có thể được truy xuất bằng phương thức toString() của URL< . object.

var url = new URL('http://demourl.com/path?id=100&topic=main');
var search_params = url.searchParams;

// new value of "id" is set to "101"
search_params.set('id', '101');

// change the search property of the main url
url.search = search_params.toString();

// the new url string
var new_url = url.toString();

// output : http://demourl.com/path?id=101&topic=main
console.log(new_url);

Thêm một thông số mới

Phương thức set() có thể được sử dụng để thêm một tham số mới — tham số được thêm vào nếu nó tồn tại, nếu không thì giá trị của nó là .

var url = new URL('http://demourl.com/path?id=100');
var search_params = url.searchParams;

// add "topic" parameter
search_params.set('topic', 'main');

url.search = search_params.toString();

var new_url = url.toString();

// output : http://demourl.com/path?id=100&topic=main
console.log(new_url);

Để thêm một tham số có nhiều giá trị, hãy sử dụng phương thức append() .

var url = new URL('http://demourl.com/path?topic=main');
var search_params = url.searchParams;

search_params.append('id', '101');
search_params.append('id', '102');

url.search = search_params.toString();

var new_url = url.toString();

// output : http://demourl.com/path?id=100&id=101&id=102&topic=main
console.log(new_url);

Xóa một tham số theo tên

Phương thức delete() có thể được sử dụng để xóa tham số khỏi url.

search_params.delete('id');

Xóa tất cả các tham số

Có thể xóa tất cả tham số truy vấn khỏi url bằng cách đặt thuộc tính tìm kiếm của đối tượng URL thành trống.

var url = new URL('http://demourl.com/path?topic=main');

// set search property to blank
url.search = '';

var new_url = url.toString();

// output : http://demourl.com/path
console.log(new_url);

Nhiệm vụ là tạo một URL truy vấn cho yêu cầu GET được cung cấp một đối tượng JSON bằng cách sử dụng javaScript. Tham số truy vấn GET trong một URL chỉ là một chuỗi các cặp khóa-giá trị được kết nối với ký hiệu &. Để chuyển đổi một đối tượng JSON thành tham số truy vấn GET, chúng ta có thể sử dụng phương pháp sau

Đôi khi chúng ta cần lấy giá trị thông qua chuỗi truy vấn trong URL trên thanh địa chỉ của trình duyệt. Nhưng câu hỏi đặt ra là làm thế nào để lấy chúng bằng JavaScript hoặc jquery vì chúng tôi cần chúng ở phía máy khách

Ở đây tôi đang đề cập đến 4 cách để nhận giá trị từ tham số truy vấn. Tôi cũng đã hiển thị các ví dụ sử dụng. Bạn có thể sử dụng một trong số chúng theo lựa chọn của mình và cần trong JS hoặc jQuery phía máy khách

1. Truy xuất giá trị chuỗi truy vấn bằng URLSearchParams

Đây là cách đơn giản nhất và được khuyên dùng nhất để truy xuất các giá trị từ chuỗi truy vấn. URLSearchParams là một giao diện tích hợp trong các trình duyệt mới nhất với một số phương thức để lấy và thao tác các giá trị

URLTìm kiếmThông số

0

1

2

3

4

5

6

7

8

9

10

11

12

13

const urlParams = new URLSearchParams(window.vị trí. tìm kiếm);

const param_x = urlParams. lấy('param_x');

/*

ví dụ

//Chuỗi truy vấn có trong thanh địa chỉ của trình duyệt là 'submitted=true&msg=success'

var urlParams = new URLSearchParams(cửa sổ. địa điểm. Tìm kiếm);

var has_msg = urlParams. has('tin nhắn');

var msg = urlParams. get('tin nhắn');

var đã gửi = urlParams. get('đã gửi');

chuyển hướng var = urlParams. get('chuyển hướng');

*/

Mặc dù giao diện này hỗ trợ một số trình duyệt phù hợp, nhưng nó không có sẵn cho tất cả, đặc biệt là những trình duyệt cũ. Tôi khuyên bạn nên kiểm tra tài liệu chính thức trên Mozilla và Chrome. Nó có nhiều phương pháp hữu ích khác nhau để sử dụng

2. Cụm từ thông dụng trong JavaScript

Đây là hàm sẽ giải mã an toàn các thành phần URL bằng cách sử dụng biểu thức chính quy. Chúng ta có thể gọi hàm này và chuyển tên của tham số chuỗi truy vấn làm đối số để lấy giá trị

Biểu thức chính quy để nhận giá trị chuỗi truy vấn

0

1

2

3

4

5

6

7

8

9

10