一、学习心得
1，主要学习了通过前端验证后将数据提交给php做处理，php将申请表格的脚本再提交给前端处理。
2，$.get方式提交方法的学习，实际验证。
3，前端对点击事件的验证方案学习。
二、知识点
1，jq基础知识
2，php逻辑判断
三、代码部分
1,html
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格生成器</title>
<!-- 页面样式 -->
<style type="text/css">
h3{
margin-left: 80px;
color: blue;
}
p button{
margin-left: 30px;
width: 80px;
height: 26px;
background: green;
color:white;
}
</style>
</head>
<body>
<!-- 页面布局 -->
<h3>表格生成器</h3>
<p><label>输入标题：<input type="text" name="title" id="title"></label></p>
<p><label>输入行：<input type="text" name="row"></label></p>
<p><label>输入列：<input type="text" name="col"></label></p>
<p><button>提交生成</button><button>重置表格</button></p>
<table > </table>
</body>
<!-- jquery引用 -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- jquery代码 -->
<script type="text/javascript">
// 设置防止重复提交标识
var flag=true
//获取按钮点击事件
$('button:eq(0)').on('click', function() {
//
//将页面全部input数据履历出来-标题单独判断是否为空
$('#title').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数据履历出来-用户输出行和列判断
$(':input').not('button,#title').each(function(index,obj){
//录入内容不能为空判断
if ($(obj).val().length==0) {
$(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
}
//录入内容必须为数字
else if (isNaN($(obj).val())) {
$(obj).after('<span style="color: red">必须为数字</span>')
setTimeout(function(){
$(obj).next().remove()
}, 1500)
return false
}
})
//判断完成后提post提交后台
if (flag=true) {
$.get('a.php', {
row:$('input[name="row"]').val(),
col:$('input[name="col"]').val(),
title:$('input[name="title"]').val()
}, function(data){
//删除上次提交的数据
$('p:last()').next().remove()
//重新生成表格
$('p:last()').after(data)
//防止重写状态改变一下
flag=false
})
}
});
//删除按钮功能实现
$('button:eq(1)').on('click',function(){
$(':input').not('button').val('')//清除页面内容
$('input:eq(0)').focus()
$('p:last').next().remove()
});
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<?php
if ($_SERVER['REQUEST_METHOD']=="GET")
//判断请求方式必须是get
{
if (!empty($_GET['row'])&& !empty($_GET['col'])&& !empty($_GET['title']))
{
$title=$_GET['title'];
$row=$_GET['row'];
$col=$_GET['col'];
$table='<table style="width: 80%" cellpadding="3px" cellspacing="0px" border="1px">'."<caption>{$title}</caption>";
//表格标题部分，生成一行N列
$table.='<tr>';
for ($i=0; $i <$col ; $i++) {
$table.='<td>X</td>';
}
$table.='</tr>';
for ($r=0; $r < $row; $r++) {
$table.='<tr>';
for ($c=0; $c < $col; $c++) {
$table.='<td>内容</td>';
}
$table.='</tr>';
}
echo $table;
exit();
}
else {
exit('<span style="color: red">数据为空</span>');
}
}
else {
}
?>运行实例 »
点击 "运行实例" 按钮查看在线实例
