ไฟล์ที่ 1 calculator.htmi
<script>
var ajax = null;
if(window.ActiveObject){
ajax = new ActiveObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
ajax = new XMLHttpRequest();
}
function ajaxLoad(method,URL,data,displayId){
ajax.open(method,URL);
ajax.onreadystatechange = function(){
if(ajax.readyState==4 && ajax.status==200){
ajaxCallback(displayId,ajax.responseText)
}
}
ajax.send(data);
}
function ajaxCallback(displayId,responseText){
var el = document.getElementById(displayId);
el.value = responseText;
}
function calculator(sign){
var URL = "calculator_ss.php";
URL += "?rand=" + Math.random();
URL += "?sign=" + sign;
var op1 = document.getElementById("op1").value;
var op2 = document.getElementById("op2").value;
var data = "op1="+op1+"&op2="+op2;
ajaxLoad('POST',URL,data,'result');
}
</script>
<title>เครื่องคิกเลขแบบง่าย</title>
</head>
<body>
<center>
<p><h3><b>Ajax Calculator </b></h3></p>
<table width="231" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="88">ค่าที่ 1:</td>
<td width="143"><input type="text" id="op1" /></td>
</tr>
<tr>
<td>ค่าที่ 2:</td>
<td><input type="text" id="op2" /></td>
</tr>
<tr>
<td> </td>
<td><center><button onclick="calculator('plus')">+</button>
<button onclick="calculator('minus')">-</button>
<button onclick="calculator('multiply')">*</button>
<button onclick="calculator('divide')">/</button></center></td>
</tr>
<tr>
<td>ผลลัพธ์:</td>
<td><input type="text" id="result" /></td>
</tr>
</table></center>
</body>
</html>
ไฟล์ที่ 2 calculator.php
<?php
$op1 = $_POST['op1'];
$op2 = $_POST['op2'];
$sign = $_POST['sign'];
switch($sign){
case "plus":
echo $op1 + $op2; break;
case "minus":
echo $op1 - $op2; break;
case "multiply":
echo $op1 * $op2; break;
case "divide":
echo $op1 / $op2; break;
}
?>
ผมขอรบกวนถามด้วยครับ จาก code ข้างต้น นี้ ทำไมมันไม่แสดงผล ขอบคุณล่วงหน้าครับ
<script>
var ajax = null;
if(window.ActiveObject){
ajax = new ActiveObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
ajax = new XMLHttpRequest();
}
function ajaxLoad(method,URL,data,displayId){
ajax.open(method,URL);
ajax.onreadystatechange = function(){
if(ajax.readyState==4 && ajax.status==200){
ajaxCallback(displayId,ajax.responseText)
}
}
ajax.send(data);
}
function ajaxCallback(displayId,responseText){
var el = document.getElementById(displayId);
el.value = responseText;
}
function calculator(sign){
var URL = "calculator_ss.php";
URL += "?rand=" + Math.random();
URL += "?sign=" + sign;
var op1 = document.getElementById("op1").value;
var op2 = document.getElementById("op2").value;
var data = "op1="+op1+"&op2="+op2;
ajaxLoad('POST',URL,data,'result');
}
</script>
<title>เครื่องคิกเลขแบบง่าย</title>
</head>
<body>
<center>
<p><h3><b>Ajax Calculator </b></h3></p>
<table width="231" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="88">ค่าที่ 1:</td>
<td width="143"><input type="text" id="op1" /></td>
</tr>
<tr>
<td>ค่าที่ 2:</td>
<td><input type="text" id="op2" /></td>
</tr>
<tr>
<td> </td>
<td><center><button onclick="calculator('plus')">+</button>
<button onclick="calculator('minus')">-</button>
<button onclick="calculator('multiply')">*</button>
<button onclick="calculator('divide')">/</button></center></td>
</tr>
<tr>
<td>ผลลัพธ์:</td>
<td><input type="text" id="result" /></td>
</tr>
</table></center>
</body>
</html>
ไฟล์ที่ 2 calculator.php
<?php
$op1 = $_POST['op1'];
$op2 = $_POST['op2'];
$sign = $_POST['sign'];
switch($sign){
case "plus":
echo $op1 + $op2; break;
case "minus":
echo $op1 - $op2; break;
case "multiply":
echo $op1 * $op2; break;
case "divide":
echo $op1 / $op2; break;
}
?>