1-1 使用load()方法异步请求数据
本节编程练习不计算学习进度，请电脑登录imooc.com操作

使用load()方法异步请求数据

使用load()方法通过Ajax请求加载服务器中的数据，并把返回的数据放置到指定的元素中，它的调用格式为：

load(url,[data],[callback])

参数url为加载服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。

例如，点击“加载”按钮时，向服务器请求加载一个指定页面的内容，加载成功后，将数据内容显示在<div>元素中，并将加载按钮变为不可用。如下图所示：

在浏览器中显示的效果：

从图中可以看出，当点击“加载”按钮时，通过调用load()方法向服务器请求加载fruit.html文件中的内容，当加载成功后，先显示数据，并将按钮变为不可用。

任务

我来试试，亲自调用load()方法加载服务器文件中指定的元素内容

在下列代码的第26行，调用load()方法加载服务器文件 http://www.imooc.com/data/fruit_part.html 中全部的li元素内容。

index.htmlstyle.css 
  1. <!DOCTYPE html >
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <title>使用load()方法异步请求数据</title>
  5.         <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
  6.         <link href="style.css" rel="stylesheet" type="text/css" />
  7.     </head>
  8.  
  9.     <body>
  10.         <div id="divtest">
  11.             <div class="title">
  12.                 <span class="fl">我最爱吃的水果</span> 
  13.                 <span class="fr">
  14.                     <input id="btnShow" type="button" value="加载" />
  15.                 </span>
  16.             </div>
  17.             <ul></ul>
  18.         </div>
  19.  
  20.         <script type="text/javascript">
  21.             $(function () {
  22.                 $("#btnShow").bind("click", function () {
  23.                     var $this = $(this);
  24.                     $("ul")
  25.                     .html("<img src='Images/Loading.gif' alt=''/>")
  26.                     ? {
  27.                         $this.attr("disabled", "true");
  28.                     });
  29.                 })
  30.             });
  31.         </script>
  32.     </body>
  33. </html>
  1. #divtest
  2. {
  3.     width: 282px;
  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. ul
  16. {
  17.     float: left;
  18.     width: 280px;
  19.     padding: 5px 0px;
  20.     margin: 0px;
  21.     font-size: 14px;
  22.     list-style-type: none;
  23. }
  24. img
  25. {
  26.     margin: 8px;
  27. }
  28. ul li
  29. {
  30.     float: left;
  31.     width: 280px;
  32.     height: 23px;
  33.     line-height: 23px;
  34.     padding: 3px 8px;
  35. }
  36. .fl
  37. {
  38.     float: left;
  39. }
  40. .fr
  41. {
  42.     float: right;
  43. }
下一节