记录ajax和url参数值编码的使用

提取URL参数值

如有这么个需求,前端用js提取如下URL参数中name的值“锦城家居”,然后在应用到前端页面上去。

http://...../applyService.html?name=锦城家居

可以使用window.location.search赋值到一个变量,那么该变量就是请求的内容。

可以在chrome开发工具中Console窗口编写如下代码,并回车:

var a = window.location.search; 
a ;
"?name=%E9%94%A6%E5%9F%8E%E5%AE%B6%E5%B1%85" //a的值

再编写代码,并回车看结果:

encodeURI("锦城家居");
"%E9%94%A6%E5%9F%8E%E5%AE%B6%E5%B1%85" //锦城家居的编码值

怎样?是否看出什么了?这里要说明一下:encodeURI()js中真正用来对URL编码的函数。使用此方法就会对URL中,除了字母和数字[0-9a-zA-Z]、一些特殊符号$-_.+!*'(),等之外,如此参数值中包含中文的,都会以UTF-8的格式编码。为什么要编码呢?

其实是为后台服务器着想的,因为在前台中,会因为浏览器不同,URL路径中有中文,getpost请求方式等,采取不同的编码格式进行编码。那么我们在发送请求之前如果进行encodeURI(url)编码,就会优先地采用UTF-8格式编码,那么后台服务器就只会收到一种格式的请求,而不会面对多种格式编码请求而手忙脚乱的。

由此,我们重新回到第一段代码,虽然我们看起来在地址栏那里看到的是中文,但它请求过去时就自动被encodeURI()了,因此就可以跟第二段代码对应起来了。

因此在我们没有进行下一步操作之前,只能拿到a这串字符串,字符串?我们可以编码验证一下:

typeof(a);
"string"

因此,有编码,也有反编码(解码),就要用到decodeURI()了。首先要从a中提取出中文编码,这里鉴于参数就只有一个而且是确定的,那就可以使用string的方法substring()来提取。

var b = a.substring(6);
b;
"%E9%94%A6%E5%9F%8E%E5%AE%B6%E5%B1%85"

就可以提取出来赋值给变量b了,接下来就是解码,使用如下:

var name = decodeURI(b);
name;
"锦城家居"

也就相当于:

decodeURI("%E9%94%A6%E5%9F%8E%E5%AE%B6%E5%B1%85");
"锦城家居"

就可以拿到此值来,然后就可以安心用到前端啦。

关于Ajax异步请求的一些小事

直接看代码:

$.ajax({
       url:"http://.......",
       type: 'POST',                  //请求方式
       dataType:'jsonp',              //跨域请求
       data: "webSite="+website,      //自定义的字符串字段
       success:function(json){
            if(....){
                // To do something
            }else{
                // To do other thing
            }
         }
       ....
      })

当你不是表单提交,而是任意时候,你想用ajax异步请求到某个URL的时候,就用到type,表示请求的方式;然后再想说的是data,这就是请求发送过去的内容,可以是字符串,可以自定义一个字符串。

小总结:

Ajax可以很方便地就异步发起请求,及时对页面数据的刷新,而它发送的内容也是很容易进行操作,自定义处理。

URL参数编码,特别是要留意中文编码问题,需要了解哪些字符是不会经过编码的,哪些又会?然后就是可以利用当前的链接中的参数,可以提取出来引用到前端去,有时候这个做法是挺方便的。

Spy 28 September 2013