jQuery | load() 示例

jQuery load() 方法很简单但非常强大的 AJAX 方法。 jQuery 中的 Load() 方法有助于从服务器加载数据并返回到所选元素，而无需加载整个页面。

句法：

$(selector).load(URL, data, callback);

参数：此方法接受如上所述和如下所述的三个参数：

• URL：用于指定需要加载的URL。
• data：它用于指定一组查询键/值对与请求一起发送。
• callback：可选参数，是调用load()方法后要执行的函数名。

返回值：此方法从具有指定 URL 的服务器返回请求的数据。

例子：

The geeks.txt file stored on server and it will load after clicking the click button. The content of geeks.txt are:
Hello GeeksforGeeks!

方案一：

    
        
        
        
            $(document).ready(function(){
                $("button").click(function(){
                    $("#div_content").load("gfg.txt");
                });
            });
        
        
            body {
                text-align: center;
            }
            .gfg {
                font-size:40px;
                font-weight: bold;
                color: green;
            }
            .geeks {
                font-size:17px;
                color: black;
            }
            #div_content {
                font-size: 40px;
                font-weight: bold;
                color: green;
            }
        
    
    
        
            GeeksforGeeks
            A computer science portal for geeks
        
        Change Content
    

输出 ：

参数中还有一个额外的回调函数，它将在 load() 方法完成时运行。这个回调函数有三个不同的参数：

• 参数1：如果方法调用成功，则包含内容的结果。
• 参数2：它包含调用函数的状态。
• 参数 3：它包含 XMLHttpRequest 对象。

方案二：

    
        
        
        
        $(document).ready(function(){
            $("button").click(function(){
                $("#div_content").load("gfg.txt", function(response,
                                                         status, http){
                    if(status == "success")
                        alert("Content loaded successfully!");
                    if(status == "error")
                        alert("Error: " + http.status + ": " 
                                                       + http.statusText);
                });
            });
        });
        
        
            body {
                text-align: center;
            }
            .gfg {
                font-size:40px;
                font-weight: bold;
                color: green;
            }
            .geeks {
                font-size:17px;
                color: black;
            }
            #div_content {
                font-size: 40px;
                font-weight: bold;
                color: green;
            }
        
    
    
        
            GeeksforGeeks
            A computer science portal for geeks
        
            Change Content
    

输出：

给定代码的输出跟随一个警告框，该框将在单击按钮后出现，如果内容加载成功，则会显示消息“内容加载成功！” .否则会显示错误信息。