JQuery Ajax 参数含有特殊字符

背景

  简单描述下问题出现的背景，在进行JQuery Ajax 开发时，发送一个请求，参数中有模糊查询的SQL语句，包含了“%”。

$.ajax({
    url:'127.0.0.1/test',
    type:'POST',
    data:"condition=LIKE '%A%'",
    success:function(data){
    }
});

  发现在请求提交后，服务器无法正常接收到 condition 的值。

分析

  URL中包含一些特殊字符，有着特殊的用途，比如‘？’是用来区分请求的地址和参数的。如果直接在请求地址中传送‘？’，服务器端是不认识它的，并不能保持原值接收。

特殊符号	实际含义	转义编码
+	空格	%2B
空格	不允许出现	%20
/	分隔目录和子目录	%2F
?	分隔实际的 URL 和参数	%3F
%	指定特殊字符	%25
#	书签	%23
&	参数间的分隔符	%26
=	URL 中指定参数的值	%3D

  如果想要服务器识别的URL是：127.0.0.1/test?condition=LIKE ‘%A%’，那么需要在浏览器中输入：127.0.0.1/test?condition=LIKE ‘%25A%25’。

解决方案

  那么我们如果使用AJAX，该怎么处理？

• 最简单粗暴的方式是：data: “condition= LIKE ‘%25A%25’”,手动转义参数字符串。但是如果参数是变化的，并且存在其他的特殊字符，这样处理并不灵活。

• JS中提供了encodeURIComponent()函数，对URL的参数进行转义编码处理，可以这样处理：data: “condition= ” + encodeURIComponent(“LIKE ‘%A%’”)。

• 使用json数据格式传递参数，JQuery 会自动调用 encodeURIComponent() 对参数进行转码。如：data:{‘condition’: “LIKE ‘%A%’”}。

相关

  JavaScript对URL的转义编码处理提供了两个方法：

• encodeURIComponent()：不会对 ASCII字母、数字、~!@#$&*()=:/,;?+’进行转码。

• encodeURI()：不会对 ASCII字母、数字、~!*()’进行转码。

  这两者都是用于URL编码，区别在于：encodeURIComponent()编码范围更大。举例来讲，encodeURIComponent()会把 http:// 编码成 http%3A%2F%2F 而encodeURI不会。

  简单的讲，如果对整个URL进行编码使用encodeURI()，如果对参数进行编码使用encodeURIComponent()。