JavaScript を使用して URL パラメータを動的に変更するにはどうすればよいですか?

JavaScript を使用した URL パラメーターの変更

AJAX を多用する Web アプリケーションでは、URL パラメーターを動的に変更する必要が生じます。次のことを行う必要があるシナリオを考えてみましょう。

• 元の URL: http://server/myapp.php?id=10
• 望ましい結果: http://server/myapp。 php?id=10&enabled=true

これを実現するために、JavaScript は 2 つの堅牢な機能を提供しますoptions:

URL オブジェクト

ECMAScript 6 で導入された URL オブジェクトを使用すると、URL コンポーネントを直接操作できます。次に例を示します。

var url = new URL("http://server/myapp.php?id=10");

// Set a new or update an existing parameter
url.searchParams.set('enabled', 'true');

// Retrieve the modified URL
var modifiedURL = url.href; // http://server/myapp.php?id=10&enabled=true

URLSearchParams インターフェイス

URLSearchParams を使用すると、URL パラメータをキーと値のペアのコレクションとして操作できます。

var url = new URL("http://server/myapp.php?id=10");

// Append a new parameter or update a value
var searchParams = new URLSearchParams(url.search);
searchParams.append('enabled', 'true');

// Update the URL
url.search = searchParams.toString(); // http://server/myapp.php?id=10&enabled=true

実装考慮事項

• どちらのメソッドも、新しいパラメータの追加と既存のパラメータの更新の両方をサポートしています。
• 変更された URL を文字列として取得するには、url.href または url.toString() を使用します。
• ブラウザの互換性の問題が発生した場合は、クエリ文字列やクエリ文字列などのライブラリの使用を検討してください。 js-url.

以上がJavaScript を使用して URL パラメータを動的に変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。