說明：
下面這個我在測試 jQuery 時撰寫的程式，有興趣的話可以下載下來玩看看，建議使用 firefox 的 firebug 來觀察呼叫的過程
1. 請在上面那個輸入的地方輸入你要的數字，然後按下面的計算，就會把 a 和 b 丟給 http_ajax.php 做運算，再將結果送回來
2. 請先按 'run test' 按鈕，試試看有無反應，再去按 '$.getScript' 按鈕，然後再試一次

ajax.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
input[type='text'] {border:0; border-bottom:1px solid #ccc; text-align:center}
</style>
<script src='/global/js/jquery-1.6.3.min.js'></script>
<script>
    $(function ()
    {
        /* ajax 回傳後的處理 */
        function ajax_success(obj, status)
        {
            {
                console.log(obj);
                console.log(status);
                $("#answer").html(obj.answer);
            }
        }
        
        /* 取得參數 */
        function getParam()
        {
            return {a:$('#fmA').val(), b:$('#fmB').val()};
        }
    
        /* ajax 呼叫 */
        $('#fmAjax').bind('click', function ()
        {
            $.ajax({
                type     : 'post',
                url      : 'http_ajax.php',
                data     : getParam(),
                success  : ajax_success,
                dataType : 'json'
            });
        });

        /* 同步呼叫 ajax */
        $('#fmAjaxSync').bind('click', function ()
        {
            $.ajax({
                async    : false,
                type     : 'post',
                url      : 'http_ajax.php',
                data     : getParam(),
                success  : ajax_success,
                dataType : 'json'
            });
        });

        /* get */ 
        $('#fmGet').bind('click', function()
        {
            $.get('http_ajax.php', getParam(), ajax_success, 'json');
        });            
        
        /* post */
        $('#fmPost').bind('click', function ()
        {
            $.post('http_ajax.php', getParam(), ajax_success, 'json');
        });

        /* getJSON */ 
        $('#fmGetJSON').bind('click', function ()
        {
            $.getJSON('http_ajax.php', getParam(), ajax_success);
        });

        /* ajax 回傳的 jqXHR 物件觀察 */
        $('#fmAjaxJQXHR').bind('click', function ()
        {
            var x = $.ajax({
                type     : 'post',
                url      : 'http_ajax.php',
                data     : getParam(),
                success  : ajax_success,
                dataType : 'json'
            })
            .success(function (){alert('jqXHR.success');})
            .error(function (){alert('jqXHR.error');})
            .complete(function (){alert('jqXHR.complete');});
            
            console.log(x);
        });

        /* 用來動態載入 javascript 檔蠻好用的 */
        $('#fmGetScript').bind('click', function ()
        {
            $.getScript("test.js");
        });

        /* 測試呼叫 function test (定義在 test.js 裡)*/
        $('#fmRunTest').bind('click', function ()
        {
            test();
        });
    });
</script>
</head>
<body>
<div id='box' style='width:850px; margin:0 auto;'>
<form id=form>
<input type=hidden id=fmHide name=fmHide value='1'>
<input type=text id=fmA name=fmA value='2'>
+
<input type=text id=fmB name=fmB value='2'>
=
<span id=answer style='font-weight:bold; color:#0f0;'></span>
<hr>
<input id=fmAjax      type=button value='$.ajax'>
<input id=fmAjaxSync  type=button value='$.ajax(同步呼叫)'>
<input id=fmGet       type=button value='$.get'>
<input id=fmPost      type=button value='$.post'>
<input id=fmGetJSON   type=button value='$.getJSON'>
<input id=fmAjaxJQXHR type=button value='$.ajax.jqXHR'>
<hr>
<input id=fmGetScript type=button value='$.getScript'>
<input id=fmRunTest   type=button value='run test'>
</form>
</div>
</body>
</html>
http_ajax.php
<?php
$c = $a + $b;
$ret = array('status' => 'true', 'answer' => $c);
sleep(1);
echo json_encode($ret);
exit;
test.js
function test()
{
    alert('I'm test!!');
}
arrow
arrow
    全站熱搜

    wbkuo 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄