Cách chuyển nhiều tham số truy vấn trong url trong javascript

Question

Phương thức append() của giao diện URLSearchParams nối thêm một cặp khóa/giá trị được chỉ định làm tham số tìm kiếm mới

Nội dung chính Show

Tìm thấy một vấn đề nội dung với trang này?
Làm cách nào để chuyển nhiều tham số trong URL trong JavaScript?
Làm cách nào để chuyển nhiều chuỗi truy vấn trong JavaScript?
Chúng ta có thể chuyển bao nhiêu tham số truy vấn bằng URL?
Bạn có thể có nhiều dấu chấm hỏi trong URL không?

Như minh họa trong ví dụ bên dưới, nếu cùng một khóa được thêm vào nhiều lần thì khóa đó sẽ xuất hiện nhiều lần trong chuỗi tham số cho mỗi giá trị

Ghi chú. Tính năng này có sẵn trong Web Worker

append(name, value)

name

Tên của tham số để nối thêm

value

Giá trị của tham số để nối thêm

Không có (undefined)

let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search);

//Add a second foo parameter.
params.append('foo', 4);
//Query string is now: 'foo=1&bar=2&foo=4'

Sự chỉ rõ

Bảng BCD chỉ tải trong trình duyệt có bật JavaScript. Bật JavaScript để xem dữ liệu

Các giao diện liên quan đến URL khác. URL, HTMLHyperlinkElementUtils
Nhà phát triển Google. Thao tác URL dễ dàng với URLSearchParams

Tìm thấy một vấn đề nội dung với trang này?

Chỉnh sửa trang trên Github
Báo cáo vấn đề nội dung
Xem nguồn trên GitHub

Bạn muốn tham gia nhiều hơn?

Trang này được sửa đổi lần cuối vào ngày 13 tháng 9 năm 2022 bởi những người đóng góp MDN

Có thể trực tiếp sử dụng một đối tượng triển khai URLSearchParams trong cấu trúc

const paramsString = 'q=URLUtils.searchParams&topic=api';
const searchParams = new URLSearchParams(paramsString);

// Iterating the search parameters
for (const p of searchParams) {
  console.log(p);
}

console.log(searchParams.has('topic'));               // true
console.log(searchParams.get('topic') === "api");     // true
console.log(searchParams.getAll('topic'));            // ["api"]
console.log(searchParams.get('foo') === null);        // true
console.log(searchParams.append('topic', 'webdev'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams&topic=api&topic=webdev"
console.log(searchParams.set('topic', 'More webdev'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams&topic=More+webdev"
console.log(searchParams.delete('topic'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams"

0 để lặp qua các cặp khóa/giá trị theo cùng thứ tự như chúng xuất hiện trong chuỗi truy vấn, ví dụ: hai dòng sau đây là tương đương

for (const [key, value] of mySearchParams) {}
for (const [key, value] of mySearchParams.entries()) {}

Ghi chú. Tính năng này có sẵn trong Web Worker

const paramsString = 'q=URLUtils.searchParams&topic=api';
const searchParams = new URLSearchParams(paramsString);

// Iterating the search parameters
for (const p of searchParams) {
  console.log(p);
}

console.log(searchParams.has('topic'));               // true
console.log(searchParams.get('topic') === "api");     // true
console.log(searchParams.getAll('topic'));            // ["api"]
console.log(searchParams.get('foo') === null);        // true
console.log(searchParams.append('topic', 'webdev'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams&topic=api&topic=webdev"
console.log(searchParams.set('topic', 'More webdev'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams&topic=More+webdev"
console.log(searchParams.delete('topic'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams"

1

Trả về một thể hiện đối tượng URLSearchParams

const paramsString = 'q=URLUtils.searchParams&topic=api';
const searchParams = new URLSearchParams(paramsString);

// Iterating the search parameters
for (const p of searchParams) {
  console.log(p);
}

console.log(searchParams.has('topic'));               // true
console.log(searchParams.get('topic') === "api");     // true
console.log(searchParams.getAll('topic'));            // ["api"]
console.log(searchParams.get('foo') === null);        // true
console.log(searchParams.append('topic', 'webdev'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams&topic=api&topic=webdev"
console.log(searchParams.set('topic', 'More webdev'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams&topic=More+webdev"
console.log(searchParams.delete('topic'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams"

3

Nối một cặp khóa/giá trị được chỉ định làm thông số tìm kiếm mới

const paramsString = 'q=URLUtils.searchParams&topic=api';
const searchParams = new URLSearchParams(paramsString);

// Iterating the search parameters
for (const p of searchParams) {
  console.log(p);
}

console.log(searchParams.has('topic'));               // true
console.log(searchParams.get('topic') === "api");     // true
console.log(searchParams.getAll('topic'));            // ["api"]
console.log(searchParams.get('foo') === null);        // true
console.log(searchParams.append('topic', 'webdev'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams&topic=api&topic=webdev"
console.log(searchParams.set('topic', 'More webdev'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams&topic=More+webdev"
console.log(searchParams.delete('topic'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams"

4

Xóa tham số tìm kiếm đã cho và giá trị được liên kết của nó khỏi danh sách tất cả các tham số tìm kiếm

const paramsString = 'q=URLUtils.searchParams&topic=api';
const searchParams = new URLSearchParams(paramsString);

// Iterating the search parameters
for (const p of searchParams) {
  console.log(p);
}

console.log(searchParams.has('topic'));               // true
console.log(searchParams.get('topic') === "api");     // true
console.log(searchParams.getAll('topic'));            // ["api"]
console.log(searchParams.get('foo') === null);        // true
console.log(searchParams.append('topic', 'webdev'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams&topic=api&topic=webdev"
console.log(searchParams.set('topic', 'More webdev'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams&topic=More+webdev"
console.log(searchParams.delete('topic'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams"

5

Trả về một

const paramsString = 'q=URLUtils.searchParams&topic=api';
const searchParams = new URLSearchParams(paramsString);

// Iterating the search parameters
for (const p of searchParams) {
  console.log(p);
}

console.log(searchParams.has('topic'));               // true
console.log(searchParams.get('topic') === "api");     // true
console.log(searchParams.getAll('topic'));            // ["api"]
console.log(searchParams.get('foo') === null);        // true
console.log(searchParams.append('topic', 'webdev'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams&topic=api&topic=webdev"
console.log(searchParams.set('topic', 'More webdev'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams&topic=More+webdev"
console.log(searchParams.delete('topic'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams"

6 cho phép lặp qua tất cả các cặp khóa/giá trị có trong đối tượng này theo cùng thứ tự như chúng xuất hiện trong chuỗi truy vấn

const paramsString = 'q=URLUtils.searchParams&topic=api';
const searchParams = new URLSearchParams(paramsString);

// Iterating the search parameters
for (const p of searchParams) {
  console.log(p);
}

console.log(searchParams.has('topic'));               // true
console.log(searchParams.get('topic') === "api");     // true
console.log(searchParams.getAll('topic'));            // ["api"]
console.log(searchParams.get('foo') === null);        // true
console.log(searchParams.append('topic', 'webdev'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams&topic=api&topic=webdev"
console.log(searchParams.set('topic', 'More webdev'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams&topic=More+webdev"
console.log(searchParams.delete('topic'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams"

7

Cho phép lặp qua tất cả các giá trị có trong đối tượng này thông qua chức năng gọi lại

const paramsString = 'q=URLUtils.searchParams&topic=api';
const searchParams = new URLSearchParams(paramsString);

// Iterating the search parameters
for (const p of searchParams) {
  console.log(p);
}

console.log(searchParams.has('topic'));               // true
console.log(searchParams.get('topic') === "api");     // true
console.log(searchParams.getAll('topic'));            // ["api"]
console.log(searchParams.get('foo') === null);        // true
console.log(searchParams.append('topic', 'webdev'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams&topic=api&topic=webdev"
console.log(searchParams.set('topic', 'More webdev'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams&topic=More+webdev"
console.log(searchParams.delete('topic'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams"

8

Trả về giá trị đầu tiên được liên kết với tham số tìm kiếm đã cho

const paramsString = 'q=URLUtils.searchParams&topic=api';
const searchParams = new URLSearchParams(paramsString);

// Iterating the search parameters
for (const p of searchParams) {
  console.log(p);
}

console.log(searchParams.has('topic'));               // true
console.log(searchParams.get('topic') === "api");     // true
console.log(searchParams.getAll('topic'));            // ["api"]
console.log(searchParams.get('foo') === null);        // true
console.log(searchParams.append('topic', 'webdev'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams&topic=api&topic=webdev"
console.log(searchParams.set('topic', 'More webdev'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams&topic=More+webdev"
console.log(searchParams.delete('topic'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams"

9

Trả về tất cả các giá trị được liên kết với một tham số tìm kiếm đã cho

// Search parameters can also be an object
const paramsObj = {foo: 'bar', baz: 'bar'};
const searchParams = new URLSearchParams(paramsObj);

console.log(searchParams.toString());                 // "foo=bar&baz=bar"
console.log(searchParams.has('foo'));                 // true
console.log(searchParams.get('foo'));                 // "bar"

0

Trả về một giá trị boolean cho biết liệu một tham số đã cho có tồn tại hay không

// Search parameters can also be an object
const paramsObj = {foo: 'bar', baz: 'bar'};
const searchParams = new URLSearchParams(paramsObj);

console.log(searchParams.toString());                 // "foo=bar&baz=bar"
console.log(searchParams.has('foo'));                 // true
console.log(searchParams.get('foo'));                 // "bar"

1

Trả về một

const paramsString = 'q=URLUtils.searchParams&topic=api';
const searchParams = new URLSearchParams(paramsString);

// Iterating the search parameters
for (const p of searchParams) {
  console.log(p);
}

console.log(searchParams.has('topic'));               // true
console.log(searchParams.get('topic') === "api");     // true
console.log(searchParams.getAll('topic'));            // ["api"]
console.log(searchParams.get('foo') === null);        // true
console.log(searchParams.append('topic', 'webdev'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams&topic=api&topic=webdev"
console.log(searchParams.set('topic', 'More webdev'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams&topic=More+webdev"
console.log(searchParams.delete('topic'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams"

6 cho phép lặp qua tất cả các khóa của các cặp khóa/giá trị có trong đối tượng này

// Search parameters can also be an object
const paramsObj = {foo: 'bar', baz: 'bar'};
const searchParams = new URLSearchParams(paramsObj);

console.log(searchParams.toString());                 // "foo=bar&baz=bar"
console.log(searchParams.has('foo'));                 // true
console.log(searchParams.get('foo'));                 // "bar"

3

Đặt giá trị được liên kết với tham số tìm kiếm đã cho thành giá trị đã cho. Nếu có một số giá trị, những giá trị khác sẽ bị xóa

// Search parameters can also be an object
const paramsObj = {foo: 'bar', baz: 'bar'};
const searchParams = new URLSearchParams(paramsObj);

console.log(searchParams.toString());                 // "foo=bar&baz=bar"
console.log(searchParams.has('foo'));                 // true
console.log(searchParams.get('foo'));                 // "bar"

4

Sắp xếp tất cả các cặp khóa/giá trị, nếu có, theo khóa của chúng

// Search parameters can also be an object
const paramsObj = {foo: 'bar', baz: 'bar'};
const searchParams = new URLSearchParams(paramsObj);

console.log(searchParams.toString());                 // "foo=bar&baz=bar"
console.log(searchParams.has('foo'));                 // true
console.log(searchParams.get('foo'));                 // "bar"

5

Trả về một chuỗi chứa chuỗi truy vấn phù hợp để sử dụng trong một URL

// Search parameters can also be an object
const paramsObj = {foo: 'bar', baz: 'bar'};
const searchParams = new URLSearchParams(paramsObj);

console.log(searchParams.toString());                 // "foo=bar&baz=bar"
console.log(searchParams.has('foo'));                 // true
console.log(searchParams.get('foo'));                 // "bar"

6

Trả về một

const paramsString = 'q=URLUtils.searchParams&topic=api';
const searchParams = new URLSearchParams(paramsString);

// Iterating the search parameters
for (const p of searchParams) {
  console.log(p);
}

console.log(searchParams.has('topic'));               // true
console.log(searchParams.get('topic') === "api");     // true
console.log(searchParams.getAll('topic'));            // ["api"]
console.log(searchParams.get('foo') === null);        // true
console.log(searchParams.append('topic', 'webdev'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams&topic=api&topic=webdev"
console.log(searchParams.set('topic', 'More webdev'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams&topic=More+webdev"
console.log(searchParams.delete('topic'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams"

6 cho phép lặp qua tất cả các giá trị của các cặp khóa/giá trị có trong đối tượng này

const paramsString = 'q=URLUtils.searchParams&topic=api';
const searchParams = new URLSearchParams(paramsString);

// Iterating the search parameters
for (const p of searchParams) {
  console.log(p);
}

console.log(searchParams.has('topic'));               // true
console.log(searchParams.get('topic') === "api");     // true
console.log(searchParams.getAll('topic'));            // ["api"]
console.log(searchParams.get('foo') === null);        // true
console.log(searchParams.append('topic', 'webdev'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams&topic=api&topic=webdev"
console.log(searchParams.set('topic', 'More webdev'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams&topic=More+webdev"
console.log(searchParams.delete('topic'));
console.log(searchParams.toString());                 // "q=URLUtils.searchParams"

// Search parameters can also be an object
const paramsObj = {foo: 'bar', baz: 'bar'};
const searchParams = new URLSearchParams(paramsObj);

console.log(searchParams.toString());                 // "foo=bar&baz=bar"
console.log(searchParams.has('foo'));                 // true
console.log(searchParams.get('foo'));                 // "bar"

const paramStr = 'foo=bar&foo=baz';
const searchParams = new URLSearchParams(paramStr);

console.log(searchParams.toString());                 // "foo=bar&foo=baz"
console.log(searchParams.has('foo'));                 // true
console.log(searchParams.get('foo'));                 // bar, only returns the first value
console.log(searchParams.getAll('foo'));              // ["bar", "baz"]

Hàm tạo URLSearchParams không phân tích cú pháp URL đầy đủ. Tuy nhiên, nó sẽ loại bỏ dấu đầu dòng

// Search parameters can also be an object
const paramsObj = {foo: 'bar', baz: 'bar'};
const searchParams = new URLSearchParams(paramsObj);

console.log(searchParams.toString());                 // "foo=bar&baz=bar"
console.log(searchParams.has('foo'));                 // true
console.log(searchParams.get('foo'));                 // "bar"

9 khỏi một chuỗi, nếu có

const paramsString1 = 'http://example.com/search?query=%40';
const searchParams1 = new URLSearchParams(paramsString1);

console.log(searchParams1.has('query')); // false
console.log(searchParams1.has('http://example.com/search?query')); // true

console.log(searchParams1.get('query')); // null
console.log(searchParams1.get('http://example.com/search?query')); // "@" (equivalent to decodeURIComponent('%40'))

const paramsString2 = '?query=value';
const searchParams2 = new URLSearchParams(paramsString2);
console.log(searchParams2.has('query')); // true

const url = new URL('http://example.com/search?query=%40');
const searchParams3 = new URLSearchParams(url.search);
console.log(searchParams3.has('query')); // true

Hàm tạo URLSearchParams diễn giải các dấu cộng (

const paramStr = 'foo=bar&foo=baz';
const searchParams = new URLSearchParams(paramStr);

console.log(searchParams.toString());                 // "foo=bar&foo=baz"
console.log(searchParams.has('foo'));                 // true
console.log(searchParams.get('foo'));                 // bar, only returns the first value
console.log(searchParams.getAll('foo'));              // ["bar", "baz"]

1) dưới dạng khoảng trắng, điều này có thể gây ra sự cố

const rawData = '\x13à\x17@\x1F\x80';
const base64Data = btoa(rawData); // 'E+AXQB+A'

const searchParams = new URLSearchParams(`bin=${base64Data}`); // 'bin=E+AXQB+A'
const binQuery = searchParams.get('bin'); // 'E AXQB A', '+' is replaced by spaces

console.log(atob(binQuery) === rawData); // false

Bạn có thể tránh điều này bằng cách mã hóa dữ liệu bằng

const paramStr = 'foo=bar&foo=baz';
const searchParams = new URLSearchParams(paramStr);

console.log(searchParams.toString());                 // "foo=bar&foo=baz"
console.log(searchParams.has('foo'));                 // true
console.log(searchParams.get('foo'));                 // bar, only returns the first value
console.log(searchParams.getAll('foo'));              // ["bar", "baz"]

2

const rawData = '\x13à\x17@\x1F\x80';
const base64Data = btoa(rawData); // 'E+AXQB+A'
const encodedBase64Data = encodeURIComponent(base64Data); // 'E%2BAXQB%2BA'

const searchParams = new URLSearchParams(`bin=${encodedBase64Data}`); // 'bin=E%2BAXQB%2BA'
const binQuery = searchParams.get('bin'); // 'E+AXQB+A'

console.log(atob(binQuery) === rawData); // true

URLSearchParams không phân biệt giữa tham số không có gì sau

const paramStr = 'foo=bar&foo=baz';
const searchParams = new URLSearchParams(paramStr);

console.log(searchParams.toString());                 // "foo=bar&foo=baz"
console.log(searchParams.has('foo'));                 // true
console.log(searchParams.get('foo'));                 // bar, only returns the first value
console.log(searchParams.getAll('foo'));              // ["bar", "baz"]

4 và tham số không có hoàn toàn

const paramStr = 'foo=bar&foo=baz';
const searchParams = new URLSearchParams(paramStr);

console.log(searchParams.toString());                 // "foo=bar&foo=baz"
console.log(searchParams.has('foo'));                 // true
console.log(searchParams.get('foo'));                 // bar, only returns the first value
console.log(searchParams.getAll('foo'));              // ["bar", "baz"]

4

Làm cách nào để chuyển nhiều tham số trong URL trong JavaScript?

Giá trị của tham số tương ứng được đưa ra sau ký hiệu "bằng" (=). Nhiều tham số có thể được chuyển qua URL bằng cách phân tách chúng bằng nhiều dấu "&" .

Làm cách nào để chuyển nhiều chuỗi truy vấn trong JavaScript?

Truyền nhiều tham số cho chuỗi truy vấn . Khi nhấp vào nút (từ mã phía sau), hãy chuyển hướng đến một trang khác có hai tham số Chuỗi truy vấn. use “&” symbol to separate the other field and value combinations. On button click (from code behind), redirect to another page with two QueryString parameters.

Chúng ta có thể chuyển bao nhiêu tham số truy vấn bằng URL?

Trên thực tế, không nên có không quá 5 tham số trong một yêu cầu , nếu không, mỗi tham số sẽ khó kiểm soát từ . Nếu bạn cần chuyển một lượng lớn thông tin, nên sử dụng phương thức POST.

Bạn có thể có nhiều dấu chấm hỏi trong URL không?

Có, nó hợp lệ .

programming javascript

Cách chuyển nhiều tham số truy vấn trong url trong javascript

Tìm thấy một vấn đề nội dung với trang này?

Làm cách nào để chuyển nhiều tham số trong URL trong JavaScript?

Làm cách nào để chuyển nhiều chuỗi truy vấn trong JavaScript?

Chúng ta có thể chuyển bao nhiêu tham số truy vấn bằng URL?

Bạn có thể có nhiều dấu chấm hỏi trong URL không?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội