jquery ajax執行個體教程與詳細說明(1/2)

說明

$.ajax({ type: "post", url: "handler1.ashx", data: { username: "admin", password: "123" },
success: successhandle });
function successhandle(rep) {
$("#msg").html(rep);
}

詳細講一下關於jquery ajax執行個體

執行個體
通過 ajax 載入一段文本：

jquery 代碼：

$(document).ready(function(){
  $("#b01").click(function(){
  htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
  $("#mydiv").html(htmlobj.responsetext);
  });
});

html 代碼：

<div id="mydiv"><h2>let ajax change this text</h2></div>
<button id="b01" type="button">change content</button>

jquery學習中使用jquery和prototype整合使jquery的tab實現局部資料，使用prototype的ajax中方法，現在使用jquery實現同樣的功能，如下：

 

jquery真是個非常強大的類庫,今天學習了一下,愛上了,講下jquery中ajax使用方法.

例子:

test.html

頁面引用<script type="text/網頁特效" src="jquery-1.3.2.min.js"></script>

內容有:

<div id="divmsg">hello world!</div>

用法1:(頁面載入時讀取遠程頁面內容到divmsg)

$("#divmsg").load(http://localhost:8012/t.asp教程, { "resulttype": "html" });

傳回型別resulttype有如下幾種:

"xml", "html", "script", "json", "jsonp", "text"

用法2:(點擊post資料返回資料)

<input type="button" id="bnajax" value="ajax" onclick="ajaxtest()" />

<script type="text/javascript" >

 function ajaxtest()
 {
  $.post("http://localhost:8012/t.asp", { "txt": "123" },function(data)
  {
   $("#divmsg").html(data);
  }
  );
 }

</script>

 

首頁 1 2 末頁