您的位置：首页 > 其它

AJAX实现计算器

2016-02-24 14:12 246 查看

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>calc_AJAX.html</title>

<script type="text/javascript">

function loadXMLDoc(number1,number2)

{

var xmlhttp;

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

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

}

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}

}

var url="calc_AJAX_GET.php?num1="+number1+"&num2="+number2; //请求字符串

xmlhttp.open("GET",url,true);

xmlhttp.send();

}

</script>

</head>

<body>

<form method="post" action="">

计算器<br>

数值1：<input type="text" id="num1" value="3"> <br>

数值2：<input type="text" id="num2" value="2"> <br>

<br>

<button type="button" name="add" value="+" onclick="loadXMLDoc(document.getElementById('num1').value, document.getElementById('num2').value)">+ </button>

<br>

结果：<br>

<div id="myDiv"><h3>Let AJAX change this text</h3></div>

</form>

</body>

</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>calc_AJAX_GET.php</title>

<meta charset="UTF-8">

</head>

<body>

<?php

$sum="";

$num1=isset($_GET['num1']) ? $_GET['num1'] : "";

$num2=isset($_GET['num2']) ? $_GET['num2'] : "";

if(is_numeric($num1) && is_numeric($num2)){

$sum=$num1+$num2;

}else{

echo "请输入有效数值";

exit(0);

}

echo $sum;

?>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航