![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：Uncorrected
Teacher's comments：
Collection
Collection
总结：
1创建请求标志，防止请求重复
获取inpu然后用each循环遍历取到的jq对象
如果对象等于0 非空判断 判断是否等于0 判断是否为数字 操作一样
2处理用户的请求 Ajax
使用get请求
请求成功的回调函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 360px;
border: 1px solid black;
background-color: #faebd7;
}
h2{
color: red;
margin-left: 80px;
}
label{
padding: 10px;
}
button{
width: 80px;
height: 30px;
color: white;
background-color:#00ffff;
border: none;
margin-left: 50px;
}
</style>
</head>
<body>
<div>
<h2>在线制作表格</h2>
<p><label>请输入行：<input type="rows" name=""></label></p>
<p><label>请输入列：<input type="cols" name=""></label></p>
<p><button>确定</button><button>重置</button></p>
</div>
</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:first').on('click',function(){
//获取inpu然后用each循环遍历取到的jq对象
$(':input').not('button').each(function(index,obj){
// alert($(obj).val()) //检查可否获取到值
//如果对象等于0 非空判断
if ($(obj).val().length == 0) {
//在文本框后显示提示信息
$(obj).after('<span style="color:red">不能为空.猪</span>')
setTimeout(function(){
$(obj).next().remove()
},2000)
return false
//判断是否等于0 操作一样
}else if ($(obj).val() <= 0) {
$(obj).after('<span style="color:red">必须大于0</span>')
setTimeout(function(){
$(obj).next().remove()
},2000)
return false
//判断是否为数字 操作一样
}else if (isNaN($(obj).val())) {
$(obj).after('<span style="color:red">必须是数字</span>')
setTimeout(function(){
$(obj).next().remove()
},2000)
return false
}
})
//2处理用户的请求 Ajax
if (flag == false) {
//使用get请求
$.get(
//1请求处理的脚本
'demo2.php'
//2发送的请求参数
{
rows : $('input[name="rows"]').val(),
cols : $('input[name="cols"]').val()
},
//请求成功的回调函数
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；
})
</script>点击 "运行实例" 按钮查看在线实例
<?php
// 判断用户的请求是否合法
if ($_SERVER['REQUEST_METHOD'] =='GET') {
if (!empty($_GET['rows']) && !empty($_GET['cols'])){
$rows = $_GET['rows'];
$cols = $_GET['cols'];
//创建表格的基本结构
$table = '<table border="1" cellspacing="0" cellpadding="3" align="center" width="80%">';
//下面用双重循环生成表格
//1生成表头
$table = '<tr align="center" background-color="lightgreen">';
for ($r=0; $r<$rows; $c++){
$table = '<th> 1 </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>')
}点击 "运行实例" 按钮查看在线实例
3重置按钮