js控制页面显示和表单提交
早期的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(); }