jQuery中ajax基礎教程(1/4)

來源:互聯網
上載者:User

load()方法

load( url [ , data ][ , callback])  載入遠程 HTML 檔案代碼並插入至 DOM 中。

參數名稱 類型 說明


url string 請求HTML頁面的URL地址

data object 發送至伺服器的key/value資料

callback     function 請求完成後的回調資料,無論請求成功或失敗

這個方法預設使用 GET 方式來傳遞的,如果[data]參數有傳遞資料進去,就會自動轉換為POST方式的。jQuery 1.2 中,可以指定選擇符,來篩選載入的 HTML 文檔,DOM 中將僅插入篩選出的 HTML 程式碼。文法形如 "url #some > selector"。

這個方法可以很方便的動態載入一些HTML檔案,例如表單。

範例程式碼:

 代碼如下 複製代碼

$(function(){

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

})

//////////   2  /////////

$(".ajax.load").load("2008/03/30/1130270.html .classname", function (responseText, textStatus, XMLHttpRequest){

this;//在這裡this指向的是當前的DOM對象,即$(".ajax.load")[0]

//篩選載入需要的內容。在url後面空格加選取器如:load("test.html #idname")

//alert(responseText);//請求返回的內容

//alert(textStatus);//請求狀態:success,error

//alert(XMLHttpRequest);//XMLHttpRequest對象

});

註:不知道為什麼URL寫絕對路徑在FF下會出錯,知道的麻煩告訴下。下面的get()和post()樣本使用的是絕對路徑,所以在FF下你將會出錯並不會看到返回結果。還有get()和post()樣本都是跨域調用的,發現傳上來後沒辦法擷取結果,所以把運行按鈕去掉了。

$.get( url [ , data] [ , callback ] [ , type] )   使用GET方式來進行非同步請求

參數名稱 類型 說明

url string 發送請求的URL地址

data object 發送至伺服器的key/value資料會作為QueryString附加到請求 URL中

callback     function 載入成功(當response的返回狀態為success)時回呼函數自動 將請求結果和狀態傳遞給該方法

type  string 伺服器返回的內容的格式,包括xml、html、script、json、text 和_default

 代碼如下 複製代碼

$.get("./Ajax.php", {Action:"get",Name:"lulu"}, function (data, textStatus){

//返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等

alert(data);

//alert(textStatus);//請求狀態:success,error等等。
當然這裡捕捉不到error,因為error的時候根本不會運行該回呼函數 //alert(this);

});

Xml檔案php檔案

 代碼如下 複製代碼

<?php

header("Content-Type:text/xml; charset=utf-8");

echo "<?xml version='1.0' encoding='utf-8'?>".

"<comments>".

"<comment username='{$_REQUEST['username'] }' >".

"<content>{$_REQUEST['content']}</content>".

"</comment>".

"</comments>";

?>

Html檔案(回呼函數部分)

 代碼如下 複製代碼

function (data, textStatus){

var username = $(data).find("comment").attr("username");

var content = $(data).find("comment content").text();

var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";

       $("#resText").html(txtHtml); // 把返回的資料添加到頁面上

});

 

首頁 1 2 3 4 末頁
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: 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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.