jquery Ajax的load方法及執行個體

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

jquery中的load方法：

(1).前面沒有jquery.修飾，可以推斷出他是一個普通的非全域函數（也就是說是一個局部函數）:$.,$().,jquery.等修飾的就是全域函數，沒有這些修飾的就是局部函數。

(2).$(expr).load(url,data,callback);

url：請求路徑，絕對路徑或者相對路徑都可以.

data: 請求參數，格式必須是key/value格式(json格式)

callback:回呼函數。function(data,textStatus,XMLHttpRequest) data:代表請求返回內容 textStatus:代表請求狀態succuss, error, notmodify, timeout 4 種 XMLHttpRequest：XMLHttpRequest對象

(3).預設情況下在沒有向伺服器發送請求資料的時候是load()方法就是GET請求，如果有請求參數那麼就是POST請求

(4). load()不能自訂請求類型,而是由是否向伺服器端發送請求資料. load()不能自訂資料交換格式,只能使用文本(HTML)格式

案例：

load.html頁面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>    <head>        <title>load()方法</title>        <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <script type="text/javascript" src="../js/jquery-1.4.2.js">        </script>        <style type="text/css">            div, span {                width: 140px;                height: 140px;                margin: 20px;                background: #9999CC;                border: #000 1px solid;                float: left;                font-size: 17px;                font-family: Roman;            }                        div.mini {                width: 30px;                height: 30px;                background: #CC66FF;                border: #000 1px solid;                font-size: 12px;                font-family: Roman;            }                        div.visible {                display: none;            }        </style>        <!--引入jquery的js庫-->    </head>    <body>        <form action="" name="form1" id="form1">            <input type="text" name="username" id="username" value="zhang">            <br>            <input type="text" name="psw" id="psw" value="99999">            <br>            <input type="button" id="b1" value="登陸">        </form>        <div id="one">        </div>    </body>    <script language="JavaScript">         $().ready(function(){            var json={username:$("#username").val(),psw:$("#psw").val()};            $("#b1").click(function(){                $("#one").load("load.jsp",json,function(data,textStatus,XMLHttpRequest){                    alert(data);                    alert(textStatus);                });            });        });    </script></html>

load.jsp

<%@ page language="java" pageEncoding="UTF-8"%><%    System.out.println("connection server success!");        System.out.println(request.getMethod());//擷取請求參數類型        System.out.println("username = "+request.getParameter("username"));//擷取請求參數    System.out.println("password = "+request.getParameter("psw"));        out.println("helloworld!");    %>

瀏覽器顯示：

控制台顯示：

jQuery的AJAX之load()應用執行個體

在jquery ajax中有get,post,ajax及我們本文章要講到的load，load可以直接載入頁面與其它的有所區別，下面我來介紹ajax load用法執行個體。

調用load方法的完整格式是：load( url, [data], [callback] ),其中

url：是指要匯入檔案的地址。
data：選擇性參數；因為Load不僅僅可以匯入靜態html檔案，還可以匯入動態指令碼，例如PHP檔案，所以要匯入的是動態檔案時，我們可以把要傳遞的參數放在這裡。
callback：選擇性參數；是指調用load方法並得到伺服器響應後，再執行的另外一個函數。

一：如何使用data

1.載入一個php檔案，該php檔案不含傳遞參數
$("#myID").load("test.php");

//在id為#myID的元素裡匯入test.php運行後的結果

2. 載入一個php檔案，該php檔案含有一個傳遞參數

$("#myID").load("test.php",{"name" : "Adam"});

//匯入的php檔案含有一個傳遞參數，類似於：test.php?name=Adam

3. 載入一個php檔案，該php檔案含有多個傳遞參數。註：參數間用逗號分隔

$("#myID").load("test.php",{"name" : "Adam" ，"site":"61dh.com"});

//匯入的php檔案含有一個傳遞參數，類似於：test.php?name=Adam&site=61dh.com

4. 載入一個php檔案，該php檔案以數組作為傳遞參數

$("#myID").load("test.php",{'myinfo[]', ["Adam", "61dh.com"]});

//匯入的php檔案含有一個數組傳遞參數。

注意：使用load，這些參數是以POST的方式傳遞的，因此在test.php裡，不能用GET來擷取參數。

二：如何使用callback

比如我們要在load方法得到伺服器響應後，慢慢地顯示載入的內容，就可以使用callback函數。代碼如下：

$("#go").click(function(){

$("#myID").load("welcome.php", {"lname" : "Cai", "fname" : "Adam", function(){

    $("#myID").fadeIn('slow');}

);

});

簡單扼要的說就是ajax類比了提交表單的行為，但是把重新整理頁面這件事交由js在後台偷偷完成了。

由此可見ajax其實是一個很容易理解的過程，下面用例子來說明。首先寫一個html頁面：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ajax test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery(function($){
$('button').click(function(){
    $name = $(this).attr('name');
    $('#out').empty().load('test1.php',{ name : $name });
});
});
</script>
<style type="text/css"></style>
</head>
<body>
<button id="btn-1" name="1">1</button>
<button id="btn-2" name="2">2</button>
<button id="btn-3" name="3">3</button>
<div id="out"></div>
</body>
</html>

有一點html基礎的童鞋可以看出，這裡做了三個按鈕，一個id為out的div，三個按鈕是用來點擊的，#out的div用來接收資料，每次點擊button時先把#out清空，然後插入資訊。

然後來寫php：

<?php
switch($_POST['name']){
case 1:
    echo '1 哈哈';
    break;
case 2:
    echo '2 呵呵';
    break;
case 3:
    echo '3 活活';
    break;
}
?>

這段代碼使用了php的switch語句，意思就說根據post中name的值來替換輸出的內容，這裡只是個簡單的例子，你也可以通過這個原理讓php進行更複雜的運算或輸出更複雜的內容。

js我直接寫在html裡面了，沒有單獨用一個檔案，用純js寫估計得寫不少，用jQuery就2句搞定，其實一句都行，只是我這兒還是寫成兩句比較好理解一點。
第一句是吧button按鈕中的name值存在一個變數裡面，第二句是使用了jQuery的load函數，告訴php需要哪些資訊，然後取回這些資訊插入到#out中。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More