資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究如何在 AngularJS 中進行 URL 編碼/解碼？
處理 URL 是 Web 開發的基礎組成部分，URL 用於在不同的網頁和頁面之間跳轉。空格、問號和和號等特殊字元在透過網際網路傳輸 URL 時可能會導致問題。例如，如果 URL 包含空格，某些 Web 伺服器可能會出現意外行為，將其視為單獨的命令或引數。
AngularJS 是一個流行的 JavaScript 框架，用於構建單頁應用程式。它提供了幾種內建方法用於 URL 編碼和解碼，使開發人員可以輕鬆地在應用程式中處理 URL。我們將探討在 AngularJS 中進行 URL 編碼和解碼的不同方法，並演示其在實際場景中的應用。
方法 1：編碼
我們可以使用 `encodeURIComponent()` 來編碼 URL。此函式將使我們能夠編碼 URL 中存在的特殊字元。
語法
Var encodedURL = encodeURIComponent("")
該函式會將不可列印的 URL 轉換為 Web 瀏覽器和伺服器普遍接受的格式。
演算法
步驟 1： 從 CDN 匯入 AngularJS 壓縮版 JS 庫。
步驟 2： 使用 `ng-controller` div 屬性包裝需要 AngularJS 功能的程式碼。
步驟 3： 將整個應用程式包裝在 `ng-app` 下。
步驟 4： 使用 `encodeURIComponent()` 函式編碼 URL，並透過將 `ng-click` 繫結到帶有使用者自定義函式的按鈕來呼叫控制器函式。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Encode/Decode URL</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"
crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
</head>
<body ng-app="app">
<div ng-controller="controller">
<h1>Enter the URL you want to encode:</h1>
<input type="text" id="url" />
<button type="submit" ng-click="encodeUrl()">Encode</button>
<h3>The Encoded URL is:</h3>
<h5 id="encodedUrl">{{url2}}</h5>
</div>
<script>
var myApp = angular.module("app", []);
myApp.controller("controller", function($scope) {
$scope.url2 = '';
$scope.encodeUrl = function() {
$scope.url1 = document.getElementById("url").value;
$scope.url2 = encodeURIComponent($scope.url1);
}
});
</script>
<style>
body{
background-color: white;
padding-left: 20%;
padding-right: 20%;
}
h1{
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: xx-large;
background-color:aquamarine;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
border-radius: 15px;
}
input[type="text"]{
padding-top: 15px;
padding-bottom: 15px;
width: 80%;
font-size: 25px;
padding-left: 10px;
border-radius: 15px;
}
button{
padding-top: 15px;
padding-bottom: 15px;
width: 17%;
font-size: 25px;
}
h5{
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: x-large;
background-color:aquamarine;
min-height: 40px;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
border-radius: 15px;
}
</style>
</body>
</html>
方法 2：解碼 URL
解碼是指將基於轉義序列的 URL 替換為正常的基於特殊字元的 URL 的過程。為了使用 AngularJS 實現這一點，我們有 `decodeURIComponent()` 函式，它接受編碼的 URL 作為輸入，並返回相同的解碼序列。
語法
Var decodedURL = decodeURIComponent("")
在此程式碼段中，`decodeURIComponent` 將“`
演算法
步驟 1： 從 CDN 匯入 AngularJS 壓縮版 JS 庫。
步驟 2： 使用 `ng-controller` div 屬性包裝需要 AngularJS 功能的程式碼。
步驟 3： 將整個應用程式包裝在 `ng-app` 下。
步驟 4： 使用 `decodeURIComponent()` 函式解碼 URL，並透過將 `ng-click` 繫結到帶有使用者自定義函式的按鈕來呼叫控制器函式。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Encode/Decode URL</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"
crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
</head>
<body ng-app="app">
<div ng-controller="controller">
<h1>Enter the encoded URL you want to decode:</h1>
<input type="text" id="url" />
<button type="submit" ng-click="encodeUrl()">Decode</button>
<h3>The decoded URL is:</h3>
<h5 id="encodedUrl">{{url2}}</h5>
</div>
<script>
var myApp = angular.module("app", []);
myApp.controller("controller", function($scope) {
$scope.url2 = '';
$scope.encodeUrl = function() {
$scope.url1 = document.getElementById("url").value;
$scope.url2 = decodeURIComponent($scope.url1);
}
});
</script>
<style>
body{
background-color: white;
padding-left: 20%;
padding-right: 20%;
}
h1{
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: xx-large;
background-color:aquamarine;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
border-radius: 15px;
}
input[type="text"]{
padding-top: 15px;
padding-bottom: 15px;
width: 80%;
font-size: 25px;
padding-left: 10px;
border-radius: 15px;
}
button{
padding-top: 15px;
padding-bottom: 15px;
width: 17%;
font-size: 25px;
}
h5{
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: x-large;
background-color:aquamarine;
min-height: 40px;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
border-radius: 15px;
}
</style>
</body>
</html>
結論
為了確保應用程式的正常執行，Web 開發人員必須瞭解 URL 編碼和解碼技術。URL 編碼和解碼提供了一種安全可靠的解決方案來處理 URL 中可能存在的各種特殊字元，並解決這些字元在網際網路上傳輸時可能導致的問題。
AngularJS 用於建立單頁應用程式。透過實施這些方法，您可以確保使用者在您的 AngularJS 應用程式中獲得流暢的體驗和無障礙的導航。
998 次瀏覽
