jQuery load()方法

jQuery load()方法是一个简单但功能强大的AJAX方法。

load()方法从服务器加载数据并将返回的数据放入选定的元素中。

语法：$(selector).load(URL,data,callback);

必需的URL参数指定要加载的URL。

可选的data参数指定要与请求一起发送的一组查询字符串键/值对。

可选的回调参数是load（）方法完成后要执行的函数的名称。

以下是我们的示例文件的内容：“demo_test.txt”：

   
               <h2>jQuery和AJAX很有趣！</h2>
               <p> id="p1">这是段落中的一些文字。</p>

以下示例将文件“demo_test.txt”的内容加载到特定的<div>元素中：

   
                    <head>
                         <script type="text/javascript" src="jquery.js"></script>
                         <script type="text/javascript">
                         $(document).ready(function(){
                              $("#div1").load("demo_test.txt");
                         });
                         </script>
                    </head>

尝试一下

也可以在URL参数中添加jQuery选择器。

以下示例将文件“demo_test.txt”中具有id =“p1”的元素的内容加载到特定的<div>元素中：

   
               <head>
                    <script type="text/javascript" src="jquery.js"></script>
                    <script type="text/javascript">
                    $(document).ready(function(){
                        $("#div1").load("demo_test.txt #p1");
                    });
                    </script>
               </head>

尝试一下

可选的callback参数指定在load()方法完成时运行的回调函数。回调函数可以有不同的参数：

responseTxt 如果调用成功，则包含结果内容
statusTxt 包含呼叫的状态
xhr 包含XMLHttpRequest对象

以下示例在load()方法完成后显示警告框。如果load()方法成功，则显示“外部内容已成功加载！”，如果失败则显示错误消息：

   
               <head>
                    <script type="text/javascript" src="jquery.js"></script>
                    <script type="text/javascript">
                    $(document).ready(function(){
                      $("button").click(function(){
                          $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
                              if(statusTxt == "success")
                              alert("外部内容已成功加载!");
                              if(statusTxt == "error")
                              alert("错误: " + xhr.status + ": " + xhr.statusText);
                          });
                       });
                    });
                    </script>
               </head>

尝试一下

有关所有jQuery AJAX方法的完整概述，请转到我们的jQuery AJAX参考手册。