javascript的urlencode

今天在一个原来使用AJAX自动缩小选择内容的项目上突然发现当输入名称时,如果输入有特殊字符&的时候,选择的内容不会发生变化,也就是 说输入的内容在&后面的内容会被截断,经过查证才发现在客户端使用AJAX发送获取到客户端数据的时候,数据内容是没有经过url编码的就是直接 放在url地址上发送了,因为当时考虑到输入的是公司名称,一般不会有特殊字符,也没认真考虑,使用当输入特殊字符&的时候后面的内容就会被截 断。解决办法是对要发送的内容进行url编码,可以使用如下javascript函数:

escape(),encodeURI(),以及encodeURIComponent()。这几种编码所起的作用各不相同。


escape() 方法:

采用ISO Latin字符集对指定的字符串进行编码。所有的空格符、标点符号、特殊字符以及其他非ASCII字符都将被转化成%xx格式的字符编码(xx等于该字符在字符集表里面的编码的16进制数字)。比如,空格符对应的编码是%20。

不会被此方法编码的字符: @ * / +

encodeURI() 方法:

把URI字符串采用UTF-8编码格式转化成escape格式的字符串。

不会被此方法编码的字符:! @ # $& * ( ) = : / ; ? + '

encodeURIComponent() 方法:

把URI字符串采用UTF-8编码格式转化成escape格式的字符串。与encodeURI()相比,这个方法将对更多的字符进行编码,比如 / 等字符。所以如果字符串里面包含了URI的几个部分的话,不能用这个方法来进行编码,否则 / 字符被编码之后URL将显示错误。

不会被此方法编码的字符:! * ( ) '

因此,对于中文字符串来说,如果不希望把字符串编码格式转化成UTF-8格式的(比如原页面和目标页面的charset是一致的时候),只需要使用 escape。如果你的页面是GB2312或者其他的编码,而接受参数的页面是UTF-8编码的,就要采用encodeURI或者 encodeURIComponent。

另外,encodeURI/encodeURIComponent是在javascript1.5之后引进的,escape则在javascript1.0版本就有。

### 如何在 Vue.js 中进行 URL 编码 在 Vue.js 应用程序中执行 URL 编码可以通过 JavaScript 的内置方法 `encodeURIComponent` 和 `decodeURIComponent` 来实现。这些函数可以用于编码和解码 URI 组件。 #### 使用 `encodeURIComponent` 当需要发送数据作为查询参数给服务器时,应该先对其进行编码以确保特殊字符被正确处理: ```javascript // 假设有一个对象包含了要传递的数据 const params = { name: 'John Doe', city: 'New York' }; // 创建一个 URLSearchParams 对象来构建查询字符串 const queryString = new URLSearchParams(params).toString(); console.log(queryString); // 输出: "name=John%20Doe&city=New%20York" ``` 如果只是单独对某个字符串进行编码,则可以直接调用 `encodeURIComponent` 方法: ```javascript let encodedUrlPart = encodeURIComponent('https://example.com/path?query=value'); console.log(encodedUrlPart); // 结果将是安全可用于URL的部分, 特殊字符会被转义[^1] ``` 对于更复杂的场景,比如在 Vuex store 或者组件的方法里操作链接,也可以封装成一个小工具函数方便重复利用: ```javascript function encodeParams(obj) { const str = []; for (let p in obj) { if (obj.hasOwnProperty(p)) { str.push(`${encodeURIComponent(p)}=${encodeURIComponent(obj[p])}`); } } return str.join('&'); } // 使用示例 let dataToEncode = { key: 'value with spaces', anotherKey: '@special!chars?' }; let result = encodeParams(dataToEncode); console.log(result); // 输出类似于 "key=value%20with%20spaces&anotherKey=%40special%21chars%3F" ``` 以上就是在 Vue.js 项目中如何有效地完成 URL 编码的过程。通过这种方式能够保证所生成的 URL 是合法且可解析的。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值