javascript url 傳遞參數中文亂碼問題解決方案

在 JavaScript 中,傳遞 URL 參數時,如果參數包含中文字符,可能會出現亂碼問題。解決這一問題可以使用 encodeURIComponent 和 decodeURIComponent 函數。這些函數會對 URL 參數進行編碼和解碼,確保特殊字符(包括中文字符)能夠被正確傳遞和解析。

以下是一個完整的解決方案示例:

?1. 傳遞參數(編碼)

在傳遞 URL 參數時,可以使用 encodeURIComponent 對參數進行編碼:

javascript
// 中文參數
let param = "中文測試";

// 編碼參數
let encodedParam = encodeURIComponent(param);

// 構建URL
let url = https://example.com?param=${encodedParam};
console.log(url); ?// 輸出:https://example.com?param=%E4%B8%AD%E6%96%87%E6%B5%8B%E8%AF%95


?2. 接收參數(解碼)

在接收 URL 參數時,可以使用 decodeURIComponent 對參數進行解碼:

javascript
// 獲取URL參數
let urlParams = new URLSearchParams(window.location.search);

// 獲取并解碼參數
let decodedParam = decodeURIComponent(urlParams.get('param'));
console.log(decodedParam); ?// 輸出:中文測試


?示例代碼

下面是一個完整的示例,包括傳遞和接收中文參數:

html
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>URL Parameter Example</title>
</head>
<body>
? ? <script>
? ? ? ? // 示例傳遞參數
? ? ? ? let param = "中文測試";
? ? ? ? let encodedParam = encodeURIComponent(param);
? ? ? ? let url = https://example.com?param=${encodedParam};
? ? ? ? console.log("Encoded URL: " + url); ?// 輸出編碼后的URL

? ? ? ? // 示例接收參數(假設當前URL包含參數)
? ? ? ? let currentUrlParams = new URLSearchParams(window.location.search);
? ? ? ? let receivedParam = decodeURIComponent(currentUrlParams.get('param'));
? ? ? ? console.log("Decoded Parameter: " + receivedParam); ?// 輸出解碼后的參數
? ? </script>
</body>
</html>

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/39870.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/39870.shtml
英文地址,請注明出處:http://en.pswp.cn/web/39870.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

填報高考志愿,怎樣正確地選擇大學專業?

大學專業的選擇&#xff0c;會關系到未來幾年甚至一輩子的發展方向。這也是為什么很多人結束高考之后就開始愁眉苦臉&#xff0c;因為他們不知道應該如何選擇大學專業&#xff0c;生怕一個錯誤的決定會影響自己一生。 毋庸置疑&#xff0c;在面對這種選擇的時候&#xff0c;我…

全網最簡單的Java設計模式【三】工廠方法模式詳解

Java工廠方法模式詳解 一、概念介紹 1. 什么是工廠方法模式&#xff1f; 工廠方法模式&#xff08;Factory Method Pattern&#xff09;是一種創建型設計模式&#xff0c;它允許定義一個接口或抽象類來創建對象&#xff0c;但將實際對象的實例化延遲到子類中實現。工廠方法模…

mybatis mapper.xml 比較運算符(大于|小于|等于)的寫法: 轉義和<![CDATA[]]>

文章目錄 引言I 使用xml 原生轉義的方式進行轉義II 使用 <![CDATA[ 內容 ]]>引言 應用場景:查詢時間范圍 背景:在 *.xml 中使用常規的 < > = <= >= 會與xml的語法存在沖突 <![CDATA[]]> 比 轉義符 來的繁瑣 <![CDATA[]]> 表示xml解析器忽略…

c++ 聯合(Union)的特性和使用

聯合&#xff08;Union&#xff09;是一種特殊的數據結構&#xff0c;允許在同一內存位置存儲不同的數據類型。一個 union 可以有多個數據成員&#xff0c;但是在任意時刻只有一個數據成員可以有值。當某個成員被賦值后其他成員變為未定義狀態。以下是聯合的主要特點和使用方式…

工程安全監測儀器振弦采集儀提升工程質量和安全水平

工程安全監測儀器振弦采集儀提升工程質量和安全水平 振弦采集儀是一種重要的工程安全監測儀器&#xff0c;可以用來監測建筑物、橋梁、隧道等工程結構的振動情況。它通過測量結構物的振動頻率和振幅&#xff0c;可以提供關鍵的數據用于評估結構的安全性和穩定性。振弦采集儀在…

無法解析的外部符號 _imp_XXX

問題解決&#xff1a;無法解析的外部符號 _imp_XXXXXXXXX-CSDN博客 解決方法 1. 打開網站&#xff0c;搜索相關函數&#xff0c;找到其關聯庫lib 2. 程序指定鏈接到庫。注意該語法是msvc編譯器特有特性。 #pragma comment(lib, "xxxx.lib")

【項目實踐】貪吃蛇

一、游戲效果展示二、博客目標三、使用到的知識四、Win32 API 介紹 4.1 WIn32 API4.2 控制臺程序4.3 控制屏幕上的坐標COORD4.4 GetStdHandle4.5 GetConsoleCursorInfo 4.5.1 CONSOLE_CURSOR_INFO 4.6 SetConsoleCursorInfo4.7 SetConsoleCursorPosition4.8 GetAsyncKeyState 五…

秋招突擊——7/4——復習{}——新作{最長公共子序列、編輯距離}

文章目錄 引言復習新作1143-最長公共子序列個人實現 參考實現編輯距離個人實現參考實現 貪心——買股票的最佳時機個人實現參考實現 貪心——55-跳躍游戲個人實現參考做法 總結 引言 昨天主要是面試&#xff0c;然后剩下的時間都是用來對面試中不會的東西進行查漏補缺&#xff…

dolphinscheduler-筆記2

springboot集成dolphinscheduler 說明 為了避免對DolphinScheduler產生過度依賴&#xff0c;實踐中通常不會全面采用其內置的所有任務節點類型。相反&#xff0c;會選擇性地利用DolphinScheduler的HTTP任務節點功能&#xff0c;以此作為工作流執行管理的橋梁&#xff0c;對接…

項目管理實用表格與應用【項目文件資料分享】

項目管理基礎知識 項目管理可分為五大過程組&#xff08;啟動、規劃、執行、監控、收尾&#xff09;十大知識領域&#xff0c;其中包含49個子過程 項目十大知識領域分為&#xff1a;項目整合管理、項目范圍管理、項目進度管理、項目成本管理、項目質量管理、項目資源管理、項目…

標量場與向量場

標量場與向量場 flyfish 場 是一個函數&#xff0c;它把空間中的每一點關聯到一個數值或一個數學對象&#xff08;如向量、張量等&#xff09;。在物理學中&#xff0c;場可以描述許多物理現象&#xff0c;例如溫度分布、電場、磁場、壓力場等。 標量場 標量場 是一個函數&…

【BUUCTF-PWN】9-ciscn_2019_n_8

不屬于棧溢出&#xff0c;應該是比較簡單的pwn&#xff0c;看懂代碼邏輯使用pwntools 32位&#xff0c;開啟了Stack、NX、PIE保護 執行效果&#xff1a; main函數 使用通義千問詢問的代碼解讀&#xff1a; 即當var數組的第十四個元素是17就可以 這里可以用兩種payload…

Python使用總結之應用程序有哪些配置方式?配置方式對比

Python使用總結之應用程序有哪些配置方式&#xff1f;配置方式對比 在Python程序中&#xff0c;管理配置信息的方法有很多&#xff0c;常見的方式包括使用INI文件、JSON文件、YAML文件、環境變量、以及直接在代碼中定義配置。每種方式都有其獨特的優勢和適用場景。 1. INI文件 …

天環公益原創開發進度網站源碼帶后臺免費分享

天環公益計劃首發原創開發進度網站源碼帶后臺免費分享 后臺地址是&#xff1a;admin.php 后臺沒有賬號密碼 這個沒有數據庫 有能力的可以自己改 天環公益原創開發進度網站 帶后臺

ARM架構服務器/虛擬機編譯部署Tendis(國產化替換Redis)

文章目錄 一、概述 二、安裝相關組件 三、下載最新的Tendis源碼 四、編譯源碼 五、啟動Tendis 六、使用Docker鏡像部署Tendis 七、常見報錯 八、參考鏈接 一、概述 國產化項目要求盡可能使用國產組件,尤其是已存在的項目,需要替換已有組件,比如使用Tendis替換Redis。…

微軟中國全面撤店!我們到現場看了看

ChatGPT狂飆160天&#xff0c;世界已經不是之前的樣子。 更多資源歡迎關注 7月1日&#xff0c;微軟官方發言人向媒體表示&#xff1a; “微軟不斷評估其零售策略以滿足我們的客戶不斷變化的需求&#xff0c;微軟已決定對中國大陸市場的渠道進行整合。客戶仍可通過零售合作伙伴…

校園失物招領系統帶萬字文檔java項目失物招領管理系統java課程設計java畢業設計springboot vue

文章目錄 校園失物招領系統一、項目演示二、項目介紹三、萬字字項目文檔四、部分功能截圖五、部分代碼展示六、底部獲取項目源碼帶萬字文檔&#xff08;9.9&#xffe5;帶走&#xff09; 校園失物招領系統 一、項目演示 校園失物招領系統 二、項目介紹 語言: Java 數據庫&…

JAVA導出數據庫字典到Excel

文章目錄 1、查詢某張表字段信息2、TableVo接收sql查詢得到的數據3、excel導出4、導出案例 1、查詢某張表字段信息 select column_name as columnName, -- 字段名 COLUMN_DEFAULT as colDefault, -- 默認值 column_key as columnKey, -- PRI-主鍵&#xff0c;UNI-唯一鍵&…

【Tools】 Postman 接口測試工具詳解

那年夏天我和你躲在 這一大片寧靜的海 直到后來我們都還在 對這個世界充滿期待 今年冬天你已經不在 我的心空出了一塊 很高興遇見你 讓我終究明白 回憶比真實精彩 &#x1f3b5; 王心凌《那年夏天寧靜的海》 在現代軟件開發中&#xff0c;API&#xff08;…

【Python實戰因果推斷】21_傾向分1

目錄 The Impact of Management Training Adjusting with Regression 之前學習了如何使用線性回歸調整混雜因素。此外&#xff0c;還向您介紹了通過正交化去偏差的概念&#xff0c;這是目前最有用的偏差調整技術之一。不過&#xff0c;您還需要學習另一種技術--傾向加權。這種…