Hướng dẫn query string javascript - chuỗi truy vấn javascript
Đoạn code snippet sau sử dụng JavaScript để đọc các parameter truyền vào query string trên URL. Cách 1: Dùng Vanilla JavaScriptƯu điểm của cách này là “portable”, tương thích hầu như với tất cả trình duyệt. Đoạn mã sau của tôi còn xử lý cả array lẫn object parameter. var queryString = window.location.search .substring(1) // strip the leading '?' .split('#')[0], // remove the part after hash params = queryString.split('&'), searchParams = {}; // output for (var i = 0; i < params.length; i++) { var pair = params[i].split('='), name = pair[0], value = typeof (pair[1]) === 'undefined' ? true : decodeURIComponent(pair[1]); if (name.match(/\[.*\]$/)) { // array type parameter var key = name.replace(/\[.*\]/, ''), index = /\[(.*)\]/.exec(name)[1]; // convert index to integer if possible if ( /^[0-9]+$/.test(index) ) index = parseInt(index); // add a new key if it does not exist if (!searchParams[key]) { if ( isNaN(index) ) searchParams[key] = {}; else searchParams[key] = {}; } if ( index === '' ) searchParams[key].push(value); else searchParams[key][index] = value; } else { if (!searchParams[name]) searchParams[name] = value; // duplicated key found? turn it into array else if ('string' === typeof searchParams[name]) searchParams[name] = [searchParams[name], value]; else searchParams[name].push(value); } } // ?topic=test%20query%20string&version=1.0 console.log( searchParams["topic"] ); // "test query string" console.log( searchParams["version"] ); // "1.0" Hoặc nếu không muốn quá phức tạp như trên (không có array hay object) thì hãy dùng phiên bản rút gọn như sau cho nhanh. var queryString = window.location.search.substring(1), params = queryString.split('&'), searchParams = {}; for (var i = 0; i < params.length; i++) { var pair = params[i].split('='); searchParams[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || ''); } Cách 2: Sử dụng URLSearchParamsURLSearchParams là built-in interface để xử lý query string trên URL, có nhiều tính năng đáng chú ý. Tuy nhiên đây là interface tương đối mới và không tương thích với Microsoft Internet Explorer và Microsoft Edge (…cho đến khi Edge dùng WebKit). var queryString = window.location.search; var searchParams = new URLSearchParams(queryString); // ?topic=test%20query%20string&version=1.0 console.log( searchParams.get("topic") ); // "test query string" console.log( searchParams.get("version") ); // "1.0"
1. Query parameters là gì?Hôm nay chúng ta sẽ tìm hiểu về query parameters trong NodeJS. Vậy nó là gì? Query parameters là một chuỗi truy vấn được client gửi lên server. Server sẽ nhận các thông tin này để xử lý và trả về một kết quả phù hợp với truy vấn được gửi lên 2. Query trong URLCác chuỗi truy vấn có thể được đính kèm trong một URL. Trong URL, các truy vấn sẽ bắt đầu từ sau dấu ? , mỗi truy vấn là một cặp {key:value}, các cặp ngăn cách nhau bởi kí tự & tạo thành một object gọi là param và được gửi lên server. Ví dụ:? , mỗi truy vấn là một cặp {key:value}, các cặp ngăn cách nhau bởi kí tự & tạo thành một object gọi là param và được gửi lên server. Ví dụ:
3. Xây dựng chức năng tìm kiếm3.1. Xây dựng chức năng tìm kiếm user theo tên
Ở trên mình đã viết hàm theo chuẩn ES6, các bạn có thể tìm hiểu thêm nhé, hoặc viết như các bài học trước cũng được
Nhắc lại một chút kiến thức cũ về HTML
Hãy thử nhập một cái tên nào đó, ví dụ "User1", Inspect trang web và chọn tab Network, bạn sẽ thấy một request được gửi lên Bây giờ, ta sẽ xem server đã nhận được request này chưa nhé!!! Đối tượng req cung cấp cho ta một thuộc tính query để lấy được query mà client gửi lên. Hãy thử in nó ra nhé!!!query để lấy được query mà client gửi lên. Hãy thử in nó ra nhé!!!
Tại của sổ cmd, bạn sẽ thấy kết quả như sau:
Như vậy là server đã nhận được yêu cầu từ client, Bây giờ ta sẽ thực hiện tìm kiếm user. Ở bài trước, mình đã khai báo một mảng array gồm các user trong route '/users'. Để các route khác có thể sử dụng, ta sẽ đưa array này ra ngoài. Mã nguồn file app.js bây giờ sẽ như sau:
Tiếp tục, ta sẽ xử lý việc tìm kiếm. Việc này bây giờ trở nên đơn giản, vì các bạn đã học JavaScript, và đã biết cách tìm "một chuỗi con trong chuỗi cha" rồi. Nên mình sẽ không giải thích chi tiết nữa nhé!!! Phần này các bạn có thể tìm hiểu một cách dễ dàng
Như vậy là hoàn thành việc tìm kiếm và trả về kết quả. Ta sẽ hiệu chỉnh lại mã HTML một chút ứng với 2 trường hợp
var queryString = window.location.search.substring(1), params = queryString.split('&'), searchParams = {}; for (var i = 0; i < params.length; i++) { var pair = params[i].split('='); searchParams[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || ''); }0 Xong!!! Các bạn hãy thử test chức năng này nhé 3.2 Xây dựng chức năng tìm kiếm user theo tên và theo tuổi
var queryString = window.location.search.substring(1), params = queryString.split('&'), searchParams = {}; for (var i = 0; i < params.length; i++) { var pair = params[i].split('='); searchParams[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || ''); }1 Ta sẽ thấy có 2 user cùng có name là "User1", nhưng tuổi (age) khác nhau. Trường email là trường khóa chính, để phân biệt giữa các user
var queryString = window.location.search.substring(1), params = queryString.split('&'), searchParams = {}; for (var i = 0; i < params.length; i++) { var pair = params[i].split('='); searchParams[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || ''); }2
var queryString = window.location.search.substring(1), params = queryString.split('&'), searchParams = {}; for (var i = 0; i < params.length; i++) { var pair = params[i].split('='); searchParams[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || ''); }3 Hãy thử gửi một request mới lên nhé. Nó sẽ bao gồm cả name và age cần tìm kiếm Cuối cùng, chúng ta đã làm được chức năng tìm kiếm. Các bạn có thể tự sáng tạo và nâng cấp chức năng này để hoàn thiện hơn. Thông qua bài này, ta đã học thêm được về req.query cũng như biết thêm về cú pháp if...else trong pugreq.query cũng như biết thêm về cú pháp if...else trong pug Hẹn gặp lại các bạn trong các bài viết tiếp theo !!! |