![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
主题：
利用ajax方式提交数据到服务器上的php程序处理，然后返回html表格。
实现效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格生成器</title>
<!-- Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body style="padding-top:70px">
<div class="col-md-12" id="headbox">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<h3>XXXXXX管理系统</h3>
</div>
</nav>
</div>
<div class="container-fluid">
<div class="col-xs-3 list-group">
<a href="#" class="list-group-item disabled">Cras</a>
<a href="#" class="list-group-item">Dapibus</a>
<a href="#" class="list-group-item">Morbi leo</a>
<a href="#" class="list-group-item">Porta ac</a>
<a href="#" class="list-group-item">Vestibulum</a>
</div>
<div class="col-xs-9">
<div class="form-group">
<label for="title">表格标题：</label>
<input type="text" class="form-control" id="title" name="title" placeholder="请输入标题">
</div>
<div class="form-group">
<label for="rows">表格行数：</label>
<input type="text" class="form-control" id="rows" name="rows" placeholder="请输入行数">
</div>
<div class="form-group">
<label for="cols">表格列数：</label>
<input type="text" class="form-control" id="cols" name="cols" placeholder="请输入列数">
</div>
<p>
<button type="submit" class="btn btn-primary">生成</button>
<button type="reset" class="btn btn-info">重置</button>
</p>
</div>
<!-- <div class="col-md-4">右侧</div> -->
</div>
</body>
<!-- jquery 核心 JavaScript 文件 -->
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
//创建请求标志，防止重复请求
var flag = true
// 给按钮设置按下事件
$('button:first').on('click',function(){
// 第一步：遍历并验证用户输入的信息
// $(选择器).each(对象索引,当前对象)
// 输入的所有内容非空判断
$(':input').not('button').each(function(index,obj){
// 用字符长度进行非空判断
if ($(obj).val().length == 0){
// 给空内容设置提示信息
$(obj).after('<span style="color:red">不能为空</span>')
// 用定时器设置提示时间
setTimeout(function(){
$(obj).next().remove()
},1500)
return false
}
})
// 输入的行列内容继续判断
$(':input').not($(':input:first')).not('button').each(function(index,obj){
//isNaN()：是否是数字判断
if (isNaN($(obj).val())){
// 给空内容设置提示信息
$(obj).after('<span style="color:red">必须为数字</span>')
// 用定时器设置提示时间
setTimeout(function(){
$(obj).next().remove()
},1500)
return false
}
// 非0判断
else if ($(obj).val() <= 0){
// 给空内容设置提示信息
$(obj).after('<span style="color:red">必须大于0</span>')
// 用定时器设置提示时间
setTimeout(function(){
$(obj).next().remove()
},1500)
return false
}
})
// 第二步：GET方式处理用户信息请求
if (flag == true) {
// 提交GET请求中的数据
$.get('api/check.php', {
title: $('input[name="title"]').val(),
rows: $('input[name="rows"]').val(),
cols: $('input[name="cols"]').val()
},
function(data){
//先将上一次生成的表格删除
// $('p:last').next().remove()
$('p').after(data)
flag = false
}
)
}
})
//重置按钮功能实现
$('button:last').on('click',function(){
// 清除输入框内容
$(':input').not('button').val('')
// 输入焦点保持到第一个输入框
$(':input:first').focus()
// 清除上次生成的表格
$('p').next().remove()
// 将标志设置为初始
flag = true
return false
})
</script>
</html>点击 "运行实例" 按钮查看在线实例
<?php
// 判断用户的请求类型是否合法，必须是GET
if ($_SERVER['REQUEST_METHOD'] == 'GET') {
// 非空判断
if (!empty($_GET['title']) && !empty($_GET['rows']) && !empty($_GET['cols'])) {
$title = $_GET['title'];
$rows = $_GET['rows'];
$cols = $_GET['cols'];
$table = '<table class="table table-bordered">';
$table .= '<caption>'. $title. '</caption>';
// 用双重循环生成表格
// 1.生成表头
$table .= '<tr>';
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>'. ++$data. '</td>';
}
$table .= '</tr>';
}
$table .= '</table>';
echo $table;
exit();
}
} else {
exit('<span style="color:red">非法请求</span>');
}点击 "运行实例" 按钮查看在线实例
总结：
表格生成器使用GET方式将用户填入的表格标题、行数、列数数据提交至后台php脚本，经过php脚本的处理将表格生成之后返回至前端html页面显示，其中特别注意数据处理流程，检测数据合格性->处理数据->返回数据，不能将流程顺序打乱。要熟悉其中使用的$.get,each(),$_GET[]等的参数和值的意义。
