EasyUI颠覆了我对动态网页和静态网页的看法

来源：互联网发布：linux root密码是什么编辑：程序博客网时间：2024/06/05 11:46

要是在以前你问我什么是动态网页，什么是静态网页，我可能会跟你说：“很简单，看后缀名就知道了，比如说后缀名为.jsp或.php或.aspx的网页就是动态网页，后缀名为.html或.htm的就是静态网页”。百度百科也这样说：“是与静态网页相对应的，也就是说，网页 URL的后缀不是htm、html、shtml、xml等静态网页的常见形式，而是以·aspx、.asp、.jsp、.php、.perl、.cgi等形式为后缀”。但现在使用了EasyUI这种技术后，就不能单纯的以后缀名来区分动态网页和静态网页了。

为什么呢，先来说一下动态网页和静态网页的本质区别，在不改变网页代码的情况下，网页的内容不会随着时间或环境的改变而改变的就是静态网页，否则是动态网页，简单的说就是：代码不变，内容不变的就是静态网页，代码不变，内容可以改变的就是动态网页。

以前之所以能够根据后缀名来区分，是因为以.html（.htm)为后缀名的网页代码写的什么，显示的内容就是什么，也就是说网页显示的内容是代码写出来的，而以.jsp，.php等等为后缀的网页，显示的内容主要是从数据库中取出来的，显示的内容可以根据用户的操作而改变，但代码是不变的。但现在情况不同了，现在以.html为后缀的网页，在不改变代码的情况下，显示的内容也是可以动态改变的。

拿EasyUI的datagrid来说，他可以加载一个数据表格，显示后台调出来的数据。加一个分页控件之后，能够使每页显示的数据动态改变，这不就是动态网页了吗，而我创建该网页是直接创建.html文件的，代码仅仅是一下这些

<!DOCTYPE html>
<html>
<head>
<title>初一</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">

</head>

<script>
$(function(){
$("#dg").datagrid({
url:'/easyui/student_findByPage.action?grade='+$(this).attr("title"),
title:$(this).attr("title")+'学生列表',
toolbar:'#tb',
fitColumns:'true',
fit:'true',
pagination:'true',
pagePosition:'bottom',
pageNumber:0,
pageSize:5,
pageList:[3,5,8,10],
columns:[[
{field:'id',checkbox:'true'},
{field:'grade',title:'年级',width:100},
{field:'className',title:'班级',width:100},
{field:'studCode',title:'学号',width:100},
{field:'studName',title:'姓名',width:100},
{field:'age',title:'年龄',width:100}

]]
});
});

</script>

<body>


<table id="dg"></table>


<div id="tb">
<span>请输入姓名：</span>
<input id="search" ><a id="check" href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="check();">搜索</a>
<a href="#" id="getAll" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="getAll();">查看详情</a>
<a href="#" id="add" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="add();">添加</a>
<a href="#" id="edit" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="edit();">编辑</a>
<a href="#" id="del" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="del();">删除</a>
</div>


<div id="dlg" class="easyui-dialog" style="width:560px;height:260px;padding:30px 40px;"
closed="true" buttons="#dlg-buttons">
<form id="fm" method="post">
<input type="hidden" name="studDto.id" id="id">
<table>
<tr>
<td><label>年级:</label></td>
<td><input class="easyui-combobox" type="text" id="gradeName" name="studDto.grade" required="true"/></td>
<td class="brank"></td>
<td><label>班级:</label></td>
<td><input class="easyui-combobox" type="text" id="className" name="studDto.className" required="true"/></td>
</tr>
<tr>
<td><label>班级编号:</label></td>
<td><input class="easyui-combobox" type="text" id="classNo" name="studDto.classNo" required="true"/></td>
<td class="brank"></td>
<td><label>姓名:</label></td>
<td><input type="text" id="studName" class="easyui-validatebox" required="true" name="studDto.studName" missingMessage="必填"></td>
</tr>
<tr>
<td><label>学号:</label></td>
<td><input type="text"id="studCode" class="easyui-validatebox" required="true" name="studDto.studCode" missingMessage="必填"></td>
<td class="brank"></td>
<td><label>年龄:</label></td>
<td><input type="text" id="age" class="easyui-validatebox" required="true" name="studDto.age" missingMessage="必填"></td>
</tr>
<tr>
<td><label>电话号码:</label></td>
<td><input type="text" id="phone" class="easyui-validatebox" required="true" name="studDto.phone" missingMessage="必填"></td>
<td class="brank"></td>
<td><label>生日:</label></td>
<td><input type="text" id="birthday" class="easyui-datebox" name="studDto.birthday">
</tr>
<tr>
<td><label>性别:</label>
<td rowspan="2">
<input id="male" type="radio" name="studDto.gender" value="男">男
<input id="female" type="radio" name="studDto.gender" value="女">女
</td>
</tr>
</table>
</form>
</div>
<div id="dlg-buttons">
<a id="save" href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" style="width:90px" onclick="save();">确认</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">取消</a>
</div>

</body>

</html>

页面显示的数据是通过url:'/easyui/student_findByPage.action?grade='+$(this).attr("title")调用后台程序来显示数据库的内容，通过分页控件的使用，使页面的数据随着页码的改变而改变,网页的后缀名是.html.

所以以后要区分动态或静态就不能单纯的看后缀名了

0 0