ajax+phpを使った商品価格計算
2022-01-15 16:37:09
この例では、ajax と php を使って商品の価格を計算するコードを共有し、次のページを実装します。
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Commodity price calculation</title>
<style type="text/css">
table {
border-collapse: collapse;
}
tr {
text-align: center;
}
.a4 {
text-align: right;
/* padding-right: 15px; */
}
#myDiv {
color: red;
}
input {
border: 0;
}
</style>
</head>
<body>
<form action="data.php" method="get">
<table border="1" bordercolor="#00CCCC" cellpadding="20">
<tr>
<th>Product name</th>
<th>Quantity purchased (pounds)</th>
<th>Commodity price (yuan/catty)</th>
</tr>
<tr>
<td>Bananas</td>
<td><input type="text" name="a1" value="0" id="n1" onchange="zongji()" />& lt;/td>
<td>8</td>
</tr>
<tr>
<td>Apple</td>
<td><input type="text" name="a2" value="0" id="n2" onchange="zongji()" />& lt;/td>
<td>5</td>
</tr>
<tr>
<td>orange</td>
<td><input type="text" name="a3" value="0" id="n3" onchange="zongji()" />& lt;/td>
<td>7</td>
</tr>
<tr>
<td colspan="3" class="a4">Item Discount: <span>0.8</span></td>
</tr>
<tr>
<td colspan="3" class="a4">
<div id="jiage">Total price of purchased items after discount: $</div>
</td>
</tr>
</table>
</form>
<script>
function zongji() {
var b1 = document.getElementById("n1").value;
var b2 = document.getElementById("n2").value;
var b3 = document.getElementById("n3").value;
//1. Create the object
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari browsers execute the code
xmlhttp = new XMLHttpRequest();
} else {
// IE6, IE5 browsers execute the code
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2. Determine if the object is ready
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("jiage").innerHTML = xmlhttp.responseText;
}
};
//3. Send the request
xmlhttp.open(
"GET",
"demo.php?c1=" + b1 + "&c2=" + b2 + "&c3=" + b3,
true
);
xmlhttp.send();
}
</script>
</body>
</html>
data.php
<p>
<?php
$d1 = $_GET["c1"];
$d2 = $_GET["c2"];
$d3 = $_GET["c3"];
$sum = (intval($d1) * 8 + intval($d2) * +intval($d3) * 7) * 0.8;
// $sum = $a1*7.99 + $a2*6.89 + $a3*3.99;
echo "Total price of purchased items after discount: $sum $";
? >
</p>
以上、本記事の全内容をご紹介しましたが、皆様の学習のお役に立てれば幸いです。また、Script Houseをより一層応援していただければ幸いです。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン