请求页代码：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格生成器</title>
<style type="text/css">
.content {
width:500px;
margin: 0 auto;
}
button {
border: none;
width: 80px;
height: 30px;
background-color: green;
color: #fff;
margin-right: 20px;
}
.right {
width:400px;
height: 500px;
float: right;
background-color: yellow;
}
</style>
</head>
<body>
<div class="content">
<h2>输入参数</h2>
<p><label>标题：<input type="text" name="caption"></label></p>
<p><label>行数：<input type="text" name="rows" class="num"></label></p>
<p><label>列数：<input type="text" name="cols" class="num"></label></p>
<p><button>生成</button><button>重置</button></p>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script>
$('button:first').on('click',function(){
var flag = true
if ($(':input:first').val().length == 0){
$(':input:first').after('<span style="color:red">请输入标题</span>')
$(':input:first').focus()
setTimeout(function(){
$(':input:first').next().remove()
},2000)
return false
}
$(':input[class="num"]').each(function(index,obj){
if($(obj).val().length == 0){
$(obj).after('<span style="color:red">不能为空</span>')
$(obj).focus()
setTimeout(function(){
//2秒后,将提示信息删除
$(obj).next().remove()
},2000)
return false
} else if (isNaN($(obj).val())) {
$(obj).after('<span style="color:red">必须是数字</span>')
$(obj).focus()
setTimeout(function(){
$(obj).next().remove()
},2000)
return false
} else if ($(obj).val() <= 0) {
$(obj).after('<span style="color:red">必须大于0</span>')
$(obj).focus()
setTimeout(function(){
$(obj).next().remove()
},2000)
return false
}
})
if (flag == true) {
$.get(
//1.请求处理的脚本
'creat.php',
//2.发送的请求参数
{
caption: $('input[name="caption"]').val(),
rows: $('input[name="rows"]').val(),
cols: $('input[name="cols"]').val()
},
//3.请求成功的回调函数
function(data){
//先将上一次生成的表格删除
// $('p:last').next().remove()
//生成新的表格
$('p:last').after(data)
//将请求标志设置为false,禁止重复请求
flag = false
}
)
}
})
//重置按钮
$('button').eq(1).click(function(){
//将行与列数据全部清空
$(':input').not('button').val('')
//将输入焦点重置到行文本框上
$(':input:first').focus()
//将上一次请求生成的表格删除
$('p:last').next().remove()
//重置请求状态为true:允许用户请求
flag = true
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
响应脚本代码：
实例
<?php
//判断用户的请求类型是否合法,必须是GET请求
if ($_SERVER['REQUEST_METHOD'] == 'GET') {
//如果用户发送的数据全部存在且不为空
if (!empty($_GET['rows']) && !empty($_GET['cols'])) {
//用较短的变量名称进行转存
$caption = $_GET['caption'];
$rows = $_GET['rows'];
$cols = $_GET['cols'];
//创建表格的基本架构,采用字符串拼接方式,最后统一生成,提高效率
$table = '<table border="1" cellspacing="0" cellpadding="3" align="center" width="80%">';
//下面用双重循环来生成这个表格
//1.生成标题
$table .= '<caption align="center" bgcolor="lightgreen"><h2>'.$caption.'</h2></caption>';
//1生成表头
$table .= '<tr align="center" bgcolor="lightgreen">';
for ($i=0; $i<$cols; $i++) {
$table .= '<th>X</th>';
}
$table .= '</tr>';
//2.生成表格内容区
for ($r=0; $r<$rows; $r++) {
$table .= '<tr>';
for($c=0; $c<$cols; $c++) {
//设置单元格的数据,数据与单元格数量对应
$data = $r*$cols+$c;
// ++$data: 可以确保从1开始计数,以确保符合人类正常思维
$table .= '<td align="center">'.++$data.'</td>';
}
$table .= '</tr>';
}
$table .= '</table>';
//将生成的表格返回到客户端
echo $table;
//结束当前脚本,可以省略,但写上该语句是一个很好的编程习惯
exit();
}
} else {
exit('<span style="color:red">请求类型错误</span>');
}运行实例 »
点击 "运行实例" 按钮查看在线实例
