說明：
下面這個我在測試 jQuery 時撰寫的程式，有興趣的話可以下載下來玩看看，建議使用 firefox 的 firebug 來觀察呼叫的過程
1. 請在上面那個輸入的地方輸入你要的數字，然後按下面的計算，就會把 a 和 b 丟給 http_ajax.php 做運算，再將結果送回來
2. 請先按 'run test' 按鈕，試試看有無反應，再去按 '$.getScript' 按鈕，然後再試一次
ajax.html
下面這個我在測試 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!!');
}
全站熱搜
留言列表
程式設計 (22)
