idnex.php：处理前端
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<p><label>标题:<input type="text" name="title"></label></p>
<p><label>行:<input type="text" name="rows"></label></p>
<p><label>列:<input type="text" name="cols"></label></p>
<p><button>生成</button><button>重置</button></p>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
// 标签用于避免重复请求
var flag = true
// 获取按钮点击事件
$('button').eq(0).click(function(){
// 跳过标题，进行验证
$(':input:gt(0)').not('button').each(function(index,obj){
if ($(obj).val().length == 0) {
$(obj).after('<span>内容不能为空</span>')
return false
}else if(isNaN($(obj).val())){
$(obj).after('<span>内容必须为数字</span>')
return false
}else if ($(obj).val <= 0) {
$(obj).after('<span>内容必须大于零</span>')
return false
}
// ajax,处理用户的请求
if (flag == true) {
$.get(
// 服务器脚本
'demo1.php',
// 将请求的参数发生到服务器
{
title:$('input[name="title"]').val(),
rows: $('input[name="rows"]').val(),
cols: $('input[name="cols"]').val()
// 请求成功的回调函数
},function(data){
/////////////////
//先将上一次生成的表格删除 //
/////////////////
$('p:last').next().remove()
///////////
//生成新的表格 //
///////////
$('p:last').after(data)
flag = false
})
}
})
// 处理标题的验证
if ($(':input:first').val().length ==0){
$(':input:first').after('<span>内容不能为空</span>')
flag = false
}else if(!isNaN($(':input:first').val())){
$(':input:first').after('<span>内容不能为数字</span>')
flag = false
}
$('button').eq(1).click(function(){
// 将数据清空
$(':input').not('button').val('')
// 焦点设置在行上
$(':input').eq(1).focus()
// 将上一次请求生成的表格删除
$('p:last').next().remove()
flag = true
})
})
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
demo1.php：后端的PHP
实例
<?php
// 判断请求的类型是否是get
if($_SERVER['REQUEST_METHOD']=='GET'){
//判断用户发送的数据全部存在且不为空
if(!empty($_GET['title'])&&!empty($_GET['rows']) && !empty($_GET['cols']))
{
// 接收变量名称
$rows = $_GET['rows'];
$title = $_GET['title'];
$cols = $_GET['cols'];
$table = '<table border="1" cellspacing="0" cellpadding="3" align="center" width="80%">';
// 生成标题
for ($i=0; $i<$cols; $i++) {
$table .= '<caption>'.$title.'</caption>';
}
$table .= '</tr>';
// 生成表头
$table .= '<tr align="center" bgcolor="lightgreen">';
for ($i=0; $i<$cols; $i++) {
$table .= '<th>X</th>';
}
$table .= '</tr>';
//生成表格内容区
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>');
}
?>运行实例 »
点击 "运行实例" 按钮查看在线实例
