JQUERY UI使用者介面設計

頁籤

|

21

首先我們指定 URL，接著指定以 Ajax 載入內容 ( 留意先後順序 )。action.php 檔案的內

容如下所示：

<?

$txt = “<p> Tab content sent by the server </p>”;

$txt = utf8_encode($txt);

echo ($txt);

?>

結果如圖 2-6 所示。

請留意，當我們在 HTML 頁面裡透過 Ajax 取得資料的時候，HTML 頁面應該要透過

HTTP 載入（因此位址欄裡面是 URL），不能直接把檔案拖到瀏覽器裡。

接著我們要來看如何透過 Ajax 把資料傳給伺服器。

圖 2-6　透過 Ajax 動態建立的頁籤內容

以 Ajax 把資料傳給伺服器

這個範例將示範如何透過 Ajax 把資料傳給伺服器並修改頁籤內容。在這個範例之中，

我們將把一位訪客的姓名傳給伺服器，然後在伺服器回傳的頁籤內容之中顯示出來。傳

送的資訊（姓名）要插入

data

屬性的

ajaxOptions

選項內（以粗體標示）：

22

|

第二章

<script src = jquery.js></script>

<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>

<link ...