Wednesday, September 9, 2009

Xajax 讀取數值的三個方法 - read

Ajax 最重要的是能夠動態的讀取 HTML 上面的數值,然後做出相對應的反應, 不讓整個頁面重新 load,取而代之的是,部分元素更新即可.所以在 Xajax 中,我們必須清楚的知道, 必須擷取的元素為何, 並如果做處理。

據個例子來說,
<input name="year" id="year" readonly="true" />å¹´

假設我們要讀取的是使用者輸入的"年"這個元素,因此我們必須知道它 HTML 中如何辨識。而 id, name 就是重要的標記屬性,所以相對應的 id, name屬性名稱是必須正確的標示的課題之一。

介紹三個 Xajax 讀取數值的方式

1. Javascript 的 getElementById 屬性
document.getElementById('year').value

回傳 id=year 的欄位值,的確是我們需要的效果喔。接著,只要將這個數值丟給已經寫好的 PHP 函式當參數。
xajax_yourfunction(document.getElementById('year').value);

2. Method xajax.getFormValues(id)
xajax_yourfunction(xajax.getFormValues('form_id'));

為 class xajax.command.handler 的函式,能夠讀取整個 Form 的數值。在我們所撰寫的 PHP 函式要讀取 Form 的個別元素, 請參考以下說明:
function yourfunction($formData)
{
$objResponse = new xajaxResponse();

// 讀取個別屬性值
// 跟 POST 或是 GET 的擷取有點相似
$year = $formData['year'];
$month = $formData['month'];

return $objResponse;
}

3. Method setParameter(nParameter, sType, sValue)
$registerAdd = $xajax->register(XAJAX_FUNCTION, 'yourfunctionname');
$registerAdd ->setParameter(0, XAJAX_JS_VALUE, 39);
$registerAdd ->setParameter(1, XAJAX_JS_VALUE, 571);

Type 有 XAJAX_FORM_VALUES , XAJAX_QUOTED_VALUE , XAJAX_JS_VALUE , XAJAX_INPUT_VALUE , XAJAX_CHECKED_VALUE 可以選擇, 端看使用者需要輸入的數值以及屬性分別式哪一種形式。旗標的書"最新PHP,MYSQL,AJAX網頁程式設計"第十六章有提到蠻多 XAJAX 的, 這個教學用的 PPT 可以用 Google 搜尋一下,而裡面有關於 setParameter 的 Type 說明:

Quote:
XAJAX_FORM_VALUES
表示要用網頁表單欄位值所組成的陣列當參數, 此時 sValue 需設為表單的 id 值

XAJAX_INPUT_VALUE
表示要用某個 <input> 輸入欄位的值當參數, 此時 sValue 需設為輸入欄位的 id 值

XAJAX_CHECKED_VALUE
表示要用某個多選欄位的值當參數, 此時 sValue 需設為該欄位的 id 值

後續的處理

在讀取我們所需要的內容之後,根據我們寫得 PHP 函式作對應的處理之後,然後去更新 HTML 中我們想要動態更新的部份了,而這一步驟也是關鍵性的最後一個過程。

No comments:

Post a Comment