如果你已經嘗試使用Javascript寫Ajax，
相信一定覺得程式碼有夠冗長的，
特別是在Ajax宣告部分，
還要因應各個瀏覽器版本需求將所有例外一一處理掉...
看到著大概就要吐掉一公升的血了...
接下來還要寫一堆有的沒的....
說實在的真的不是很人性化壓....
不過當你看到快頭昏腦脹時，
救星來了!!!
就是jQuery啦!!
想要用ajax?很簡單!!!
只要少少幾行輕鬆ok!!
接下來就來個範例唄~~
ajax.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery.js" type="text/javascript" ></script>
<script type="text/javascript" language="javascript">
var i=0;
$(document).ready(initial);
function get_value_for_ajax_POST(){
$.ajax({
type: "POST",
url: "2.php",
data:'name=chihwei',
beforeSend:function(){
$('#res2').html("準備中~~");
},
error:function(xhr,textStatus,errorThrown){
alert("出錯啦!!");
},
success: function(msg){
$('#res2').html(msg);
}
});
}
function get_value_for_ajax_GET(){
$.ajax({
type: "GET",
url: "1.php",
data:'name=chihwei',
beforeSend:function(){
$('#res').html("準備中~~");
},
error:function(xhr,textStatus,errorThrown){
alert("出錯啦!!");
},
success: function(msg){
$('#res').html(msg);
}
});
}
function get_value_for_ajax(){
$.ajax({
url: "3.php",
beforeSend:function(){
$('#res3').html("準備中~~");
},
error:function(xhr,textStatus,errorThrown){
alert("出錯啦!!");
},
success: function(msg){
$('#res3').html(msg);
}
});
}
function initial(){
get_value_for_ajax_POST();
get_value_for_ajax_GET();
get_value_for_ajax();
}
</script>
<title>Ajax</title>
</head>
<body>
<div id="res" ></div>
<div id="res2" ></div>
<div id="res3" ></div>
</body>
</html>
1.php
<?php echo "Hi你用的是GET，你傳來得值是：".$_GET["name"]; ?>
2.php
<?php echo "Hi你用的是POST，你傳來得值是：".$_POST["name"]; ?>
3.php
<? echo "Hi~你是用單純取得頁面資料的方式~~"; ?>
如果你有程式底子的話~~
相信看完以上程式碼，
大概就能了解jQuery ajax的運作方式啦~~ :)
![[超級懶人包] Amazon Kindle Fire 改機全攻略(Root、Market、中文注音輸入、中文化、google相關同步服務、常用軟體)](http://lh3.ggpht.com/-aOEAlqMzc2U/TtJdHCxAmzI/AAAAAAAACGY/bKHNkbQYzek/w72-h72-p-k-no-nu/2011-11-25-19-24-11_thumb%25255B2%25255D.png?imgmax=800)
![[圖文教學]APP2SD+ 建立EXT3分區 裝程式遊戲不用愁!!](http://lh3.ggpht.com/_CMJl5VWyD74/TbLp2Vk3FaI/AAAAAAAAAoI/sHCVyRRkyNg/w72-h72-p-k-no-nu/image_thumb%5B89%5D.png?imgmax=800)
![[筆記] LibSVM for matlab 安裝教學&使用方法](http://lh6.ggpht.com/_CMJl5VWyD74/TdnYknlCWsI/AAAAAAAAA4s/ZjtmvehrwoE/w72-h72-p-k-no-nu/image_thumb%5B25%5D.png?imgmax=800)
![[SD空間擴充術] 內建SD空間不夠用嗎？來！來！來！我教你！外接SD卡掛載至內建SD記憶體方法大解析](http://lh4.ggpht.com/-mJLPZG1vYOE/T9ijLbqedkI/AAAAAAAADXE/x45nJZ5iGH8/w72-h72-p-k-no-nu/image_thumb%25255B6%25255D.png?imgmax=800)
![[手癢系列] 不管怎樣都要來Root一下 Galaxy R I9103 CWM+Root安裝教學](http://lh5.ggpht.com/-5UFkNay3Xdw/T9cGFNRpN-I/AAAAAAAADUc/Hmn3LCqSrq4/w72-h72-p-k-no-nu/20120612154841_thumb%25255B9%25255D.png?imgmax=800)
![[CentOS] 忘記root密碼怎麼辦？別擔心!!還是有救的!!](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn3OEwhZ8v0VVircs1zUYNFzEvkpPVqPJcVCuO2d-LNSaWUIkMjH_MXidhyphenhyphenNTQPiTzzL0y9UOBBuJn9vUn70hXE7hfIVh2gd9k6wwZ6rQfwUwileUtHm6e15UAVFbtiMN_9WLwTN3-Uflh/w72-h72-p-k-no-nu/1.jpg)
![[千呼萬喚始出來] Vibo A699 懶人包 V6.0 官方洩漏 Android 2.3版本 台灣特製版發布囉!!](http://lh4.ggpht.com/-2qKUNlWq4lE/TgN_6CGUl0I/AAAAAAAAA_8/5M38AFhi158/w72-h72-p-k-no-nu/2011-06-24-00-54-37_thumb%25255B1%25255D.png?imgmax=800)
![[2017年CP值之王] 小米6 開箱 6GB/128GB 陶瓷尊享版 超乎你想像！驚人價格超值旗艦！](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpecfrRuo1AAfhH1kBoZI5EQTYQgV92CLfdqO0pgWqIa-qEh7kO8bO0cRj25HOCpBqlxktmaSuiA3-LstTYHAsbDu0XyrvwEkyc-qmn5Ssa7Un2faXEDbkvjzve0MpncGlyHjGshfDMUum/w72-h72-p-k-no-nu/?imgmax=800)
沒有留言:
Write 意見