作者foxzgerald (O⊥M)
看板PHP
標題Re: [請益] php和javascript
時間Sat Jun 23 03:02:09 2007
※ 引述《sonic010739 (http://0rz.net/410zd)》之銘言：
: 我現在需要一個能夠輸入數值然後可以自動計算的javascript
: 不過情況有點特殊，跟一般輸入兩個數字自動計算出來不同
: 共有兩個欄位 一個是選擇商品 另一個是數量
: 第一個欄位
: ...
: <select name="pid">
: <option value="pid">商品名稱(價錢)</option>
: ^ ^ ^
: //這三個數值都是從資料庫取出的資料
: </select>
: ...
: 另一個欄位則是輸入商品的數量
: 然後可以透過js去自動計算出總價放在第三個欄位
: 然後再交給後端的php程式去做資料儲存的動作
: 目前的困難是我找不到合適的js來做自動計算的動作 (對js不熟悉)
: 有人有相關的經驗或是資訊可以提示我一下嗎 只使用php+JS可以達成的
: 謝謝
AJAX 是 Asynchronous JavaScript and XML 的縮寫。
若依其嚴格定義，應指：以非同步的方式(同時)將 JS 和 XML
用在 client 與 server 間的通訊上。但其實很多時候不需要
勞煩到 XML；單靠著 JS 就可以完成很多事情。
首先，必須知道 client 和 server 間的溝通，是藉著字串串
流(string stream)傳遞訊息。在前述的概念上，HTML 和 XML
其實都只是一種經過格式化的
字串串流。
不同於未經格式化的字串，XML 可以藉剖析器（parser）將字
串內容轉換成對電腦有意義／可操作的元素。
JSON 也是種格式化的字串，而其定義了變數在不同程式間／程
式語言間的交換標準。
只需遵照著格式，便能將變數轉為字串串流、或（使用剖析器）
將字串串流重新轉為變數。
（對於剖析有疑問的人，可以去 wiki 或 google "parser" :P）
倘若了解上述字串串流的概念，那麼這個問題應該不難解決；
因為問題就變成，用怎樣的流程去傳遞／處理這些字串。
解決這個問題，大致可以拆解成 client 和 server 兩部分。
client端，也就是 Browser裡頭可以借用 javascript來計算，
藉著一些 event (例如 onLoad, onUnLoad, onClick...)
來觸發 javascript 的 function，而該 function 則負責
將之前計算的結果轉成字串後、傳遞給 server 上相應的 php 處理。
以下為示範用的程式碼(因為省略很多東西，所以可能沒法執行XD)
======================================================
// FILE: client.php ..底下的是該 php所輸出的 html
// 也就是 browser 所能看到的內容
<script>
var price; //示範方便，所以使用全域變數
function save() {
// 透過 iframe 來達成背景傳遞訊息的目的；
// 這是在 XML 被廣泛應用到非同步處理之前常用的做法
var comm = document.getElementById('comm_iframe');
// 產生連結字串；使用 GET的方式將變數傳遞到 server.php
var linkstr = 'server.php?price="' + price + '"';
comm.location.href=linkstr;
}
function counter() {
// 計算價格，並將結果儲存到 price
}
</script>
<body onUnLoad="save()"><!-- 離開頁面時儲存 -->
<iframe id="comm_iframe" class="empty"></iframe>
<!-- 透過 css 讓 iframe 「隱形」..BTW, empty 的 css 要自己寫 XD -->
<select name="pid" onChange="counter">
<option value="100">商品名稱(價錢)</option>
</select>
</body>
====================================================
大致上只要設計得當，讓 javascript 在預期的情況下被觸發
然後執行類似 save() 等函式，便能在不使用 XML 的情況下
仍然達到非同步的目的..
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 140.119.199.121
※ 編輯: foxzgerald 來自: 140.119.199.121 (06/23 03:07)
1F：推 sonic010739:感謝^^ 06/23 11:09