早期的web页面在显示方面一般在后台进行控制,虽然对后台开发来讲是比较容易做到的,但是涉及到一个问题,那就是数据库压力。
因为要控制显示,所以会比较频繁的从数据库中来回调用。
现在的js功能越来越强,且开发越来越方便,那么很多页面显示可以转交给js来进行控制,方法其实比较简单,就是控制显示和隐藏而已。
实现方法如下
筛选:
<a class="ch-btn-skin ch-btn-small" onclick="get_a(this,event)" >全部</a>
<a class="ch-btn-skin ch-btn-small" onclick="get_c(this,event)" data=1>动态</a>
<a class="ch-btn-skin ch-btn-small" onclick="get_c(this,event)" data=2>教育</a>
<a class="ch-btn-skin ch-btn-small" onclick="get_c(this,event)" data=3>社保</a>
js代码如下
function get_c(elem,event){
var cid=$(elem).attr("data");
$("table tr[data!="+cid+"]").hide();
$("table tr[data="+cid+"]").show();
} function get_a(elem,event){
$("table tr").show();
}
文件显示部分是一个表格。通过js控制当前页面的分类筛选,速度显示上非常快。
代码部分主要注意,使用了jquery。函数中使用了js中的this来代表本身,从而可以获取元素本身的值,从而通过元素属性值的不同,控制页面具有相同属性部分的隐藏和显示。
表单提交是个比较简单的事情,但是一旦需要多次提交且是同一个表单提交至不同页面,问题就会很麻烦。这个时候如果不借助js进行控制相信实现起来比较困难。
如果通过js来提交,就可以控制的比较细。代码实现如下
<form class="form-horizontal" method="post" action="list.php?a=re" name="tj">
<input type="textl" name="ttt" >
<input type="email" name="ee" >
<button class="btn btn-success" onclick="sc()">按商家列出</button>
<button class="btn btn-success" onclick="st()">按时间列出</button>
</form> //document.tj.ee.value=document.forms[0].elements[1].value
function sc(){
tj.action="list.php?a=cid";
tj.submit();
}
function st(){
tj.action="list.php?a=cte";
tj.method="post";
tj.submit();
}