要求
使用ajax计算结果后输出到php页面
效果图
index.php代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>判断是否为闰年</title>
</head>
<style>
body {
background-color: #dedede;
}
.main {
border: 7px dotted #00bcff;
width: 555px;
margin: 222px auto;
padding: 0 28px;
font-size: 28px;
}
h1 {
text-align: center;
}
input {
height: 30px;
border: none;
}
#ajax {
color: red;
}
</style>
<body>
<div class="main">
<h1>闰年的判断</h1>
<p>
输入的年份:<input type="text" placeholder="请输入年份的数字" id="nianfen" onchange="zl()" />
</p>
<p>判断的结果: <span id="ajax"></span></p>
</div>
<script>
function zl() {
var year = document.getElementById("nianfen").value;
//1.创建对象
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp = new XMLHttpRequest();
} else {
// IE6, IE5 浏览器执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.判断对象是否准备就绪
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("ajax").innerHTML = xmlhttp.responseText;
}
};
//3.发出请求
xmlhttp.open("GET", "data.php?years=" + year, true);
xmlhttp.send();
}
</script>
</body>
</html>
data.php代码
<?php
$y = $_GET["years"];
if (!is_numeric($y) || $y == 0) {
echo "请输入正确的年份";
} else {
if ($y % 4 == 0 && $y % 100 != 0 || $y % 400 == 0) {
echo "$y 是闰年";
} else {
echo "$y 不是闰年";
}
}
?>