jQuery - AJAX load() Methode

Die jQuery load() Methode ist eine einfache aber leistungsstarke AJAX-Methode.

jQuery load() Methode

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

此方法提供了一种从Web服务器异步加载数据的简单方法。

这是load()方法的语法：

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

参数：

• URL-指定您要请求的URL

• data -（可选）指定与请求一起发送到服务器的纯对象或字符串

• callback-（可选）指定在load()方法完成后执行的回调函数

以下示例将ajax_intro.txt文件的内容加载到DIV元素中：

$("button").click(function(){
　　$("div").load("ajax_intro.txt");
});

以下示例加载ajax_post.html页面，并发送一些其他数据:

$("button").click(function(){
　　let data = {fname:"Seagull", lname:"Anna"};
　　$("div").load("ajax_post.php", data);
});

这是PHP文件的外观（“ajax_post.html”）：

<?php
　　　　echo "<p>Hello ".$_POST['fname']." ".$_POST['lname'].", How are u doing?</p>";
?>

请求方法：如果将数据作为对象提供，则使用POST方法。否则，假定为GET。

使用回调加载页面

可选的callback参数指定load()方法完成后要运行的回调函数。

回调函数可以具有不同的参数：

• response　 -包含请求中的结果数据

• status -包含请求的状态（"success", "notmodified", "error", "timeout", 或 "parsererror"）

• xhr-包含XMLHttpRequest对象

以下示例将加载ajax_post.html页面，并发送一些其他数据和警报状态消息：

$("button").click(function(){
　　let data = {fname:"Seagull", lname:"Anna"};
　　$("div").load("ajax_post.php", data, function(response, status){
　　　　alert(status);
　　});
});

以下示例在Ajax请求遇到错误时显示通知：

$("button").click(function(){
　　let data = {fname:"Seagull", lname:"Anna"};
　　$("#success").load("wrong_file.php", data, function(response, status, xhr){
　　　　if(status == "error"){
　　　　　　let msg = "Entschuldigung, aber es gab einen Fehler: ";
　　　　　　$("#error").html(msg　+　xhr.status　+　"　"　+　xhr.statusText);
　　　　}
　　});
});

Laden Sie den Seitenabschnitt

jQuery load()Die Methode ermöglicht es uns auch, nur einen Teil des Dokuments abzurufen.

Dies kann einfach durch das Hinzufügen eines Leerzeichens und eines jQuery-Selektors an das URL-Parameter realisiert werden.

Der folgende Beispiel lädt den Inhalt des Elements mit dem ID "table" aus der Datei "ajax_load.html" in das DIV-Element:

$("button").click(function(){
　　$("div").load("ajax_load.html　#table");
});

jQuery AJAX Referenz

Für eine vollständige Referenz der AJAX Methoden besuchen Sie bitte unserejQuery AJAX Referenz。