如果你已經嘗試使用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相關同步服務、常用軟體)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbkLSqOQM9ymNzB0C8kNBtga0VE8ysGL_M0OyJMECXqHaX5QYFr0zP35oOealqmTqAo7m6D24t9BDLSXwQBPPCZJx-urJL54syqE3VuwMisqanhG76_Bx8pmNKyhvLrrY8yRszdKoac-xn/w72-h72-p-k-no-nu/?imgmax=800)
![[圖文教學]APP2SD+ 建立EXT3分區 裝程式遊戲不用愁!!](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiErQs0GhJApn82icNNc4ANemtnvTq-2r-SrMxq8efC7Om5EgoR7RbXN-PweI-VlXbtz24beqK2dJ8Pam5cCZ9qF6qP9l_gL8h0qXg97iP_r-5xn8ZwG4M1PQVlim4bYaZJ49t4KUaipkAT/w72-h72-p-k-no-nu/?imgmax=800)
![[筆記] LibSVM for matlab 安裝教學&使用方法](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxgFEjkyUfiKK8B3EyXjYUJgJG5n8ffQvLc9GrDaX_8UNQpICQUs17o-kbEF6tGZ-mNx8-mifq6K_BYqFIhb2eGjAcpIAiyRugYnMCVj8lTM9uzJ-usihWV8xnecuaAqktma6ovFiUhY5R/w72-h72-p-k-no-nu/?imgmax=800)
![[SD空間擴充術] 內建SD空間不夠用嗎？來！來！來！我教你！外接SD卡掛載至內建SD記憶體方法大解析](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8N57_VdTEewKVlw8ovRbvCzGOav99msxjLJscXvgEa55KHC3a6b_BRRUQP-XJpDtWUsVceHK5TgbTLu9_j7qGdA3eef0ClIQ6Z4Hm5m_SZ6y7liw6FIPFaLx-_QPY5e490pgOMP3Hjde7/w72-h72-p-k-no-nu/?imgmax=800)
![[手癢系列] 不管怎樣都要來Root一下 Galaxy R I9103 CWM+Root安裝教學](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWH9NXzlIZDcRYZgvBftNBEfXNzDcC1S9V7k9KWH39xndumon5VsQ6ZGKdsth4_1il06jDOQTGlhiITMSasoHg7akB4RoPrE4sIRDsppno9-vYiSCt3TflQ_NI366pQXmXpL8B62C9kQH3/w72-h72-p-k-no-nu/?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版本 台灣特製版發布囉!!](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXo2bqphnKMJ9FASAvP10R64vjVAlhuC8kt9mI74KZx3gxGnl_gHvebfucd-KA361YAFGEToentW49ibtaEbYIQwkBzc-gjt7sCAuKfARDBdJJ0nS_HZoEpuazolSGpw2jxz80QlnXl38_/w72-h72-p-k-no-nu/?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 意見