การคำนวณราคาสินค้าแบบ ajax

หลักการดังนี้
ที่คุณต้องทำ

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);
**************************/

function ajax(url, data, callback) {

  var objRequest = false;

 

  if (window.XMLHttpRequest) {

    objRequest = new XMLHttpRequest();

  }

  else if (window.ActiveXObject) {

    objRequest = new ActiveXObject("Microsoft.XMLHTTP");

  }

 

  if (objRequest) {

    objRequest.open("POST", url);

    objRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    objRequest.onreadystatechange = handleResponse;

    objRequest.send(data);

  }

  function handleResponse() {

    if (objRequest.readyState == 4 && objRequest.status == 200) {

      callback(objRequest.responseText);

 

      delete objRequest;

      objRequest = null;

    }

  }

}

3. server side script (php,asp,หรืออื่นๆ) ที่คุณต้องเตรียมไว้รับค่าเพื่อประมวลผลราคารวมของสินค้า (คิดว่ามีอยู่แล้ว) แล้วส่งค่าคืนกลับไปยังจุดที่เราเรียกใช้


$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 สำหรับผู้เริ่มต้น โดย พร้อมเลิศ หล่อวิจิตร

โดน .::{เปรียว}::. ตัดหน้าไปแล้ว..

ลองประยุกต์จากบทความใหม่ที่ผมเขียนให้ดูครับ  

ขอ อภัย ท่านอาจารย์ อา  (ถึงว่า เห็นนั่งทำไรอยู่ตั้งนาน...)

ขอบคุณมากๆๆเลยนะค่ะ

ถามต่ออีกนิดหนึ่งนะค่ะ  โค้ดต้นแบบมาจากหนังสือ คู่มือเรียน AJAX สำหรับผู้เริ่มต้น โดย พร้อมเลิศ หล่อวิจิตร บทที่เท่าไหร่ในหนังสือค่ะ

ไปเปิดดูก็คงหาไม่เจอหรอก 555+
เพราะตัวอย่างนี่ประยุกต์มาจากในหนังสืออีกที แบบคิดสดๆ
เอามาเป็นตัวอย่างให้แบบเฉพาะกิจจริงๆ (บอกแล้วว่าในหนังสือเป็นแค่ต้นแบบ)
แต่พื้นฐานของเรื่องนี้ คงต้องไปกางหนังสือดูเอง เพราะจำไม้ได้แล้วว่าอยู่บทไหน 555+
ในเว็บนี้ก็มีลองหาดูก่อนได้นะ คุณอาก็พึ่งจะทำตัวอย่างมาให้เมื่อตอนกลางวันนี้เอง
ไหนๆ หลงเข้ามาที่นี่แล้วก็ศึกษาเอาที่นี่เลย จะได้เป็นหลักเป็นแหล่งหน่อย
จะได้ไม่ต้องลอยไปลอยมา หุหุ 

แล้วแวะมาทักทายกันบ่อยๆ นะ ไม่งั้นเคือง 

ขอบคุณมากๆเลยค่ะ ทำได้แล้วค่ะ

หนูขอโค้ดคำนวณค่าบริการเช่ารถจากฐานข้อมูล คือว่ามีฟอร์มและโค้ด js คำนวณนะค่ะ รบกวนหน่อยนะค่ะ