解决JS中Input输入百分号导致数据库保存失败的方案

作者:谷雨时间:2026-10-22 14:43:24浏览:555

本文介绍在JavaScript中处理Input输入框包含百分号时,如何避免数据库保存失败的问题。主要提供两种方案:一是使用ASCII码临时替换百分号与和符号,二是利用JS内置的encodeURI或encodeURIComponent函数对字符串进行URI编码,确保特殊字符正确存储与还原。

问题背景与解决思路

针对该问题,具体的解决思路如下:

第一种方案是通过ASCII码的方式,将输入中的百分号和与符号进行替换处理。

方案一:ASCII码替换法


var remark = $("#remark").val();
 remark.replaceAll("ASCII69","%").replaceAll("ASCII70","&");
//展示时需要对原先替换的进行还原展示
remark.replaceAll("%","ASCII69").replaceAll("&","ASCII70");

第二种方案是在jQuery环境中,利用编码转换机制来实现百分号内容的正确保存。

方案二:URI编码转换法


//encodeURI() 函数可把字符串作为 URI 进行编码。
//对以下在 URI 中具有特殊含义的 ASCII 标点符号,encodeURI() 
//函数是不会进行转义的: , / ? : @ & = + $ 
var uri="my test.php?name=%fff&car=saab#&";
document.write(encodeURI(uri)+ "<br>");

经过处理后的输出结果示例如下:

my%20test.php?name=%25fff&car=saab#&

在上述结果中,百分号被编码为 %25。


//decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。
//提示: 使用 encodeURI() 函数可以对 URI 进行编码。
encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。

需要注意的是,该方法不会对 ASCII 字母和数字进行编码,同时也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ' ( ) 。

对于其他字符(例如 :;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号),系统会将其替换为一个或多个十六进制的转义序列。


var uri="http://w3cschool.cn/my test.php?name=ståle&car=saab";
document.write(encodeURIComponent(uri));
//结果展示:
http%3A%2F%2Fw3cschool.cn%2Fmy
%20test.php%3Fname%3Dst%C3%A5le%26car%3Dsaab 
//decodeURIComponent() 函数可对 encodeURIComponent()
// 函数编码的 URI 进行解码。
//提示:使用 encodeURIComponent() 方法可以对 URI 进行编码。

总结

以上介绍了JavaScript中Input输入百分号导致数据库保存失败的解决方法,希望以上内容能对大家有所帮助。如果读者有任何疑问,欢迎留言,小编会及时回复!

作者最新文章