jQuery load()方法

  • 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参考手册。