jquery 實現頁面局部刷新ajax做法

原文:http://www.php100.com/html/program/jquery/2013/0905/5825.html


下面介紹全頁面刷新方法:有時候可能會用到 
window.location.reload()刷新當前頁面. 
parent.location.reload()刷新父親對象(用於框架) 
opener.location.reload()刷新父窗口對象(用於單開窗口) 
top.location.reload()刷新最頂端對象(用於多開窗口)

$.get方法,$.post方法,$.getJson方法,$.ajax方法如下

前兩種使用方法基本上一樣 
複製代碼 代碼如下:

$.get(”Default.php”, {id:”1″, page: “2″ }, 
function(data){ 
//這裏是回調方法。返回data數據。這裏想怎麼處理就怎麼處理了。 
}); 
 jQuery.post( url, [data], [callback], [type] ) :使用POST方式來進行異步請求


參數:

url (String) : 發送請求的URL地址.

data (Map) : (可選) 要發送給服務器的數據,以 Key/value 的鍵值對形式表示。

callback (Function) : (可選) 載入成功時回調函數(只有當Response的返回狀態是success纔是調用該方法)。

type (String) : (可選)官方的說明是:Type of data to be sent。其實應該爲客戶端請求的類型(JSON,XML,等等)


這是一個簡單的 POST 請求功能以取代複雜 $.ajax 。請求成功時可調用回調函數。如果需要在出錯時執行函數,請使用 $.ajax。示例代碼:

Ajax.aspx:

Response.ContentType = "application/json";
Response.Write("{result: '" + Request["Name"] + ",你好!(這消息來自服務器)'}");
jQuery 代碼: 
$.post("Ajax.aspx", { Action: "post", Name: "lulu" },
  function (data, textStatus){
   // data 可以是 xmlDoc, jsonObj, html, text, 等等.
   //this; // 這個Ajax請求的選項配置信息,請參考jQuery.get()說到的this
   alert(data.result);
  }, "json");


$.getScript方法: 
複製代碼 代碼如下:

$.getScript(”http://jqueryajax.com/jquery.js”, 
function(){ 
$(”#go”).click(function(){//回調方法 
$(”.block”).animate( { backgroundColor: ‘pink' }, 1000) 
.animate( { backgroundColor: ‘blue' }, 1000); 
}); 
});

$.getJson只是返回的數據類型不一樣 
複製代碼 代碼如下:

$.getJson(”Default.php”, {id:”1″, page: “2″ }, 
function(data){ 
//注意,這裏返回的JSON數據引用方法爲”data.info”,不明白的可以查一下json方面的教程。這裏就不解釋太多了 
});

$.ajax 這個方法估計用的人很多吧。不過我不太喜歡用這個。個人覺得前面兩個更方便 
複製代碼 代碼如下:

$.ajax({ 
type: “POST”, //提交的類型 
url: “some.php”,//提交地址 
data: “name=John&location=Boston”,//參數 
success: function(msg){ //回調方法 
alert( “Data Saved: ” + msg );//這裏是方法內容,和上面的get方法一樣 

});


jQuery確實是一個挺好的輕量級的JS框架,能幫助我們快速的開發JS應用,並在一定程度上改變了我們寫JavaScript代碼的習慣。

廢話少說,直接進入正題,我們先來看一些簡單的方法,這些方法都是對jQuery.ajax()進行封裝以方便我們使用的方法,當然,如果要處理複雜的邏輯,還是需要用到jQuery.ajax()的(這個後面會說到).

1. load( url, [data], [callback] ) :載入遠程 HTML 文件代碼並插入至 DOM 中。

url (String) : 請求的HTML頁的URL地址。

data (Map) : (可選參數) 發送至服務器的 key/value 數據。

callback (Callback) : (可選參數) 請求完成時(不需要是success的)的回調函數。

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

這個方法可以很方便的動態加載一些HTML文件,例如表單。

示例代碼:

$(".ajax.load").load("http://www.test.com",
  function (responseText, textStatus, XMLHttpRequest){
  this;//在這裏this指向的是當前的DOM對象,即$(".ajax.load")[0] 
  //alert(responseText);//請求返回的內容
  //alert(textStatus);//請求狀態:success,error
  //alert(XMLHttpRequest);//XMLHttpRequest對象
});


發佈了18 篇原創文章 · 獲贊 1 · 訪問量 1萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章