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

ตอนนี้ทำระบบตะกร้าสินค้าแบบ ajax ค่ะ มีวิธีหรือโค้ดการคำนวณราคาสินค้าแบบ ajax ไหมค่ะ ช่วยแนะนำหน่อยค่ะ เช่น ผู้ซื้อเลือกจำนวนที่ต้องการสั่งซื้อสินค้า หรือกรอกจำนวนที่ต้องการสั่งซื้อ ในการคำนวณราคารวมจะคำนวณให้โดยอัตโนมัติเลยค่ะ ไม่ต้องมีการคลิกปุ่มคำนวณราคาใหม่ คือจะขึ้นราคารวมให้อัตโนมัติค่ะ
05 ส.ค. 2553 8 6,041

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

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

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

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

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

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

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

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

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

#6

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


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


#8
ความคิดเห็น
ไฟล์อัปโหลด ชนิด jpg, jpeg ขนาดไฟล์ไม่เกิน 1024
^