jQuery 3.2.1中的load()函數是一個非常有用的函數,它可以從服務器加載數據,并將加載的數據放入指定的元素中。load()函數具有以下語法:
$(selector).load(url, data, callback);
其中,selector參數是要加載數據的元素的CSS選擇器;url參數是要加載的URL;data參數是作為查詢字符串發送的數據;callback參數是請求完成后的回調函數。
以下是一個示例使用load()函數從服務器加載HTML文檔并插入到元素中的代碼:
$(document).ready(function(){ $("button").click(function(){ $("#div1").load("demo_test.html"); }); });
上述代碼將在按鈕點擊時將demo_test.html文檔加載到id為div1的元素中。
除了加載HTML文檔外,load()函數還可以加載文本、JSON、XML等數據,具體語法如下:
// 加載文本數據 $(selector).load(url); // 加載JSON數據 $(selector).load(url, data, function(response, status, xhr) { if (status == "success") { // 成功 } else { // 失敗 } }, dataType); // 加載XML數據 $(selector).load(url, {param1: "value1", param2: "value2"});
load()函數還可以使用回調函數來執行一些額外的操作,如下所示:
$("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){ if(statusTxt == "success") alert("External content loaded successfully!"); if(statusTxt == "error") alert("Error: " + xhr.status + ": " + xhr.statusText); });
上述代碼在文本加載成功或失敗時分別彈出響應的提示框。
在使用load()函數時,需要特別注意的是,加載的數據將覆蓋目標元素中原有的內容。如果需要在目標元素中追加內容而不是覆蓋原有內容,可以使用ajax()函數。