js控制页面显示和表单提交

早期的web页面在显示方面一般在后台进行控制，虽然对后台开发来讲是比较容易做到的，但是涉及到一个问题，那就是数据库压力。

因为要控制显示，所以会比较频繁的从数据库中来回调用。

 

现在的js功能越来越强，且开发越来越方便，那么很多页面显示可以转交给js来进行控制，方法其实比较简单，就是控制显示和隐藏而已。

 

实现方法如下

?

1 2 3 4 5

<br>筛选： <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><br><br><br><br><br>

　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();
  }