2009年4月7日

jQuery + AJAX + PHP 應用範例

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圖示庫可以來製作

5 則留言:

zzz 提到...

要這個範例能夠看懂,就等於打通任督二脈--推這句話

All of Chris 提到...

這個也是您的網站嗎?
http://bear6042.spaces.live.com/blog/cns!B22815A1F80059D8!208.entry?ccr=900#comment

這段程式碼有點狀況,想要請教一下...
success: function(response) {
$('#msg').html(response);
$('#msg').fadeIn();}

傳回來的這段好像會有點問題,我沒有辦法在我的資料內加上連結位置,前輩有遇到這樣問題嗎?

熱浪 提到...
作者已經移除這則留言。
熱浪 提到...
作者已經移除這則留言。
熱浪 提到...

success: 這段是伺服器response.write的結果
Chris的問題是否是指下面這段
url: '<提交的目的程式>'

這個小工具發生錯誤