2. 程式人生 > >jQuery load() 方法

jQuery load() 方法

阿新 • • 發佈：2019-02-01

原文連結：http://www.runoob.com/jquery/ajax-load.html
定義和用法
load() 方法從伺服器載入資料，並把返回的資料放置到指定的元素中。
注意：還存在一個名為 load 的 jQuery 事件方法。呼叫哪個，取決於引數。

語法

$(selector).load(url,data,function(response,status,xhr))

這裡寫圖片描述

//頁面test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="comment">
 <h6>張三:</h6>
 <p class="para">沙發.</p>
</div>
<div class
 
="comment">
 <h6>李四:</h6>
 <p class="para">板凳.</p>
</div>
<div class="comment">
 <h6>王五:</h6>
 <p class="para">地板.</p>
</div>
</body>
</html>

2、再建一個demo1.html，在上面新增兩個元素：用來觸發Ajax事件，id為”resText”的元素用來顯示追加的HTML內容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* { margin:0; padding:0;}
body { font-size:12px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>
 <!--   引入jQuery -->
<script src="https://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
  $(function(){
      $("#send").click(function(){
              $("#resText").load("test.html");
      })
  })
</script>
</head>
<body>
<input type="button" id="send" value="Ajax獲取" />

<div  class="comment">
    已有評論：
</div>
<div id="resText" ></div>
</body>
</html>

顯然，load()方法完成了原本很繁瑣的工作。開發人員只需要使用jQuery選擇器為HTML片段指定目標位置，然後將要載入的檔案的URL作為引數傳遞給load()方法即可。當單擊按鈕後，test.html頁面的HTML內ring就會被載入並插入主頁面<div id="resText"></div>的元素中。

2、篩選載入的HTML文件
上面的例子是將test.html頁面中的內容都載入到id為"resText"的元素裡。
如果只需要載入test.html頁面內的某些元素，那麼可以使用load()方法的URL引數來達到目的。
通過為URL引數指定選擇符，就可以很方便地從載入過來的HTML文件裡篩選出所需要的內容。

load()方法的URL引數的語法結構為：
“url selector”。注意，URL和選擇器之間有一個空格。

例如：只需要載入test.html頁面中class為”para”的內容，可以將demo1.html中的

$("#resText").load("test.html");

改為：

$("#resText").load("test.html  .para");

3、傳遞方法
load()方法的傳遞方式根據引數data來自動指定。如果沒有引數傳遞，則採用GET方式傳遞；反之，則會自動轉換為POST方法。

//無引數傳遞，則是GET方式
$('#resText').load('test.php',function(){
    //...
});
//有引數傳遞，則是POST方式
$('#resText').load('test.php',{name:'rain',age:'22'}，function(){
    //...
});

4.回撥函式
對於必須在載入完成後才能繼續的操作，load()方法提供了回撥函式(callback)，該函式有3個引數，分別代表請求返回的內容、請求狀態和XMLHttpRequest物件，jQuery程式碼如下：

$("#resText").load("test.html",function (responseText, textStatus, XMLHttpRequest){         
        alert(responseText);         //請求返回的內容
        alert(textStatus);          //請求狀態：success，error
        alert(XMLHttpRequest);     //XMLHttpRequest物件
});

在load()方法中，無論Ajax請求是否成功，只要當請求完成(complete)後，回撥函式(callback)就被觸發。

load()方法通常用來從Web伺服器上獲取靜態的資料檔案，然後這並不能體現Ajax的全部價值。在專案中，如果需要傳遞一些引數給伺服器中的頁面，那麼可以使用.get()或者.post()或者$.ajax()方法。

相關推薦

控制使用jquery load()方法載入新頁面中的元素

三個參數 解決 獲取 參數 頁面 紮實 第一個 之前 簡單 最近在項目中用到jquery的load()方法來加載頁面，首先簡單說一下load()方法。 load(url,data,callback);該方法接收三個參數，第一個是載入的頁面地址，第二個是要傳到服務器的參數，第

jquery load()方法實現區域性重新整理，多張網頁切換（li標籤實現上下頁的切換）

---學習借鑑中--- （1）父頁面插入的位置 <div  id="content" > //id為要重新整理顯示的子頁面的內容 </div> （2）父頁面顯示標籤切換不同html頁面 <ul class="userMenu"> <li

Jquery load 方法下前進、後退、重新整理問題的解決

做一個後臺管理系統的時候，用到了admin-lte框架。不過其實大部分後臺管理系統都是這樣的設計，即，左邊是可以縮排的選單欄，右邊是內容，使用者點選選單的時候，選單欄和上邊的使用者資訊欄並不會重新載入，也就是不會跳轉到新的頁面，緊緊是更新了右邊的內容模組。

jQuery:load()方法

jquery的load()方法可以載入頁面或資料到指定的元素，通常用於聯動的頁面效果，下面是示例： 一，簡單的載入頁面 <select name="bigSortId" id="bigSortId" onChange="getSmallSort()"> &

Jquery load()方法 實現公用頭部 尾部

//這是header.html裡的程式碼，想作為頭部引進來 <div id="loginBox"> <span></span> <div> <div> &l

jQuery load() 方法

原文連結：http://www.runoob.com/jquery/ajax-load.html 定義和用法 load() 方法從伺服器載入資料，並把返回的資料放置到指定的元素中。 注意：還存在一個名為 load 的 jQuery 事件方法。呼叫哪個，取決

jQuery-Load方法

alt url inf cti 使用 com 獲取數據 easyu jquer 1、load（） 介紹：load() 方法通過 AJAX 請求從服務器加載數據，並把返回的數據放置到指定的元素中 該方法是最簡單的從服務器獲取數據的方法。它幾乎與 $.get(url, da

jQuery load() 方法實現載入遠端資料

jQuery load() 方法是簡單但強大的 AJAX 方法。load() 方法從伺服器載入資料，並把返回的資料放入被選元

JavaScript教程之jQuery - AJAX load() 方法

ash pre var 段落 相關 對象 esc 選擇 none jQuery - AJAX load() 方法 jQuery load() 方法 jQuery load() 方法是簡單但強大的 AJAX 方法。 load() 方法從服務器加載數據，並把返回的數據放入被選

jQuery – AJAX load() 方法

quest 觸發 lec 簡單 lan 允許 tor txt 數據 jQuery load() 方法 jQuery load() 方法是簡單但強大的 AJAX 方法。 load() 方法從服務器加載數據，並把返回的數據放入被選元素中。 語法: $(selector).lo

關於jQuery的load()方法

傳統的網站頁面包含多個header、footer、siderbar、tip(提示框/輸入框)等多個公共元件，如果一味的複製貼上，頁面將會相當臃腫和難以維護。這裡介紹jqurey的load(）方法。目的：實現頁面的元件化，方便管理和維護。如果你是Vue和React使用者，請無視此文。 jquery

JQuery使用load方法載入外部div時，css，js無效的辦法

問題： 一個html頁面a.html的js指令碼中，用$(‘selector’).load方法，載入另一個html頁面b.html中內容，b.html中css、js都失效。 解決辦法一： 第一步：在a.html的js指令碼中，使用load載入全部b.html，這樣b

使用jquery的load方法載入本地檔案

1. 方法一（圖一）：使用chrome瀏覽器，關掉瀏覽器，通過截圖的兩條命令執行chrome瀏覽器，再執行test.html檔案。方法二（圖二）：選擇chrome瀏覽器快捷方式，右鍵選擇屬性，再點選快捷方式，在目標"C:\Program Files (x86)\Google\Chrome\Appli

load()方法---------jQuery動態載入html

jquery程式碼$("#div").load("test.html"); test.html   ----------------被載入頁面（有<HTML><HEAD><META><BODY>等的完整頁面 ）$("#div")

使用jquery的load方法載入html頁面，但是html引入的js不生效

Write By Monkeyfly 以下內容均為原創，如需轉載請註明出處。 前提 有一個公共的登入彈框頁面需要在多個頁面引用，百度後就使用了jQuery 的 load 方法。 做法： 將公共的 ht

jquery easyui datagrid.load方法引數傳遞問題

今天在寫一個自己搭建的springvmc+easyui的專案，出現的一個傳值問題，如下 $(document).ready(function(){                 $("#seacher").click(function(){                

jquery動態載入頁面 load方法 注意事項

jquery程式碼$("#div").load("test.html"); test.html   ----------------被載入頁面（有<HTML><HEAD><META><BODY>等的完整頁面 ）$("#div"

Yii2.0 下的 load() 方法的使用

tail sco 加載 pub name model 解決方法 使用 yii2.0 一 問題 最近在使用 Yii2.0，遇到一個 bug：在 /models/OrderDetail.php add() 方法中調用 load() 方法加載數據，卻加載不了。 public f

jquery $.fn方法

highlight log doc mar function brush cnblogs func document <script type="text/javascript"> $(function(){ $.fn.pop=function(){

Javascript - Jquery - 常用方法

一次 出現 屬性節點 posit 查找 布爾 nbsp 上一個 log 常用方法（Common Method） 類名 方法 addClass(className) className是css類名，為該對象指定或增加一個類名，返回該對象。 removeClass(c