【jQuery教程】jquery新手入門執行個體教程三ajax應用

我們在上一章 jquery新手入門執行個體教學二 使用者註冊(簡單的表單驗證) （/html/JQueryjiaocheng/200807/17-519.html）

裡面有一行語句

$.get("php/user_register.php",{act:$(this).attr("ID"),v:$(this).val()},function(txt){
                   msg.html(txt);

})

這個就是jquery ajax應用的簡單一實例

什麼是 ajax

AJAX全稱為“Asynchronous JavaScript and XML”（非同步JavaScript和XML），是指一種建立互動式網頁應用的網頁開發技術。

 如果你不是很清楚 請參考 http://baike.baidu.com/view/1641.htm 

下面我們來看看jquery 對 ajax的支援吧

首先我們來講講 $.get

$.get(url, params, callback)

用GET方式請求裝入遠程頁面

傳回值：XMLHttpRequest

參數：

• url (String): 裝入頁面的URL地址。
• params (Map): （可選）發送到服務端的鍵／值對參數。
• callback (Function): （可選） 當遠程頁面裝入完成時執行的函數.

執行個體：
比如檔案demo1 html代碼如下
<a href="javascript:void(0)">demo</a>
<div ID="show" style="border:solid 1px #FF6600">加在內容：</div>

get.html代碼如下
<strong>ajax get 獲得內容</strong>

現在我要實現 點擊demo 能夠把 get.html內容載入到 div裡面

<SCRIPT LANGUAGE="JavaScript">
  <!--
   $("document").ready(function(){
      $("a").click(function(){//給div 綁定點擊事件
      $.get("get.html",function(data){
            $("#show").html($("#show").html()+"<br>"+data);
   })
   })
   })
  //-->
  </SCRIPT>

如果您需要帶參數只需要
$.get("get.html",{參數名稱1:"參數1值",參數名稱2:"參數2值"},function(data){
$("#show").html(data);
})

$.post(url, params, callback)

用HTTP POST方式裝入一個遠程頁面

傳回值：XMLHttpRequest

參數：

• url (String): 裝入頁面的URL地址。
• params (Map): （可選）發送到服務端的鍵／值對參數。
• callback (Function): （可選） 當資料裝入完成時執行的函數.

關於$.post demo我就不寫了和$.get完全一樣 只不過一是get方式請求一個是post方式請求