4-7 URL操作函数
本节编程练习不计算学习进度,请电脑登录imooc.com操作

URL操作函数

调用名为$. param的工具函数,能使对象或数组按照key/value格式进行序列化编码,该编码后的值常用于向服务端发送URL请求,调用格式为:

$. param (obj);

参数obj表示需要进行序列化的对象,该对象也可以是一个数组,整个函数返回一个经过序列化编码后的字符串。

例如,通过$.param()函数,对指定的对象进行序列化编码,使其成为可执行传值的URL地址,并将该地址显示在页面中,如下图所示:

在浏览器中显示的效果:

从图中可以看出,通过调用工具函数$.param()可以将一个对象进行序列化并编码成可以在地址栏中直接执行的URL字符串。

param和serialize的区别是什么?前者是对任意的参数进行URL地址格式的转换,而后者仅属于form提交的数据转换。

任务

我来试试,亲自调用$.param()函数将一个对象进行序列化编码。

在下列代码的第26行,调用$.param()函数,将对象objInfo进行序列化。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>URL操作函数</title>
  5. <link href="style.css" rel="stylesheet" type="text/css" />
  6. <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
  7. </head>
  8.  
  9. <body>
  10. <div id="divtest">
  11. <div class="title">
  12. <span class="fl">URL操作函数</span>
  13. </div>
  14. <div class="content">
  15. <div class="tip"></div>
  16. </div>
  17. </div>
  18.  
  19. <script type="text/javascript">
  20. $(function () {
  21. //基本信息对象
  22. var objInfo = new Object();
  23. objInfo.name = "白富美";
  24. objInfo.sex = 1;
  25. //序列化对象
  26. var objNewInfo =?;
  27. //显示序列化后的对象
  28. var strTmp = "<b>对象 白富美 序列化后</b><br/><br/>";
  29. strTmp += objNewInfo;
  30. //显示在页面中
  31. $(".tip").show().append(strTmp);
  32. });
  33. </script>
  34. </body>
  35. </html>
  1. #divtest
  2. {
  3. width: 302px;
  4. }
  5. #divtest .title
  6. {
  7. padding: 8px;
  8. background-color: Blue;
  9. color: #fff;
  10. height: 23px;
  11. line-height: 23px;
  12. font-size: 15px;
  13. font-weight: bold;
  14. }
  15. #divtest .content
  16. {
  17. padding: 8px;
  18. background-color: #fff;
  19. font-size: 13px;
  20. }
  21. #divtest .content .tip
  22. {
  23. border: solid 1px #ccc;
  24. background-color: #eee;
  25. margin: 10px 0px;
  26. padding: 8px;
  27. display: none;
  28. }
  29. .fl
  30. {
  31. float: left;
  32. }
  33. .fr
  34. {
  35. float: right;
  36. }
下一节