Truyền mảng trong chuỗi truy vấn JavaScript

Để truyền một mảng dưới dạng tham số URL, bạn có thể sử dụng hàm tích hợp php http_build_query(). http_build_query() trả về cho bạn chuỗi truy vấn được mã hóa URL

ví dụ 1

Sử dụng http_build_query()

Sau đây là một ví dụ về phương pháp này -

$data = array( 'field1' => 'test', 'field2' => 'xyz' ); echo http_build_query($data) . "
";

đầu ra

Đầu ra của đoạn mã trên là -

field1=test&field2=xyz

Ví dụ sau đây cho thấy cách sử dụng http_build_query() khi bạn có một mảng và cùng một nhu cầu chuyển thành tham số URL

"abc", "t2" => "xyz" ); echo $yourfinalurl = $yoururl."?".http_build_query($params); } }

Đầu ra của đoạn mã trên là -

https://www.test.com?t1=abc&t2=xyz

ví dụ 2

Bạn có thể sử dụng hàm tích hợp serialize() và urlencode PHP để chuyển một mảng dưới dạng tham số URL

Hàm serialize() sẽ trả về một chuỗi bit cho đầu vào đã cho và urlencode sẽ mã hóa lại các giá trị cũng như các ký tự đặc biệt có sẵn trong đó

"abc", "t2" => "xyz" ); $firstserialize = serialize($params); echo $yourfinalurl = $yoururl."?".urlencode($firstserialize); } }

đầu ra

Đầu ra của đoạn mã trên là -

https://www.test.com?a%3A2%3A%7Bs%3A2%3A%22t1%22%3Bs%3A3%3A%22abc%22%3Bs%3A2%3A%22t2%22%3Bs%3A3%3A%22xyz%22%3B%7D

ví dụ 3

Sử dụng các hàm http_build_query() và urlencode()

  • urlencode() − nó sẽ mã hóa các giá trị thành một chuỗi

  • http_build_query() − trả về cho bạn chuỗi truy vấn được mã hóa URL

"abc", "t2" => "xyz" ); echo $yourfinalurl = $yoururl."?".urlencode(http_build_query($params)); } }

đầu ra

Đầu ra của đoạn mã trên là -

https://www.test.com?t1%3Dabc%26t2%3Dxyz

Ví dụ 4

Sử dụng urlencode() và jsonencode()

Sau đây là một ví dụ để truyền một mảng dưới dạng tham số URL bằng cách sử dụng các hàm jsconencode() và urlencode() –

Trả lời. Không có cách nào "đúng". Nó phụ thuộc khá nhiều vào môi trường thời gian chạy của bạn (ngôn ngữ, khung, nền tảng). Hãy xem một số môi trường phổ biến xử lý nó như thế nào

PHP

Trong PHP, bạn có thể mã hóa bằng http_build_query

________số 8_______

(Ghi chú. Tôi đang

$params = [
  'dog' => ['name' => 'John', 'age' => 12], 
  'user_ids' => [1, 3]
];
urldecode(http_build_query($params));
// Gives you: "dog[name]=John&dog[age]=12&user_ids[0]=1&user_ids[1]=3"
3-ing nên đầu ra rất dễ đọc. )

Vì vậy, PHP làm phẳng khá nhiều mảng/đối tượng bằng các khóa được lồng trong dấu ngoặc vuông. Hỗ trợ mảng/đối tượng đa chiều

$params = [
  'dogs' => [
    ['name' => 'John', 'age' => 12], 
    ['name' => 'Kim', 'age' => 13], 
  ]
];
urldecode(http_build_query($params));
// Gives you: "dogs[0][name]=John&dogs[0][age]=12&dogs[1][name]=Kim&dogs[1][age]=13"

Làm thế nào về giải mã? . Nó hỗ trợ định dạng tương tự được trả về

$params = [
  'dog' => ['name' => 'John', 'age' => 12], 
  'user_ids' => [1, 3]
];
urldecode(http_build_query($params));
// Gives you: "dog[name]=John&dog[age]=12&user_ids[0]=1&user_ids[1]=3"
4

$queryString = "dog[name]=John&dog[age]=12&user_ids[0]=1&user_ids[1]=3";
parse_str($queryString, $result);
// $result will be:
// [
//  'dog' => ['name' => 'John', 'age' => 12], 
//  'user_ids' => ['1', '3']
// ];

$params = [
  'dog' => ['name' => 'John', 'age' => 12], 
  'user_ids' => [1, 3]
];
urldecode(http_build_query($params));
// Gives you: "dog[name]=John&dog[age]=12&user_ids[0]=1&user_ids[1]=3"
5 cũng không phiền nếu bạn bỏ qua các phím số nguyên cho danh sách (tức là mảng, không phải đối tượng)

$queryString = "dog[name]=John&dog[age]=12&user_ids[]=1&user_ids[]=3";
parse_str($queryString, $result);
// Same thing! $result will be:
// [
//  'dog' => ['name' => 'John', 'age' => 12], 
//  'user_ids' => ['1', '3']
// ];

Khá đơn giản, phải không?

JavaScript

JavaScript trong trình duyệt cung cấp cho bạn API tuyệt vời này có tên là URLSearchParams, trong khi Node. js cung cấp cho bạn mô-đun chuỗi truy vấn. Hãy thử mã hóa

Đầu tiên trong trình duyệt

let params = {
  dog: {
    name: 'John',
    age: 12
  },
  user_ids: [1, 3]
};
let query = new URLSearchParams(params);
decodeURIComponent(query.toString());
// Gives you: "dog=[object+Object]&user_ids=1,3"

"[đối tượng+Đối tượng]"? . Nó chuyển giá trị được cung cấp của bạn thành một chuỗi.

$params = [
  'dog' => ['name' => 'John', 'age' => 12], 
  'user_ids' => [1, 3]
];
urldecode(http_build_query($params));
// Gives you: "dog[name]=John&dog[age]=12&user_ids[0]=1&user_ids[1]=3"
6 của một đối tượng chung trả về "[đối tượng đối tượng]"

Cũng. có vẻ như nó đã xử lý tham số mảng, nhưng không phải vậy.

$params = [
  'dog' => ['name' => 'John', 'age' => 12], 
  'user_ids' => [1, 3]
];
urldecode(http_build_query($params));
// Gives you: "dog[name]=John&dog[age]=12&user_ids[0]=1&user_ids[1]=3"
6 của một mảng sẽ trả về các giá trị được nối bằng dấu phẩy. Để kiểm tra điều này, nếu bạn thử gọi
$params = [
  'dog' => ['name' => 'John', 'age' => 12], 
  'user_ids' => [1, 3]
];
urldecode(http_build_query($params));
// Gives you: "dog[name]=John&dog[age]=12&user_ids[0]=1&user_ids[1]=3"
8, bạn sẽ nhận được một mảng chứa chuỗi "1,3" dưới dạng một mục duy nhất, thay vì một mảng có hai mục riêng biệt

Tuy nhiên, URLSearchParams có hỗ trợ mảng. Nhưng bạn cần phải "nối" chúng cùng một lúc. Trong trường hợp của chúng tôi, đây sẽ là

let query = new URLSearchParams();
query.append('user_ids', 1);
query.append('user_ids', 3);
decodeURIComponent(query.toString());
// Gives you: "user_ids=1&user_ids=3"
query.getAll('user_ids');
// Gives you: [1, 3] (an actual array)

Tôi chắc chắn không thích điều đó. 😕 Ngại gì mà đến Node. js

let qs = require('querystring');
let params = {
  dog: {
    name: 'John',
    age: 12
  },
  user_ids: [1, 3]
};
qs.stringify(params);
// Gives you: "dog=&user_ids=1&user_ids=3"

Hà. Có vẻ như nó chỉ bỏ qua đối tượng

$params = [
  'dog' => ['name' => 'John', 'age' => 12], 
  'user_ids' => [1, 3]
];
urldecode(http_build_query($params));
// Gives you: "dog[name]=John&dog[age]=12&user_ids[0]=1&user_ids[1]=3"
9. Vâng, các tài liệu giải thích

Nó tuần tự hóa các loại giá trị sau được truyền trong obj.

$params = [
  'dogs' => [
    ['name' => 'John', 'age' => 12], 
    ['name' => 'Kim', 'age' => 13], 
  ]
];
urldecode(http_build_query($params));
// Gives you: "dogs[0][name]=John&dogs[0][age]=12&dogs[1][name]=Kim&dogs[1][age]=13"
0. Bất kỳ giá trị đầu vào nào khác sẽ bị ép thành chuỗi trống

chào. Tốt hơn

$params = [
  'dogs' => [
    ['name' => 'John', 'age' => 12], 
    ['name' => 'Kim', 'age' => 13], 
  ]
];
urldecode(http_build_query($params));
// Gives you: "dogs[0][name]=John&dogs[0][age]=12&dogs[1][name]=Kim&dogs[1][age]=13"
1, tôi đoán vậy. ¯\_(ツ)_/¯

Đối với mảng,

$params = [
  'dogs' => [
    ['name' => 'John', 'age' => 12], 
    ['name' => 'Kim', 'age' => 13], 
  ]
];
urldecode(http_build_query($params));
// Gives you: "dogs[0][name]=John&dogs[0][age]=12&dogs[1][name]=Kim&dogs[1][age]=13"
2 tuân theo URLSearchParams, chỉ có điều là nó không yêu cầu bạn nối thêm các mục riêng lẻ

Được rồi, còn việc giải mã thì sao?

trình duyệt

let query = new URLSearchParams("user_ids=1&user_ids=3");
query.getAll('user_ids');

Nút

qs.parse("dog=&user_ids=1&user_ids=3");
// Gives you: { dog: '', user_ids: [ '1', '3' ] }

Hành vi khá giống nhau

Bạn có thể thử giải mã chuỗi truy vấn kiểu PHP, nhưng nó sẽ không hoạt động theo cách bạn mong đợi. Tất cả các khóa sẽ được trả về nguyên trạng

$params = [
  'dog' => ['name' => 'John', 'age' => 12], 
  'user_ids' => [1, 3]
];
urldecode(http_build_query($params));
// Gives you: "dog[name]=John&dog[age]=12&user_ids[0]=1&user_ids[1]=3"
0
$params = [
  'dog' => ['name' => 'John', 'age' => 12], 
  'user_ids' => [1, 3]
];
urldecode(http_build_query($params));
// Gives you: "dog[name]=John&dog[age]=12&user_ids[0]=1&user_ids[1]=3"
1

Nếu bạn thử phân tích cú pháp các tham số truy vấn mảng kiểu JS bằng PHP, nó cũng bị lỗi. Bạn chỉ nhận được giá trị cuối cùng

$params = [
  'dog' => ['name' => 'John', 'age' => 12], 
  'user_ids' => [1, 3]
];
urldecode(http_build_query($params));
// Gives you: "dog[name]=John&dog[age]=12&user_ids[0]=1&user_ids[1]=3"
2

Nhưng có một sự thay đổi. . Vì vậy, đó là hai cách khác nhau (với sự khác biệt tinh tế) để làm việc với các tham số truy vấn trong Node. js

Và hãy nhớ những gì tôi đã nói về nó là khuôn khổ cụ thể? . js không hỗ trợ các tham số truy vấn kiểu PHP, nhưng Express (một Node. js) không. Express phân tích chính xác

$params = [
  'dogs' => [
    ['name' => 'John', 'age' => 12], 
    ['name' => 'Kim', 'age' => 13], 
  ]
];
urldecode(http_build_query($params));
// Gives you: "dogs[0][name]=John&dogs[0][age]=12&dogs[1][name]=Kim&dogs[1][age]=13"
3 thành một đối tượng và một mảng. Vì vậy, yeah, nó không chỉ là một thứ ngôn ngữ

Ồ, và đây chỉ là một số cách tiếp cận khả thi. Có những thứ khác mà tôi không đề cập đến, như mã hóa JSON đối tượng và đặt nó vào URL

Làm gì khi xây dựng backend?

Trước hết, có lẽ nên thông minh để tránh phải sử dụng các tham số truy vấn mảng hoặc đối tượng khi bạn có thể. Điều đó nói rằng, đôi khi bạn không thể. Trong trường hợp như vậy, cách tốt nhất của bạn là chọn một kế hoạch, truyền đạt nó và bám sát nó.

Để chọn một lược đồ, hãy tìm hiểu xem hệ thống nào hoạt động trong khuôn khổ hoặc ngôn ngữ của bạn bằng cách chạy các bài kiểm tra đơn giản như các bài kiểm tra ở trên👆. (Đừng quên test từ frontend

nếu đó là cách dịch vụ của bạn sẽ được sử dụng. )

Ngoài ra, bạn có thể lập sơ đồ của riêng mình. Đó thường không phải là một ý tưởng hay, nhưng sẽ tốt hơn nếu nhu cầu của bạn đơn giản. Chẳng hạn, nếu bạn chỉ cần một danh sách các chuỗi, bạn có thể chỉ định tham số là một chuỗi thông thường được phân tách bằng dấu phẩy và trên máy chủ của bạn, bạn cố tình tách chuỗi bằng dấu phẩy để tạo mảng của mình. Bằng cách đó, bạn không phải lo lắng về khuôn khổ

Và sau đó giao tiếp. Cho người tiêu dùng của bạn biết bạn đang sử dụng định dạng nào. Nếu bạn đang xây dựng một API, hãy đưa ra các ví dụ trong tài liệu API của bạn. Bằng cách đó, họ có thể biết không dựa vào bất kỳ khuôn khổ nào mà khách hàng của họ được xây dựng trên đó mà tự xử lý việc mã hóa khung này

Cuối cùng, dính vào nó. Dù bạn chọn sơ đồ nào, hãy nhất quán với nó trong toàn bộ chương trình phụ trợ của bạn


Này👋. Tôi viết về những thách thức kỹ thuật phần mềm thú vị. Bạn muốn được cập nhật khi tôi xuất bản bài viết mới? . ứng dụng/blog. shalvah. tôi

(Lời thú tội. Tôi đã xây dựng xúc tu. ✋ Nó giúp bạn giữ hộp thư đến sạch sẽ bằng cách kết hợp các blog yêu thích của bạn vào một bản tin hàng tuần. )

Chúng ta có thể chuyển mảng trong chuỗi truy vấn JavaScript không?

Bạn có thể truyền dữ liệu, bao gồm cả mảng qua Chuỗi truy vấn khi sử dụng Trình quản lý Điều hướng để điều hướng đến một trang khác trong ứng dụng Blazor của bạn.

Làm cách nào để chuyển một mảng trong chuỗi truy vấn trong HttpClient?

Làm cách nào để chuyển một mảng trong chuỗi truy vấn trong HttpClient? .
để params = new HttpParams(); . append('diễn viên[]', ['Elvis', 'Jane', 'Frances']); . .
để params = new HttpParams(). set('diễn viên[]', ['Elvis', 'Jane', 'Frances']); . .
để Params = new HttpParams();

Chúng ta có thể chuyển mảng trong tham số không?

Mảng có thể được truyền dưới dạng đối số cho tham số phương thức . Vì mảng là kiểu tham chiếu nên phương thức có thể thay đổi giá trị của các phần tử.

Làm cách nào để chuyển dữ liệu mảng trong URL trong JavaScript?

myArray = ['aaa', 'bbb', 'ccc']; . attr({"href". '/myLink? array=' + myArray});