專業鋁門窗、鍛造門設計及安裝
價格便宜、品質好、設計佳,值得您信賴
油漆30多年專業技術團隊
幫您輕鬆搞定房子抓漏防水等惱人問題

首頁  •  j2h 論壇 • 程式設計討論     • 

[JQuery] jQuery + AJAX + PHP 應用範例

房東:小魚
發表時間:2011-05-21
[檢舉]


ajax有很多技術,早先我是用xajax,但最近看了jQuery之後,覺得用法還蠻直接的,只要把jQuery的js檔案在HTML裡面include進來就可以直接使用語法,此外jQuery還支援很多PluginsUI (User Interface)的操作,以下是一個很簡單的範例。

實際流程是:整個網頁載入後,會出現一個輸入姓名的欄位

\"\"

此時可隨便輸入一個名字

\"\"

按下Send按鈕,驅動ajax,並有loading效果

\"\"

等待5秒後,下方將出現剛剛輸入的名字

\"\"



程式流程:透過jQuery的ajax功\能與後端Server的PHP程式溝通(此範例使用GET方法)之後,再把結果(echo 指令的output)丟回給前端的瀏覽器,只要這個範例能夠看懂,就等於打通任督二脈(前後端資料能溝通),之後想在後端查詢資料庫還是做運算等動作,就都沒有問題了~



前端:hello.htm 內容如下



<HTML>
<HEAD>
<style type="text/css">
#loadingImg{
position:absolute;
width:300px;
top:0px;
left:50%;
margin-left:-120px;
text-align:center;
padding:7px 0 0 0;
font:bold 11px Arial, Helvetica, sans-serif;
}
</style>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $(\'#btn\').click(function (){
         $.ajax({
         url: \'hello.php\',
         cache: false,
         dataType: \'html\',
             type:\'GET\',
         data: { name: $(\'#name\').val()},
         error: function(xhr) {
           alert(\'Ajax request 發生錯誤\');
         },
         success: function(response) {
                   $(\'#msg\').html(response);
           $(\'#msg\').fadeIn();
         }
     });
  });
 $(\'#clean\').click(function(){
    $(\'#msg\').html("");
    // document.getElementById(\'msg\').innerHTML = "";
 });
$("#loadingImg").ajaxStart(function(){
   $(this).show();
});
$("#loadingImg").ajaxStop(function(){
   $(this).hide();
});
})
</script>
</HEAD>
<BODY>
<div id="loadingImg" style="display:none"><img src="loading.gif"> loading...</div>
<br><br><br>
<div align="center">
Enter your name <br>
<input type="text" id="name"> <br>
<input type="button" value="send" id="btn">
<input type="button" value="reset" id="clean">
<br><br><br>
<div id="msg"> </div>
</div>
</BODY>
</HTML>





後端 hello.php 的程式碼如下

<?php

$myname = $_GET[\'name\'];

sleep(5); //為了製造 ajax loading效果,所以延遲5秒

echo "You input name is $myname <br>";

?>




至於ajax loading 時的BAR或小花旋轉等圖示,網路上有一個ajaxload圖示庫可以來製作





  • 贊助網站       

    廣利不動產-新板特區指名度最高、值得您信賴的好房仲
    您的托付,廣利用心為您服務
    廣利不動產-板橋在地生根最實在--新板特區指名度最高、值得您信賴的好房仲
    完整房訊,房屋、店面熱門精選物件,廣利不動產 優質仲介,房屋租賃、買賣資訊透明,交易真安心!



  •  共 0 人回應

    姓名:
    佈告內容: