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

December 07, 2014

Reading time ~2 minutes

##提取URL参数值

如有这么个需求，前端用

1

js
提取如下
1

URL
参数中
1

name
的值“锦城家居”，然后在应用到前端页面上去。

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

可以使用

1

window.location.search
赋值到一个变量，那么该变量就是请求的内容。

可以在

1

chrome
开发工具中
1

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" //锦城家居的编码值

怎样？是否看出什么了？这里要说明一下：

1

encodeURI()
是
1

js
中真正用来对
1

URL
编码的函数。使用此方法就会对
1

URL
中，除了字母和数字
1

[0-9a-zA-Z]
、一些特殊符号
1

$-_.+!*'()
,等之外，如此参数值中包含中文的，都会以
1

UTF-8
的格式编码。为什么要编码呢？

其实是为后台服务器着想的，因为在前台中，会因为浏览器不同，

1

URL
路径中有中文，
1

get
和
1

post
请求方式等，采取不同的编码格式进行编码。那么我们在发送请求之前如果进行
1

encodeURI(url)
编码，就会优先地采用
1

UTF-8
格式编码，那么后台服务器就只会收到一种格式的请求，而不会面对多种格式编码请求而手忙脚乱的。

由此，我们重新回到第一段代码，虽然我们看起来在地址栏那里看到的是中文，但它请求过去时就自动被

1

encodeURI()
了，因此就可以跟第二段代码对应起来了。

因此在我们没有进行下一步操作之前，只能拿到

1

a
这串字符串，字符串？我们可以编码验证一下：

typeof(a);
"string"

因此，有编码，也有反编码（解码），就要用到

1

decodeURI()
了。首先要从
1

a
中提取出中文编码，这里鉴于参数就只有一个而且是确定的，那就可以使用
1

string
的方法
1

substring()
来提取。

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

就可以提取出来赋值给变量

1

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
            }
         }
       ....
      })

当你不是表单提交，而是任意时候，你想用

1

ajax
异步请求到某个
1

URL
的时候，就用到
1

type
,表示请求的方式；然后再想说的是
1

data
,这就是请求发送过去的内容，可以是字符串，可以自定义一个字符串。

小总结：

1

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

1

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

From:http://pigerla.com/learn-note/2013-09-28/encode-url-parameter-and-use-ajax/