搬家業界第一家推薦之
優良搬家公司		客源網租屋就找
明日黃金屋

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

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

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


ajax有很多技術，早先我是用xajax，但最近看了jQuery之後，覺得用法還蠻直接的，只要把jQuery的js檔案在HTML裡面include進來就可以直接使用語法，此外jQuery還支援很多Plugins及UI (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 人回應

    姓名：
    佈告內容：