1. client side script (javascript) ที่คุณต้องสร้างขึ้นมาเพื่อดึงเอาค่า value จาก element มาเก็บไว้
var VproductId = document.getElementById('productId').value; // id ของสินค้า var VproductName = document.getElementById('productName').value; // ชื่อของสินค้า var VproductPieces = document.getElementById('productPieces').value; // ราคาของสินค้า var VproductTotals = document.getElementById('productTotals').value; // จำนวนที่ซื้อ
2. สร้าง object ajax request เพื่อส่งค่าที่เก็บมา (javascript) เพื่อส่งไปประมวลผล ทางฝั่ง server side script (php,asp,หรืออื่นๆ)
if (objRequest.readyState == 4 && objRequest.status == 200) {
callback(objRequest.responseText);
delete objRequest;
objRequest = null;
}
}
}
3. server side script (php,asp,หรืออื่นๆ) ที่คุณต้องเตรียมไว้รับค่าเพื่อประมวลผลราคารวมของสินค้า (คิดว่ามีอยู่แล้ว) แล้วส่งค่าคืนกลับไปยังจุดที่เราเรียกใช้
ที่คุณต้องทำ
1. client side script (javascript) ที่คุณต้องสร้างขึ้นมาเพื่อดึงเอาค่า value จาก element มาเก็บไว้
var VproductId = document.getElementById('productId').value; // id ของสินค้า
var VproductName = document.getElementById('productName').value; // ชื่อของสินค้า
var VproductPieces = document.getElementById('productPieces').value; // ราคาของสินค้า
var VproductTotals = document.getElementById('productTotals').value; // จำนวนที่ซื้อ
2. สร้าง object ajax request เพื่อส่งค่าที่เก็บมา (javascript) เพื่อส่งไปประมวลผล ทางฝั่ง server side script (php,asp,หรืออื่นๆ)
/*************************
* url = ที่อยู่ของไฟล์ที่รับค่าไปประมวลผล
* data = ค่าที่ส่งไปประมวลผล
* callback = ชื่อฟังชั่นที่รับค่าไปทำงานต่อหลังจากส่งค่าคืนกลับไป
* ส่งกลับทั้ง data และ ชื่อฟังชั่น
* เวลาเรียกใช้
* ajax("sum.php", "productId=" + VproductId + "&productName=" + VproductName + "&productPieces=" + VproductPieces + "&productTotals=" + VproductTotals, Basket);
**************************/
$productId = $_POST['productId'];
$productName = $_POST['productName'];
$productPieces = $_POST['productPieces'];
$productTotals = $_POST['productTotals'];
function sum($productId,$productName,$productPieces,$productTotals){
// สั่งให้ทำอะไรดี
$result = $sum;
return $result;
}
4. หลังจากที่ข้อ 2. รับค่าคืนกลับมาแล้ว ก็ส่งค่าที่ได้ไปให้อีกฟังชั่นนึงทำงานต่อ เพื่ออัพเดทสถานะ ของราคาปัจจุบัน ซึ่งต้องใช้ client side script (javascript) ในการจัดการเรื่องดังกล่าว
กลับไปสังเกตุดูข้อ 2.
ajax("sum.php", "productId=" + VproductId + "&productName=" + VproductName + "&productPieces=" + VproductPieces + "&productTotals=" + VproductTotals, Basket);
สร้างฟังชั่นที่ใช้อัพเดทสถานะของราคารวมเพื่อเตรียมไว้รับค่าเพื่อทำงานต่อด้วยเป็นอันเสร็จ
เท่านี้ก็ได้ โปรแกรมคำนวนราคาแบบอัตโนมัติแล้ว
โค้ดต้นแบบมาจากหนังสือ คู่มือเรียน AJAX สำหรับผู้เริ่มต้น โดย พร้อมเลิศ หล่อวิจิตร
ลองประยุกต์จากบทความใหม่ที่ผมเขียนให้ดูครับ
เพราะตัวอย่างนี่ประยุกต์มาจากในหนังสืออีกที แบบคิดสดๆ
เอามาเป็นตัวอย่างให้แบบเฉพาะกิจจริงๆ (บอกแล้วว่าในหนังสือเป็นแค่ต้นแบบ)
แต่พื้นฐานของเรื่องนี้ คงต้องไปกางหนังสือดูเอง เพราะจำไม้ได้แล้วว่าอยู่บทไหน 555+
ในเว็บนี้ก็มีลองหาดูก่อนได้นะ คุณอาก็พึ่งจะทำตัวอย่างมาให้เมื่อตอนกลางวันนี้เอง
ไหนๆ หลงเข้ามาที่นี่แล้วก็ศึกษาเอาที่นี่เลย จะได้เป็นหลักเป็นแหล่งหน่อย
จะได้ไม่ต้องลอยไปลอยมา หุหุ
แล้วแวะมาทักทายกันบ่อยๆ นะ ไม่งั้นเคือง
หนูขอโค้ดคำนวณค่าบริการเช่ารถจากฐานข้อมูล คือว่ามีฟอร์มและโค้ด js คำนวณนะค่ะ รบกวนหน่อยนะค่ะ